码迷,mamicode.com
首页 > Web开发 > 详细

关于html5 video的连续播放

时间:2017-02-20 13:22:34      阅读:213      评论:0      收藏:0      [点我收藏+]

标签:var   长度   file   set   read   ack   html   through   ready   

<!doctype html>
<html lang="en">
    <head>
    <meta charset="utf-8">
    <title>关于html5 video的连续播放</title>
</head>

<body>
<video id="video" autoplay="" controls="controls">您的浏览器不支持HTNL5的video标签</video> 
</body>
</html>
<script>
var video_list=[videos/demo.mp4,videos/demo2.mp4];//初始化播放列表
video_length=video_list.length;//播放列表的长度 var curr=0;//当前播放的视频
var video=document.getElementById(video);
video.addEventListener(
ended,play); play();
function play(){ video.src=video_list[curr];
video.load();
//若视频很短,加载完后再播放,监听canplaythrough事件即可
video.play();
curr
++;
if(curr>=video_length){
curr
=0;//播放完后,重新播放
    }
} </script>

 

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>连续播放</title>
    <style>
        video{
            margin: 0 auto;
            width: 500px;
            height: 500px;
        }
    </style>
</head>
<body>
        <video  id="myvideo" width="100%" height="auto" controls="controls" >
            你的浏览器不支持HTML5播放此视频 
            <source src="videos/demo.mp4" type=‘video/mp4‘ />
        </video>
</body>
</html>
<script src="http://files.cnblogs.com/files/heyiming/jquery-2.1.4.min.js"></script>
<script language="javascript">
    $(document).ready(function(){
        video.play();
    });
    var vList = [videos/demo2.mp4, videos/demo3.mp4,videos/demo.mp4]; // 初始化播放列表
    var vLen = vList.length;
    var curr = 0;
    var video = document.getElementById("myvideo");
    video.addEventListener(ended, function(){
        alert("已播放完成,继续下一个视频")
        play();
    });
    function play() {
        video.src = vList[curr];
        video.load();
        video.play();
        curr++;
        if(curr >= vLen){
            curr = 0; //重新循环播放
        }

    }
</script>

 

关于html5 video的连续播放

标签:var   长度   file   set   read   ack   html   through   ready   

原文地址:http://www.cnblogs.com/heyiming/p/6418913.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!