<!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. 3D世界变换

    一直弄不清3D场景中scaleOrientation的作用,还有scale.orientation(roation).translation的顺序问题,以往都是试图查一下,关于前者网上几乎找不到什么清 ...

  2. oracle 11g 卸载 安装10g 成功（卸载oracle+清除注册表信息+清除oracle app文件）

    停用oracle服务:进入计算机管理,在服务中,找到oracle开头的所有服务,右击选择停止 2 在开始菜单中,找到Universal Installer,运行Oracle Universal Ins ...

  3. webpack配置反向代理

    devServer: { contentBase: path.resolve(__dirname, "../dev"), compress: true, port: ,//本身的端 ...

  4. PHP培训教程 PHP里10个鲜为人知但却非常有用的函数

    php里有非常丰富的内置函数,很多我们都用过,但仍有很多的函数我们大部分人都不熟悉,可它们却十分的有用.这篇文章里,兄弟连小编列举了一些鲜为人知但会让你眼睛一亮的PHP函数. levenshtein( ...

  5. vim插件cscope使用方法

    一.安装cscope 安装方式比较多样,可以在各自linux软件管理工具中安装,也可以去官网下载安装. sudo apt-get install cscope 二.插件安装 这里选择的是Vundle来 ...

  6. R which

    setwd("E:/courses/molecular biology/homework1st") genes <- read.table('genes.txt',sep = ...

  7. Java数据结构之排序---冒泡排序

    冒泡排序的基本思想: 通过对待排序序列从前到后(从下标小的元素开始),依次比较相邻位置的元素的值,若发现与给定的次序冲突,则交换位置(假设数值大的数放在序列的后面),使数值较大的元素逐渐从前移动到后部 ...

  8. C++用参数返回结果与用返回值返回结果的思考

    /*** *xvkBuffer作为参数比写为返回值的好处是: *1,xvkBuffer可以是堆变量或栈变量,若写为返回值则只能是堆上申请,因为必须保证它的永久性 *2,xvkBuffer或作为栈变量返 ...

  9. mysql5.7多实例安装

    [root@vhost1]# cd /opt/source[root@vhost1]#ls mysql-5.7.21-linux-glibc2.12-x86_64.tar.gz[root@vhost1 ...

  10. CentOS7 日常操作

    A 安装netstat1.首先配置好本机的yum源: yum repolist all2.利用netstat命令,却提示:-bash: netstat: command not found3.执行yu ...