video标签实现多个视频循环播放
<head> <!-- If you'd like to support IE8 (for Video.js versions prior to v7) --> </head> <body> <video id="myvideo" width="100%" height="auto" controls="controls" muted> <!-- 加muted 是为了可以实现自动播放 -->
你的浏览器不支持HTML5播放此视频
<span style="white-space:pre"> </span><!-- 支持播放的文件格式 -->
<source src="" type='video/mp4' />
</video>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js" ></script>
<script> var video = document.getElementById("myvideo");
var vList = ['/u/www/201610/101338015yhf.mp4', '/u/www/202001/1513372485r9.mp4']; // 初始化播放列表,这里的url要用相对路径
var vLen = vList.length;
var curr = 0;
$(document).ready(function(){ play(); video.addEventListener('ended', function(){
play();
}); }); function play() {
video.src = vList[curr];
video.load();
video.play();
curr++;
if(curr >= vLen){
curr = 0; //重新循环播放
} }
</script>
</body>
video标签实现多个视频循环播放的更多相关文章
- H5 多个视频 循环播放效果
跟轮播效果差不多 页面HTML结构 <video id="myvideo" width="100%" height="auto" co ...
- 深入理解MVC C#+HtmlAgilityPack+Dapper走一波爬虫 StackExchange.Redis 二次封装 C# WPF 用MediaElement控件实现视频循环播放 net 异步与同步
深入理解MVC MVC无人不知,可很多程序员对MVC的概念的理解似乎有误,换言之他们一直在错用MVC,尽管即使如此软件也能被写出来,然而软件内部代码的组织方式却是不科学的,这会影响到软件的可维护性 ...
- 在wpf中如何让MediaElement的视频循环播放
原文:在wpf中如何让MediaElement的视频循环播放 MediaElement原始的播放是只播放一遍:如何设置让MediaElement播放 的视频或者音频循环播放,解决如下: 修改Media ...
- 解决h5的video标签,android、ipad客户端播放正常,iphone客户端无法播放
在做html5时插入一个视频播放标签video后,测试时android.ipad客户端播放正常,唯独iphone自带浏览器无法播放. 解决办法: 判断用户所使用客户端访问h5页面时是iphone时,点 ...
- iOS - 视频循环播放
录制完视频后,我们想在录制视频的预览层上无限循环播放我们的小视频,是不是很炫酷,这时候我们就有三中选择了:1.MPMoviePlayerController2.AVPlayer3.AVAssetRea ...
- C# WPF 用MediaElement控件实现视频循环播放
在WPF里用MediaElement控件,实现一个循环播放单一视频的程序,同时可以控制视频的播放.暂停.停止. 一种方式,使用MediaElement.MediaEnded事件,在视频播放结束后,自动 ...
- HTML5实现两个视频循环播放!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- html5 css3 背景视频循环播放代码
<div style ="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; ...
- 解决html5中video标签无法播放mp4问题的办法
这篇文章主要给大家介绍了关于解决html5中video标签无法播放mp4问题的办法,文中介绍的非常详细,相信会对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面来一起看看吧. 最近发现了一个 ...
随机推荐
- 【2020五校联考NOIP #3】序列
题面传送门 原题题号:Codeforces Gym 101821B 题意: 给出一个排列 \(p\),要你找出一个最长上升子序列(LIS)和一个最长下降子序列(LDS),满足它们没有公共元素.或告知无 ...
- Perl 语言入门6-9
---- 第6章 哈希----------- 简介 键值对.键和值都是任意标量,但键总是会被转换成字符串. 键唯一,值可重复. 应用场景:一组数据对应到另一组数据时. 如找出重复/唯一/交叉引用/查表 ...
- R语言与医学统计图形【6】低级绘图函数
R语言基础绘图系统 基础绘图包之低级绘图函数--定义坐标轴.图例.文本 低级绘图函数:本身不具备图形绘制能力,只是在已有图形基础上添加元素. 函数 功能 arrows 添加箭头 axis 坐标轴 bo ...
- PHP生成EXCEL,支持多个SHEET
PHP生成EXCEL,支持多个SHEET 此版本为本人演绎版本,原版本地址http://code.google.com/p/php-excel/ php-excel.class.php: <?p ...
- 非标准的xml解析器的C++实现:三、解析器的初步实现
如同我之前的一篇文章说的那样,我没有支持DTD与命名空间, 当前实现出来的解析器,只能与xmlhttp对比,因为chrome浏览器解析大文档有bug,至于其他人实现的,我就不一一测试了,既然都决定自己 ...
- Matlab | 绘制动态曲线(使用 animatedline 对象)
效果如下: 示例代码: figure('Color','w'); h1 = animatedline; h1.Color = 'r'; h1.LineWidth = 1.0; h1.LineStyle ...
- C++字节对齐(对象大小)
内部数据成员对齐参考这篇 https://www.cnblogs.com/area-h-p/p/10316128.html 这里只强调C++字节对齐特点 ①静态数据成员属于类域,在对象中不占大小 ②若 ...
- Gradle插件详解
参考[1]Gradle 插件 [2]修改 Gradle 插件(Plugins)的下载地址(repositories)
- C++ 素数对猜想
我的解法是先将2到n的所有素数全部列出来,再计算.将全部的素数列出来用了一个叫"埃拉托色尼筛法"的方法. 算法参照这里:https://www.sohu.com/a/2526745 ...
- 数据库SQL性能优化
1.in与exists的效率比较 in是把外表和内表作hash 连接,而exists 是对外表作loop 循环,每次loop 循环再对内表进行查询.一直以来认为exists 比in 效率高的说法是不准 ...