当前位置:首页>开发>正文

HTML5VIDEO标签如何实现多个视频连续播放 html5中的audio和video标签怎么用

2024-01-02 04:54:26 互联网 未知 开发

 HTML5VIDEO标签如何实现多个视频连续播放 html5中的audio和video标签怎么用

HTML5VIDEO标签如何实现多个视频连续播放?

新建个个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 播放多个视频连续播放

html5中的audio和video标签怎么用





就当正常标签用就行了,,,

它还有其它属性,比如autoplay自动播放,loop循环等,,

更高级的操作处理,,百度一下相关做法,,,

jQuery如何操作video标签里面的autoplay属性

这样肯定不行的,jQuery只是操作了DOM的属性,虽然为标签成功加上了autoplay属性,但视频框架早已经加载完成了,后加上的autoplay属性对其没有作用。应使用HTML5 Video自带的API来控制视频播放,下面的例子实现了鼠标悬停到视频上方自动播放,鼠标移出后自动暂停的效果:
$(function(){
var video = $(video.wp-video-shortcode)
video.hover(function(){
video[0].play() // play() 和 pause() 是HTML5中video自带的API函数,哈哈,方便吧?
},function(){
video[0].pause()
})
})

最新文章