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

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

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

连续播放两个视频是什么意思?

如果是同时播放两个,写两个 <video></video>标签就行了,一个标签放一个视频;

如果是播放完一个视频后接着再播放下一个视频这样连续播放,用脚本监听 <video>标签的视频播放结束 事件,再接着播放下一个视频就行;

1

<video id="video" src="test1.mp4"></video>

<script>

var video = document.getElementById('video')

video.addEventListener('ended',function(){

// 第一个视频播放结束

// 如果要继续播放第二个视频,改变 <video>标签的 (src="test2.mp4") 属性或者新建一个 video 标签播放视频都可以

},false)

</script>

<audio controls="controls" loop="loop">

 <source src="song.ogg" type="audio/ogg" />

 <source src="song.mp3" type="audio/mpeg" />

Your browser does not support the audio element.

</audio>

loop 属性规定当音频结束后将重新开始播放。如果设置该属性,则音频将循环播放。

语法:<audio loop="loop" />


欢迎分享,转载请注明来源:内存溢出

原文地址: http://outofmemory.cn/zaji/7262210.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-03
下一篇 2023-04-03

发表评论

登录后才能评论

评论列表(0条)

保存