【實用】JavaScript中Video使用詳解過程(多視訊列表迴圈播放)
阿新 • • 發佈:2019-02-20
做過一個專案裡有用到插入多個視訊類似列表迴圈播放的,視訊資訊是從後臺資料庫傳入的
核心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文件