Hello! I have one video element. How can I switch it to another after completing one? And is it possible to do it so that when the last video ends, the first one turns on?

My code is:

 var videos = [ "https://v.cdn.vine.co/r/videos_dashhd/C40B136F021365174982178762752_53f4484ad8e.25.1.ADDA1E67-CF16-4C3B-901A-DE068DE26134.mp4", "https://v.cdn.vine.co/r/videos_h264dash/9E0C561D561232222781018615808_3ae4ac8f321.4.2.559218590213998566.mp4", "https://v.cdn.vine.co/r/videos_h264dash/640E862C-1279-4B1B-89DD-1CC8BD0003A3-121-0000003319090DC5_1.0.6.mp4", "https://v.cdn.vine.co/r/videos_h264dash/00A2889BFD1101390404009553920_148f4f22224.3.2.mp4?versionId=7DBWwt94N5zgF2gU6wjrBD84KJ_Q5s4b" ]; // Как переключать? 
 video {width: 100%; height: 300px;} 
 <video src="https://v.cdn.vine.co/r/videos_dashhd/C40B136F021365174982178762752_53f4484ad8e.25.1.ADDA1E67-CF16-4C3B-901A-DE068DE26134.mp4" controls="">

    1 answer 1

    To switch there is a function onended , which is called after the video is completed.

    I improved your video list a bit and wrote a little script. You will need to modify it in the course:

     var videos = { 'videos_list_0': [ "https://v.cdn.vine.co/r/videos_dashhd/C40B136F021365174982178762752_53f4484ad8e.25.1.ADDA1E67-CF16-4C3B-901A-DE068DE26134.mp4", "https://v.cdn.vine.co/r/videos_h264dash/9E0C561D561232222781018615808_3ae4ac8f321.4.2.559218590213998566.mp4", "https://v.cdn.vine.co/r/videos_h264dash/00A2889BFD1101390404009553920_148f4f22224.3.2.mp4?versionId=7DBWwt94N5zgF2gU6wjrBD84KJ_Q5s4b" ] }; (function() { var video = document.querySelectorAll('video[data-videolist]'); for(var i = 0; i < video.length; i++){ var n = video[i].hasAttribute('data-video') ? Number(video[i].getAttribute('data-video')) : 0, r = video[i].getAttribute('data-reiteration') == 'true' ? true : false, ap = video[i].getAttribute('data-autoplay') == 'true' ? true : false, vl = video[i].hasAttribute('data-videolist') ? video[i].getAttribute('data-videolist') : null; if(videos[vl]){ video[i].src = videos[vl][n]; if(ap){ video[i].play(); }; video[i].video = n; video[i].onended = function() { if(this.video == videos[vl].length - 1){ if(r){ this.video = 0; this.src = videos[vl][0]; this.play(); }; }else{ this.video = this.video + 1; this.src = videos[vl][this.video]; this.play(); }; }; }else{ console.error('Undefined video list!'); }; }; }()); 
     video {width: 100%; height: 300px;} 
     <video data-videolist="videos_list_0" data-video="0" data-reiteration="true" data-autoplay="true" controls="">

    PS Your third video was broken and for this reason I deleted it :)