zoukankan      html  css  js  c++  java
  • 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需要设置一个两个视频衔接处比较接近的图片,禁止黑屏

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

  • 相关阅读:
    程序员利用javascript代码开发捕鱼游戏
    Web前端培训学习心得
    给Web前端初学者的一些建议和学习路线
    web前端+javascript+h5电子书籍和实战分享
    JavaScript实现浏览器本地的图像移动、大小调整和裁剪
    纯JavaScript实现异步Ajax的基本原理
    2018年最重要的HTML5开发手册,传播正能量
    虎虎的小尾巴:在大宗商品研究这块如何看待“供需决定的是利润而不是价格”?2017-03-14
    虎虎的小尾巴:对国内商品交易的理解 2017-01-11
    虎虎的小尾巴:金融数学对做交易有用吗?
  • 原文地址:https://www.cnblogs.com/dongxiaolei/p/7094464.html
Copyright © 2011-2022 走看看