<!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的连续播放的更多相关文章

  1. html5 video 监听播放结束. 最好获取html标签而不是id。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  2. html5 video获取实时播放进度的方法

    getvideoprogress(); function getvideoprogress() { setTimeout(function () { var vid = document.getEle ...

  3. Html5 Video 实现方案

    来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...

  4. DCloud-Video：Html5 Video 实现方案

    ylbtech-DCloud-Video:Html5 Video 实现方案 1.返回顶部 1.1. http://ask.dcloud.net.cn/article/569 1.2. 一. Html5 ...

  5. HTML5 video 连续播放视频

    HTML Video标签属性 html页面代码 <video height="2160" id="playVideo" width="3840& ...

  6. HTML5 video标签播放视频下载原理

    HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...

  7. Html5 <video>实现摄像头监控问题：html5并不支持rtsp协议,所以使用vlc进行转码,将rtsp转http流,这样<video>才可以直接播放

    今天在写html5中播放旷视C2摄像头视频监控的功能,查了很多资料,才发现Html5 <video>并不支持rtsp协议.后来查到使用第三方转码才得以实现. 这里把方法写下来分享给大家. ...

  8. 解决html5中video标签无法播放mp4问题的办法

    这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...

  9. html5 video微信浏览器视频不能自动播放

    html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...

随机推荐

  1. 【03】Python 文件读写 JSON

    1 打开文件 文件操作步骤: 1.打开文件获取文件的句柄,句柄就理解为这个文件 2.通过文件句柄操作文件 3.关闭文件. 1.1 打开方法 f = open('xxx.txt') #需f.close( ...

  2. Math.min() Math.max() Math.min().apply() Math.max() .apply()该如何使用？？？

    Math.min()和 Math.max()  语法: Math.min(x,y) Math.max(x,y) 虽然能取到最小值和最大值,但是不支持数组. 那么如何计算数组中的大小值呢???????? ...

  3. CSS盒子模型（框模型）

     一.如何理解盒子模型  盒子模型(框模型)是css部分非常重要的一部分知识,CSS在处理网页的时候,认为每个元素都处在一个不可见的盒子中.盒子模型的构想,把所有的元素都想象成盒子,那么对网页进行布局 ...

  4. Linux内核设计与实现 总结笔记（第九章）内核同步介绍

    在使用共享内存的应用程序中,程序员必须特别留意保护共享资源,防止共享资源并发访问. 一.临界区和竞争条件 1.1 临界区和竞争条件 所谓临界区就是访问和操作共享数据代码段.多个执行线程并发访问同一个资 ...

  5. HDU 6616 Divide the Stones

    目录 题面 中文题意 比赛惨状 我的走不通的思路 \(m\)是偶数的情况 \(m\)是奇数的情况 题解的思路 另一些思路 源代码 题面 Time limit 3000 ms Memory limit ...

  6. 使用 Markdown 写博客

    后台设置(左侧边栏区找到-设置默认编辑器). 设置为 Markdown 后保存,即可在编辑新博客时生效.

  7. ASP.NET MVC 下拉的使用（ViewData传递）

    C#部分 public void GetViewData() { List<string> data = new List<string>(); data.Add(" ...

  8. zk的KeeperErrorCode = ConnectionLoss错误

    额,这东西都快把人搞崩溃了,各种排查各种正常. 最后竟然是因为我在客户端未连接上zkserver的时候就进行了create操作造成的错误. 噗, Exception in thread "m ...

  9. 对象数组(JSON) 根据某个共同字段 分组

    1.在前端页面用js处理 转载https://www.cnblogs.com/rysinal/p/5834446.html 为了第二种方法对比,特意把id 转化为pid var arr = [ {&q ...

  10. SSH 连接慢 等好久

    SSH连接慢,要等好久好久,有时出现输入密码提示符,输入密码回车立即就超时了. ssh -v xxx.xxx.xxx.xxx   看到是GSS的问题. 解决办法,在两边SSH上配置,UseDNS如果被 ...