关于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 ...
随机推荐
- java 生成透明背景图片
//开始绘图 graphics2d.setBackground(Color.WHITE); graphics2d.clearRect(0, 0, width, height); graphics2d. ...
- CSS-动画，让图片上的图形有涨起来的效果（逐渐变高）和（逐渐变长）
效果图: html: <div class="inner3"> <div class="over"> <img src=" ...
- PHP上传一个文件夹
该项目核心就是文件分块上传.前后端要高度配合,需要双方约定好一些数据,才能完成大文件分块,我们在项目中要重点解决的以下问题. * 如何分片: * 如何合成一个文件: * 中断了从哪个分片开始. 如何分 ...
- Java——容器（Comparable）
[Comparable]
- HDU 2037（贪心）
“今年暑假不AC?” “是的.” “那你干什么呢?” “看世界杯呀,笨蛋!” “@#$%^&*%...” 确实如此,世界杯来了,球迷的节日也来了,估计很多ACMer也会抛开电脑,奔向电视了. ...
- 判断内网机器的真实外网IP或域名的方法总结
在内渗透中有时需要在某台WEB服务器中留下后门,可以通过内网IP建立IPC连接,但还需要获知外网IP才能访问Wbshell,在无网关权限的情况下,我总结了有如下方法: nslookup myip.op ...
- python-之基本语法
模块一些函数和类的集合文件,并实现一定的功能,当我们需要使用这些功能的时候,可以直接把相应的模块导入到我们的程序中 import import mode #导入mode模块 即导入mode模块后 ...
- 树莓派安装配置teamviewer host
过程: 下载teamviewer,直接到teamviewer的官网上直接下载 下载完后,安装teamviewerw sudo dpkg -i 下载的文件的路径+文件名 安装完后会提示存在依赖问题,修复 ...
- 圆角Panel
using System; using System.Collections.Generic; using System.ComponentModel; using System.Diagnostic ...
- 010-elasticsearch5.4.3【四】-聚合操作【一】-度量聚合【metrics】-min、max、sum、avg、count
一.概述 度量类型聚合主要针对的number类型的数据,需要ES做比较多的计算工作 参考向导:地址 import org.elasticsearch.search.aggregations.Aggre ...