video设置视频的播放位置（本例中实现效果是视频第一次播放完成后，接下来中从视频的中间部位开始循环播放） 

<!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

注：设置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需要设置一个两个视频衔接处比较接近的图片，禁止黑屏

第二个例子也可以用来实现多个视频连续播放

posted @ 2017-06-29 14:58  dongxiaolei  阅读(7450)  评论(0)  编辑  收藏  举报