У меня есть сайт, на котором много видео. видео воспроизводятся как плейлист. Проблема в том, что через некоторое время или когда я меняю вкладки и возвращаюсь к ним, он становится зависшим и медленным. Вот мои коды!
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>