时间戳

首页 > 解决方案 > 我该如何解决

javascript - 我该如何解决

问题描述

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

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>

标签： javascriptvideoplaylist

解决方案

DOMException 过程中出现错误。此网址将带您进行修复。我是 100% 这将防止您看到的冻结。请指教，祝你好运！ https://developers.google.com/web/updates/2017/06/play-request-was-interrupted#fix 有一些 JavaScript 需要稍作调整，此后一切都应该正常运行。

推荐阅读