关于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 ...
随机推荐
- hihocode 1584 : Bounce （找规律）（2017 北京网络赛G）
题目链接 比赛时随便找了个规律,然后队友过了.不过那个规律具体细节还挺烦的.刚刚偶然看到Q巨在群里提到的他的一个思路,妙啊,很好理解,而且公式写起来也容易.OrzQ巨 #include<bits ...
- 对Moment.js的研究
创建npm install moment --save-dev 日期格式化 moment().format('MMMM Do YYYY, h:mm:ss a'); // 六月 4日 2019, 6:2 ...
- java面向对象复习之一
目的: 复习如何实现代码的逻辑思路: 复习类的封装: 复习类和对象的创建使用和封装: 练习: 实现功能:人到超市买东西 抽出三个类: 人 超市 东西: 功能点: 买: 它们之间的联系:东西包含于超市 ...
- js解决手机键盘影响定位的问题
// 滑动其他地方隐藏软键盘document.body.addEventListener('touchend', function(evt) { document.activeElement.blur ...
- 版本基线自动化之Linux
上一篇笔者叙述了如何在windows平台上进行自动化打包,这次采用linux平台 1.start.bat : 调用cleanall.bat脚本 ,从svn服务器中检出代码,并采用7-Zip工具进行压缩 ...
- Amaze ui tree 刷新数据
最近在做代码生成器,界面用的是Amaze ui ,但是在用tree的时候发现数据绑定不会自动更新,去百度.谷歌查也没有查到,没办法只能自己做一个demo 在这贴上效果图 demo 下载地址https: ...
- 二十四、python中sys模块
'''1.sys.argv:命令行参数List,第一个元素是程序本身路径''' import sys print (sys.argv)-------------------------------[' ...
- RFC、EMCA-262、TC-39等名词
请求意见稿(英语:Request For Comments,缩写:RFC)是一系列备忘录. The RFC series contains technical and organizational d ...
- 阶段1 语言基础+高级_1-3-Java语言高级_04-集合_07 Collections工具类_3_Collections集合工具类的方法
第二个参数传递了一个匿名内部类.结果就出现了下面的代码 源码里面有Compare方法,对比两个参数 要重写比较的方法 对对象进行排序 创建学生类.对学生类进行排序 重写Person的ToString方 ...
- WinForm 皮肤，自定义控件WinForm.UI
WinForm.UI https://github.com/YuanJianTing/WinForm.UI WinForm 皮肤,自定义控件 使用方式: BaseForm: public partia ...