关于html5 video的连续播放
<!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的连续播放的更多相关文章
- html5 video 监听播放结束. 最好获取html标签而不是id。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- html5 video获取实时播放进度的方法
getvideoprogress(); function getvideoprogress() { setTimeout(function () { var vid = document.getEle ...
- Html5 Video 实现方案
来源:http://ask.dcloud.net.cn/article/569 源码下载 前言: 最近项目中需要用到html5 视频播放功能,于是稍微研究了解了下,遇到了很多坑,特此记录下. 一. H ...
- DCloud-Video：Html5 Video 实现方案
ylbtech-DCloud-Video:Html5 Video 实现方案 1.返回顶部 1.1. http://ask.dcloud.net.cn/article/569 1.2. 一. Html5 ...
- HTML5 video 连续播放视频
HTML Video标签属性 html页面代码 <video height="2160" id="playVideo" width="3840& ...
- HTML5 video标签播放视频下载原理
HTML5 video https://github.com/remy/html5demos/blob/master/demos/video.html <video preload=" ...
- Html5 <video>实现摄像头监控问题：html5并不支持rtsp协议,所以使用vlc进行转码,将rtsp转http流,这样<video>才可以直接播放
今天在写html5中播放旷视C2摄像头视频监控的功能,查了很多资料,才发现Html5 <video>并不支持rtsp协议.后来查到使用第三方转码才得以实现. 这里把方法写下来分享给大家. ...
- 解决html5中video标签无法播放mp4问题的办法
这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...
- html5 video微信浏览器视频不能自动播放
html5 video微信浏览器视频不能自动播放 一.微信浏览器(x5内核): 1.不能自动播放 2.全屏 3.最顶层(z层的最顶层) 二.ios系统解决方案:(无phone手机未测试) <au ...
随机推荐
- python数据探索与数据与清洗概述
数据探索的核心: 1.数据质量分析(跟数据清洗密切联系,缺失值.异常值等) 2.数据特征分析(分布.对比.周期性.相关性.常见统计量等) 数据清洗的步骤: 1.缺失值处理(通过describe与len ...
- HDU-4280-Island Transport(网络流,最大流, ISAP)
链接: https://vjudge.net/problem/HDU-4280 题意: In the vast waters far far away, there are many islands. ...
- python 布尔判断并做需要的返回值
- 面试题常考&必考之--js中的call()和apply()
apply: 接受两个参数,第一个参数是要绑定给this的值,第二个参数是一个参数数组.当第一个参数为null.undefined的时候,默认指向window. call: 第一个参数是要绑定给thi ...
- sql2008 误操作还原至指定时间点
--drop database db --创建一个测试库 create database db go --备份一个完整备份文件 backup database db to disk = 'd:\db. ...
- HDU 6620 Just an Old Puzzle
Time limit 2000 ms Memory limit 262144 kB OS Windows 解题过程 感觉搜索不可行,状态太多了,120步,判断状态是否重复时,即使用std::map也太 ...
- c++复习——类（2）
1.this指针 this指针是一个指向对象的指针. this指针是一个隐含于成员函数中的对象指针. this指针是一个指向正在调用成员函数的对象的指针. 类的静态成员函数没有this指针 ...
- JSP XML数据处理
JSP XML数据处理 当通过HTTP发送XML数据时,就有必要使用JSP来处理传入和流出的XML文档了,比如RSS文档.作为一个XML文档,它仅仅只是一堆文本而已,使用JSP创建XML文档并不比创建 ...
- C++ STL bitset总结
基础用法 C++ Reference 神犇博客 余下的就是例题了 [BZOJ3687]简单题 考虑\(DP\),设\(f[i][j]\)表示前\(i\)个元素的算数和为\(j\)的子集个数,有: \[ ...
- 年薪100万的人都是怎么玩Excel的？
年薪100万的人都是怎么玩Excel的? 2017-12-21 13:42美国 作者:珍妮Jenny 来源:一周进步(ID:weekweekup) 本文已获原作者转载授权,如需转载请联系原公号 本文重 ...