<!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. Python---进阶---函数式编程---lambda

    一. 利用map()函数,把用户输入的不规范的英文,变成首字母大写,其他小写的规范的名字:比如说["ADMAm", "LISA", "JACK&quo ...

  2. PHP培训教程 PHP的运算符

    PHP中有丰富的运算符集,它们中大部分直接来自于C语言.按照不同功能区分,兄弟连PHP培训 运算符可以分为:算术运算符.字符串运算符.赋值运算符.位运算符.条件运算符,以及逻辑运算符等.当各种运算符在 ...

  3. computed属性和watcher

    computed属性 在模板中使用表达式是非常方便直接的,然而这只适用于简单的操作.在模板中放入太多的逻辑,会使模板过度膨胀和难以维护.例如: <div id="example&quo ...

  4. 多重背包的二进制优化——DP

    #include<cstdio> #include<cstring> #include<algorithm> #define LL long long using ...

  5. 封装通用的 ajax， 基于 jQuery。

    在前端异步获取数据时候每次都是使用 ajax:为了通用性更好,然而封装通用的 ajax 是一个一劳永逸的办法. 本次基于 jQuery 封装实现: 第一步: 引入 jQuery: <script ...

  6. Web引用中文个性字体

    最近在前端开发时,因为设计的原因,要引用一些特殊字体(otf格式),但是后来发现这些字体文件非常大,平均每个要8mb左右,严重影响了网页效率.经过一番搜索,发现了前端字体压缩工具(只支持utf-8格式 ...

  7. ThreadLocal在Spring事务管理中的应用

    ThreadLocal是用来处理多线程并发问题的一种解决方案.ThreadLocal是的作用是提供线程的局部变量,在多线程并发环境下,提供了与其他线程隔离的局部变量.通常这样的设计的情况是因为这个局部 ...

  8. 北风设计模式课程---依赖倒置原则（Dependency Inversion Principle）

    北风设计模式课程---依赖倒置原则(Dependency Inversion Principle) 一.总结 一句话总结: 面向对象技术的根基:依赖倒置原则(Dependency Inversion ...

  9. 嵌入式Linux之gdb配置和使用

    背景: ARM Cortext-A53核+Linux 4.1.12,内核空间64位,用户态32位,gdb版本7.10.1 GDB编译: 1)手动下载gdb-7.10.1.tar.gz源码编译 ./co ...

  10. r hive

    w r只能处理有限量的数据 pdf 467