<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <video id="mediaElementID" width="100%" height="100%" autoplay="autoplay" controls="controls" > <source src="http://www.runoob.com/try/demo_source/mov_bbb.mp4" type="video/mp4"> </video> </body> <script> var myVid=document.getElementById("mediaElementID"); function getCurTime() { alert(myVid.currentTime); } function setCurTime() { myVid.currentTime=8; } myVid.addEventListener('ended',function(){ setCurTime(); myVid.play() },false); </script> </html>
注：设置currentTime的方式，video的视频的src地址必须是线上的，本地的地址不会起作用
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> *{ margin: 0; padding: 0; } #playervideo{ width:500px; height:300px; margin:20px auto; background:red; } #playervideo video{ } </style> </head> <body> <div id="playervideo" class="portfolio-slideshow flexslider animate-onscroll"> <video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" poster="video/demo.jpg" data-setup="{}" height="300" width="100%"> <source src="artanis-large.mp4" type='video/mp4' /> </video> </div> </body> <script language="javascript"> var vList = ['movie.mp4', 'artanis-large.mp4', 'movie.mp4']; // 初始化播放列表 var vLen = vList.length; // 播放列表的长度 var curr = 0; // 当前播放的视频 var video = document.getElementById("example_video_1"); /*var video = document.createElement("VIDEO"); video.setAttribute("width", "100%"); video.setAttribute("height", "500"); video.setAttribute("id", "example_video_1"); video.setAttribute("class", "video-js vjs-default-skin"); video.setAttribute("preload", "none"); video.setAttribute("poster", "video//demo.jpg"); video.setAttribute("data-setup", "{}"); video.setAttribute("controls", "yes"); document.getElementById("playervideo").appendChild(video);*/ //document.body.appendChild(video); video.addEventListener('ended', play); play(); function play(e) { video.src = vList[curr]; video.load(); video.play(); curr++; if(curr >= vLen){ curr = 0; // 播放完了，重新播放 } } </script> <!-- /Video player --> </html>
注：通过两个视频连续播放，poster需要设置一个两个视频衔接处比较接近的图片，禁止黑屏
第二个例子也可以用来实现多个视频连续播放