Question

我想要做的是扫描每个视频标签的文档并将自定义皮肤应用到它。

下面的代码只会呈现第一个实例，我已经将它应用于所有视频标签的“视频”ID。

非常感谢任何帮助。

  if (document.getElementsByTagName("video").length = 0) {}else{

  var vid, vidSkin, playbtn, defaultBar, progressBar, loadingBar, skipPointer, curTime, durTime, mutebtn, volumeSlider, userVolume, fullScreenBtn;

  for (i = 0; i < document.getElementsByTagName("video").length; i++) {
      document.getElementsByTagName("video")[i].setAttribute("id", "video");
  }

  function intializePlayer() {

      vid = document.getElementById("video");

      //Removes and default elements
      video.controls = false;

      //Finds any video tags and creates the skin
      var vidAsChild = vid.parentNode;
      var vidWrap = document.createElement('figure');
      // set vid as child
      vidAsChild.replaceChild(vidWrap, vid);
      // set element as child of vidWrap
      vidWrap.appendChild(vid);
      vidWrap.setAttribute("id", "videoContainer");
      vidWrap.setAttribute("data-fullscreen", "false");
      // creates the controls after a video tag with an id video
      function insertAfter(referenceNode, newNode) {
          referenceNode.parentNode.insertBefore(newNode, referenceNode.nextSibling);
      }
      var vidCtrl = document.createElement("nav");
      vidCtrl.setAttribute("id", "videoControls");
      vidCtrl.innerHTML = '<div id="defaultBar"><div id="progressBar"></div><div id="loadingBar"></div><div id="skipPointer"></div></div><button id="playPauseBtn"></button><button id="muteBtn"></button><span id="curTime">0:00</span> / <span id="durTime">0:00</span><input id="volumeSlider" type="range" min="0" max="100" value="100" step="1"><button id="fullScreenBtn"></button>';
      insertAfter(vid, vidCtrl);

   }

  window.onload = intializePlayer;

  }

Answer 1

我已经将“视频”的ID应用于所有视频标签。

ID应该是唯一的。这就是为什么只有第一个有效的原因。将您的ID更改为类，或增加您的ID。这是一种可能的解决方案

for (i = 0; i < document.getElementsByTagName("video").length; i++) {
  document.getElementsByTagName("video")[i].setAttribute("id", "video" + (i + 1));
}

将我的视频皮肤应用于每个视频标签（vanilla java script）

1 个答案: