十年网站开发经验 + 多家企业客户 + 靠谱的建站团队
量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决
目前,html5audio标签只能同时播放一个音频文件,如何要添加多个MP3音频文件,然后按顺序一个接着一个连续播放,需要用JS代码来实现。这是实现的教程。希望对你有用。
成都创新互联公司服务项目包括庆城网站建设、庆城网站制作、庆城网页制作以及庆城网络营销策划等。多年来,我们专注于互联网行业,利用自身积累的技术优势、行业经验、深度合作伙伴关系等,向广大中小型企业、政府机构等提供互联网行业的解决方案,庆城网站推广取得了明显的社会效益与经济效益。目前,我们服务的客户以成都为中心已经辐射到庆城省份的部分城市,未来相信会继续扩大服务区域并继续获得客户的支持与信任!
连续播放两个视频是什么意思?
如果是同时播放两个,写两个 video/video标签就行了,一个标签放一个视频;
如果是播放完一个视频后接着再播放下一个视频这样连续播放,用脚本监听 video 标签的视频播放结束 事件,再接着播放下一个视频就行;
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" /
给每一段视频一个不显示的video标签,其preload属性设置为metadata。这样的话不会加载整个视频但是能获得每个视频的长度。
这样的话通过监听那几个标签的durationchange事件,就知道总时间了。
然后无非就是做一个可以拖动的滚动条;拖动到某个部位之后,算一下处于那段视频中间;把那段视频对应的video显示出来,并把currentTime设置到相应的时间,然后play()。
播放时通过监听timeupdate事件来更新进度条的位置。通过监听ended事件来获知一段视频已经播放结束,应该加载下一段。
新建个个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 播放多个视频连续播放