html5视频缓存指示器

Question

我试图为我所有的视频添加一个缓冲区加载程序。我所有的视频都有id="video"，但我的6个视频中只有一个似乎显示出来了。请记住，我使用的是chromes网络节流阀“慢3g”，这样我就可以强制使用一个慢速缓冲区。谁知道为什么只有一个视频会显示加载程序，而没有其他人会呢？这是代码：

​

var video = document.getElementById("video");
var placeholder = document.getElementById("placeholder");
placeholder.style.top = video.offsetTop + "px";
placeholder.style.left = video.offsetLeft + "px";

video.onwaiting = function() {
  showPlaceholder(placeholder, this);
};
video.onplaying = function() {
  hidePlaceholder(placeholder, this);
};

function showPlaceholder(img, vid) {
  img.style.height = vid.scrollHeight + "px";
  img.style.width = vid.scrollWidth + "px";
  img.style.display = "block";
}

function hidePlaceholder(img, vid) {
  img.style.display = "none";
}

.placeholder {
  display: none;
  position: absolute;
  background-size: cover;
  text-align: center;
  z-index: 300000;
}

.THG-video {
  width: 100% !important;
  height: auto !important;
  max-height: 380px;
  max-width: 512px;
}

<div id="placeholder" class="placeholder"><img src="https://thg-graphics.com/media/DualRing.gif"></div>
<video class="THG-video" id="video" poster="Images/Rita.jpg" controls controlsList="nodownload noaudio" preload="none">
                <source src="videos/Rita.mp4" type="video/mp4"> Your browser does not support the video tag.
            </video>
<video class="THG-video" id="video" poster="Images/nat.jpg" controls controlsList="nodownload noaudio" preload="none">
                <source src="videos/nat_x264.mp4" id="video" type="video/mp4"> Your browser does not support the video tag.
              </video>
<video class="THG-video" id="video" poster="Images/ora.jpg" controls controlsList="nodownload noaudio" preload="none">
                <source src="videos/Ora209_x264.mp4" type="video/mp4"> Your browser does not support the video tag.
              </video>
<video class="THG-video" id="video" poster="Images/Arff-custom.jpg" controls controlsList="nodownload noaudio" preload="none">
                <source src="videos/ARFF-Custom-3_x264.mp4" type="video/mp4"> Your browser does not support the video tag.
              </video>
<video class="THG-video" id="video" poster="Images/THG-Green.jpg" controls controlsList="nodownload noaudio" preload="none">
                <source src="videos/THG-Green.mp4" type="video/mp4"> Your browser does not support the video tag.
              </video>
<video class="THG-video" id="video" poster="Images/mgd.jpg" controls controlsList="nodownload noaudio" preload="none">
                <source src="videos/MGD_x264.mp4" type="video/mp4"> Your browser does not support the video tag.
              </video>

​

Answer 1

我已经做了一个工作加载程序，可以用于许多视频，你喜欢。只需将ids、视频和占位符标记编辑为每个视频的唯一单词即可。这是一个小提琴手

​

var video = document.getElementById("video_1");
var placeholder = document.getElementById("placeholder_1");
placeholder_1.style.top = video_1.offsetTop + "px";
placeholder_1.style.left = video_1.offsetLeft + "px";

video_1.onwaiting = function() {
  showPlaceholder(placeholder_1, this);
};
video_1.onplaying = function() {
  hidePlaceholder(placeholder_1, this);
};

function showPlaceholder(img, vid) {
  img.style.height = vid.scrollHeight + "px";
  img.style.width = vid.scrollWidth + "px";
  img.style.display = "block";
}

function hidePlaceholder(img, vid) {
  img.style.display = "none";
}


var video = document.getElementById("video_2");
var placeholder = document.getElementById("placeholder_2");
placeholder_2.style.top = video_2.offsetTop + "px";
placeholder_2.style.left = video_2.offsetLeft + "px";

video_2.onwaiting = function() {
  showPlaceholder(placeholder_2, this);
};
video_2.onplaying = function() {
  hidePlaceholder(placeholder_2, this);
};

function showPlaceholder(img, vid) {
  img.style.height = vid.scrollHeight + "px";
  img.style.width = vid.scrollWidth + "px";
  img.style.display = "block";
}

function hidePlaceholder(img, vid) {
  img.style.display = "none";
}


var video = document.getElementById("video_3");
var placeholder = document.getElementById("placeholder_3");
placeholder_3.style.top = video_3.offsetTop + "px";
placeholder_3.style.left = video_3.offsetLeft + "px";

video_3.onwaiting = function() {
  showPlaceholder(placeholder_3, this);
};
video_3.onplaying = function() {
  hidePlaceholder(placeholder_3, this);
};

function showPlaceholder(img, vid) {
  img.style.height = vid.scrollHeight + "px";
  img.style.width = vid.scrollWidth + "px";
  img.style.display = "block";
}

function hidePlaceholder(img, vid) {
  img.style.display = "none";
}

var video = document.getElementById("video_4");
var placeholder = document.getElementById("placeholder_4");
placeholder_4.style.top = video_4.offsetTop + "px";
placeholder_4.style.left = video_4.offsetLeft + "px";

video_4.onwaiting = function() {
  showPlaceholder(placeholder_4, this);
};
video_4.onplaying = function() {
  hidePlaceholder(placeholder_4, this);
};

function showPlaceholder(img, vid) {
  img.style.height = vid.scrollHeight + "px";
  img.style.width = vid.scrollWidth + "px";
  img.style.display = "block";
}

function hidePlaceholder(img, vid) {
  img.style.display = "none";
}

.placeholder {
  display: none;
  position: absolute;
  background-size: cover;
  text-align: center;
  float: left;
  z-index: 300000;
}

.loader,
.loader:before,
.loader:after {
  background: #ff8000;
  -webkit-animation: load1 1s infinite ease-in-out;
  animation: load1 1s infinite ease-in-out;
  width: 1em;
  height: 4em;
}

.loader {
  color: #ff8000;
  text-indent: -9999em;
  margin: 88px auto;
  position: relative;
  font-size: 11px;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  position: absolute;
  top: 0;
  content: '';
}

.loader:before {
  left: -1.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader:after {
  left: 1.5em;
}

@-webkit-keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

@keyframes load1 {
  0%,
  80%,
  100% {
    box-shadow: 0 0;
    height: 4em;
  }
  40% {
    box-shadow: 0 -2em;
    height: 5em;
  }
}

<video id="video_1" controls preload="none">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>

<div id="placeholder_1" class="placeholder">
  <div class="loader">Loading...</div>
</div>

<video id="video_2" controls preload="none">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>

<div id="placeholder_2" class="placeholder">
  <div class="loader">Loading...</div>
</div>

<video id="video_3" controls preload="none">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>

<div id="placeholder_3" class="placeholder">
  <div class="loader">Loading...</div>
</div>

<video id="video_4" controls preload="none">
  <source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4" />
</video>

<div id="placeholder_4" class="placeholder">
  <div class="loader">Loading...</div>
</div>

​