将我的视频皮肤应用于每个视频标签(原版 java 脚本)

Question

我试图做的是扫描文档中的每个视频标签，并将我的自定义皮肤应用于它。

下面的代码只会呈现第一个实例，我已经让它将"video"的 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));
}