【实用】JavaScript中Video使用详解过程(多视频列表循环播放)
程序员文章站
2022-04-07 14:54:10
...
做过一个项目里有用到插入多个视频类似列表循环播放的,视频信息是从后台数据库传入的
核心JS代码片段
<script type="text/javascript">
var videoArray=new Array();
var relative = '${liveSetting.attachUrl}'
var posterUrl = '../../'+relative;
var liveUrl = '${liveSetting.liveUrl}';
var isLive = '${liveSetting.isLive}';
//从后台传入多条视频信息存入到数组中
<c:forEach items="${mergeMovies}" var="info">
videoArray.push("${info.postUrl}");
</c:forEach>
var option={
controls: true,
//autoplay: true,
preload: 'auto',
poster:posterUrl,
loop: false //注意:此地方一定要设置为false,不然会循环播放同一个视频
}
var myPlayer = videojs('example_video_1',option,function () {
var curr = 0;
if(isLive == 0){//直播时间段
this.src({type:'video/mp4',src:liveUrl});
}else{//非直播时间段
videoPlayer()
this.on("ended",function() {//监听当前视频是否播放完毕
videoPlayer()
// this.src("<%=path%>/"+videoArray[curr]);
// this.load();
// this.play();
// curr++;
// if(curr >= videoArray.length){
// curr = 0; //重新循环播放
// }
});
}
function videoPlayer(){
var curr = 0;
var video = document.getElementById("example_video_1_html5_api");
video.src="<%=path%>/"+videoArray[curr];
video.load();
video.play();
curr++;
if(curr >= videoArray.length){
curr = 0; //重新循环播放
}
}
});
更多video使用方法请参考video.js API文档