学做网站培训课程介绍

当前位置:

HTML5 实现VIDEO 自动连续播放多个视频

如果我们想做一个视频网站,并且需要自动连续播放视频的话,可以使用jQuery代码来控制实现连续播放多个视频。通过new个video,指定播放列表的第一个视频路径为src。监听end事件,回调里面把video的src改成列表的下一个,再play播放。

代码示例:


var vList = ['视频地址url1', 'url2', '...']; // 初始化播放列表
var vLen = vList.length; // 播放列表的长度
var curr = 0; // 当前播放的视频
var video = new Video();
video.addEventListener('end', play);
play();
function play(e) {
video.src = vList[curr];
video.load(); // 如果短的话,可以加载完成之后再播放,监听 canplaythrough 事件即可
video.play();
curr++;
if (curr >= vLen) curr = 0; // 播放完了,重新播放
}

这样就可以实现html5 播放多个视频。一个接一个的自动播放了。

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注

相关教程

  • 在前端制作过程中,会使用FORM表单来提交数据,FORM表单中有一个checkbox复选框,可以同时选择多个信息来传递。那么如何使用PHP来接收从FORM表单发送
  • 宝塔创建的网站,默认情况下让你填写的是域名,没有注明是ip,但在没有备案的情况下,无法使用域名来访问,我们可以直接使用ip地址来访问,来看看如何
  • 什么是CSS3 盒布局在网页布局中,如果让让几个块状区域横向排列,常用的方法就是使用float:left。但使用float属性时,会出现一些问题,例如浮动,并
  • 对于一些网络小白想建立一个网站,最方便的方法就是通过开源CMS程序来建网站。省去了复杂的编程过程,准备一些建网站所需要的条件后就可以自己建立一
  • 我们注意到,很多的网站都有WEB分享按钮,可以一键分享到很多的网站平台,如:分享到微博、微信、人人网等等。以前我们做这种WEB分享按钮使用的是百
  • 现在常用的邮箱有163邮箱、QQ邮箱。它们的特点就是邮箱后缀是各自网站的域名。如admin@163.com,admin@qq.com。下面学做网站论坛给大家介绍一下如何将
  • 我们知道,网站CDN加速可以有效的提升网站打开速度,降低网站服务器的负担。但是如果你网站同步了百度小程序,使用CDN加速就会出现一些意想不到的问题
  • 现在很多企业网站都安装了百度商桥,由于现在百度商桥只限百度推广用户使用,否则就需要收费了。那么我们也可自己制作一下类似百度商桥的网站在线留言
  • 公司建网站现在特别普遍了,很多公司都有自己的网站。至于公司建网站多少钱,企业网站制作价格要根据具体企业网站的要求不同而不同。下面学做网站论坛
  • 默认情况下,VIDEO视频标签播放视频时,它的速度是普通的速度播放。没有快速和慢速播放功能的。那么如何自己给VIDEO视频标签添加倍速播放功能呢?下面