关于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 ...
随机推荐
- 【NOIP2013模拟联考6】选课
题目 你真的认为选课是那么容易的事吗?HYSBZ的ZY同志告诉你,原来选课也会让人产生一种想要回到火星的感觉.假设你的一周有n天,那么ZY编写的选课系统就会给你n堂课.但是该系统不允许在星期i和星期i ...
- vue 常见错的可能原因
标签或者组件名写错 Unknown custom element: <h> - did you register the component correctly? For recursiv ...
- zrender笔记----（数字Number组件）出现的问题和解决办法
1.期望的效果是这样子的(这也是最终结果): 2.开始是用json假数据,开始没考虑null的问题,导致在判断传值处,判断有误. 导致在对接接口时,凌乱了,后来修改了下变成后面图C的逻辑,json数据 ...
- 弹性盒子FlexBox简介（一）
一.理解弹性盒子 弹性盒子是CSS3的一种新的布局模式. CSS3弹性盒子(Flexible Box或flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时,确保元素拥有恰当的行为的布局方 ...
- Bugku web web2
web2 打开后发现是个大滑稽啊!F12检查元素拿到flag
- Bugku 杂项 又一张图片，还单纯吗
又一张图片,还单纯吗 下载后,用binwalk打开图片 使用foremost 2.png进行分离 得到图片 关于foremost foremost [-v|-V|-h|-T|-Q|-q|-a|-w-d ...
- luogu 5471 [NOI2019]弹跳 KDtree + Dijkstra
题目链接 第一眼就是 $KDtree$ 优化建图然而,空间只有 $128mb$,开不下 时间不吃紧,考虑直接跑 $Dijkstra$ $Dijkstra$ 中存储的是起点到每个输入时给出的矩阵的最 ...
- Python_019(六星级别之反射方法)
1.反射 1)神赐给你的内置函数 : a: getattr(命名空间,'函数名') == 命名空间.属性名; 这里的命名空间指的是对象或者类; b: getattr四个应用场景: 1)类名.名字 &l ...
- 特征点检测算法——FAST角点
上面的算法如SIFT.SURF提取到的特征也是非常优秀(有较强的不变性),但是时间消耗依然很大,而在一个系统中,特征提取仅仅是一部分,还要进行诸如配准.提纯.融合等后续算法.这使得实时性不好,降系了统 ...
- Xcode Server持续集成
这是一篇2017-11-12 年我还在 ezbuy 的一篇文章,时间过去很早了,最近在整理笔记的时候发现了, 同步过来,文章内容现在是否有效不确定,应该大差不差,读者仅做参考 最后更新 2017-11 ...