如何解决 <video> 冻结和变慢的问题？

Question

我有一个包含许多视频的网站。视频作为播放列表播放。问题出在一段时间后，或者当我更改标签并返回时，它变得冻结且缓慢。 这是我的代码！

const colus = document.getElementsByClassName("col-md-3");

const videosone = colus[0].getElementsByTagName('video');

videosone[0].play();

let i = 0;
let j = 0;

myHandlerone(0);

function myHandlerone(i) {

videosone[i].addEventListener("timeupdate", function(e){

if (this.currentTime > 14) {

this.pause();
this.currentTime= 0;

}})

videosone[i].addEventListener('pause',function(e){

if (i < videosone.length - 1) {

j = i + 1;

videosone[j].style.display = "block";
videosone[i].style.display = "none";
videosone[j].play()

i = i + 1;
myHandlerone(i);

} else {

videosone[0].style.display = "block";
videosone[i].style.display = "none";
videosone[0].play()

myHandlerone(0);

}})}


const videostwo = colus[1].getElementsByTagName('video');

videostwo[0].play();

let k = 0;
let l = 0;

myHandlertwo(0);

function myHandlertwo(k) {

videostwo[k].addEventListener("timeupdate", function(e){

if (this.currentTime > 14) {

this.pause();
this.currentTime= 0;

}})

videostwo[k].addEventListener('pause',function(e){

if (k < videostwo.length - 1) {

l = k + 1;

videostwo[l].style.display = "block";
videostwo[k].style.display = "none";
videostwo[l].play()

k = k + 1;
myHandlertwo(k);

} else {

videostwo[0].style.display = "block";
videostwo[k].style.display = "none";
videostwo[0].play()

myHandlertwo(0);

}})}

<div class="col-md-3">
    <div id="myvideo" style="width: 100%; height: 400px; overflow: hidden;">
      <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/hren1brbm_1080__D.mp4"></video>
      <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/kpll3r_1080__D.mp4"></video>
      <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/artist-drawing-henna-tattoo-on-woman-hand-in-india_rovjoopfdg_1080__D.mp4"></video>
      <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/bjfexlpu__d_1080__D.mp4"></video>
      
      <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/videoblocks-gamer-boy-playing-video-games-on-smartphone_bceuskkvv_1080__D.mp4"></video>
      <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/videoblocks-worker-at-factory-welding_bue3j8esmx_1080__D.mp4"></video>
      <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/videoblocks-young-grace-woman-practicing-elements-with-aerial-hoop_rneekqvj3f_1080__D.mp4"></video>
      <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/s0xvso2l4v_1080__D.mp4"></video>
    </div>
  </div>
  <div class="col-md-3">
    <div id="myvideo" style="width: 100%; height: 400px; overflow: hidden;">
      

         
          
          <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/videoblocks-celebrants-dancing-during-the-color-holi-festival_hfbynffi_1080__D.mp4"></video>
          <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/rs_s4wcvnemng_1080__D.mp4"></video>
          
          <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/slow-motion-tennis-ball.mp4"></video>
          <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/snake-charmer-in-india.mp4"></video>
          <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/ac0w7f_x_1080__D+(1).mp4"></video>
      <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/ah4rz_1080__D.mp4"></video>
       <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/ah4rz_1080__D.mp4"></video>
       <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/hj.mp4"></video>
       <video muted="muted" style="display: block; height: 100%; width: 100%; object-fit: cover;" src="https://viddy.s3.ca-central-1.amazonaws.com/hot-summer-day.mp4"></video>
    </div>
  </div>

  <div class="col-md-6">
    <div class="center-table">

  <p><span class="about">About Us</span><br><br><span class="subtitle">Viddy is a global social network for mobile video.<br>
Creators entertain the world with their talents.</span><br><br>

<span class="sub">Viddy has team members around the world in Detroit, Los Angeles, San Francisco, Las Vegas, Chicago, New York, Miami, London, Paris, Dubai, Tokyo, Barcelona, Zimbabwe, Kyiv, Singapore, Seoul, Prague, Mumbai, and Moscow. </span>

</p>
  </div>
  </div>
</div><br>
</div>
<style type="text/css">
.sub{font-family: "Product Sans";
    font-weight: 400;
    font-size: 22px;
    line-height: 20px;
    color: #4f535a;
    text-decoration: justify !important;}
.subtitle{
    font-family: "Product Sans Bold";
    font-weight: 400;
    font-size: 22px;
    line-height: 24px;
    color: #161823;
    text-align: justify !important;
}
.about{
    font-family: "Product Sans Bold";
    font-weight: 700;
    font-size: 43px;
    line-height: 1;
    margin-bottom: 20px;
    text-align: center;
    color: black;
}
.center-table {
  display: table;
  height: 400px;
  background: white;
  text-align: justify !important;
}
.center-table p {
  text-align: justify !important;
  display: table-cell;
  margin: 0;
  color: black;
  font-size: 21px;
  padding: 0px;
  vertical-align: middle;
}
.row{
  padding: 0px;
}
</style>

Answer 1

几个月前遇到过类似的问题。根据您的服务器，请尝试此替换。

拍

改成

更改该命令应该可以防止视频冻结。请告知它是否有效。