popcorn-js視頻Video框架簡單用法
阿新 • • 發佈:2017-07-24
次數 update auto 框架 document web function lis 監聽
<div> <video class="video" id="ourvideobig" preload="auto" controls="controls"> <source src="/File/video/1.mp4" /> </video> </div>
<script> //視頻列表 便於多個視頻切換 var videos = ["/File/video/1.mp4", "/File/video/2.mp4", "/File/video/3.mp4", "/File/video/4.mp4", "/File/video/5.mp4"]; var activityTab = 0; //視頻切換值 var pop = null; var $video = null; var init = function () { pop = Popcorn("#ourvideobig"); $video = document.getElementById("ourvideobig"); loadedReady(); //視頻加載完畢執行事件 } $(function () { init();//初始化 }) var wait = 0; //視頻加載完畢執行事件 function loadedReady() { var rdy = pop.readyState();//獲取視頻狀態 if (rdy == 4)//加載完畢 { $("#msg").html("視頻總時間:" + pop.duration()); //console.log("視頻總時間:" + pop.duration()); timeupdate();//動態監聽播放時間 } else { console.log("視頻狀態:" + rdy + ",次數=" + wait); //循環 if (wait <= 10) { // console.log("wait:" + wait); setTimeout(loadedReady, 200); wait++; } } } //綁定動態監聽播放時間 function timeupdate() { $video.addEventListener("timeupdate", function (e) { $("#txt_msg").val("當前播放時間:" + $video.currentTime); //可以用於自動切換功能 }); } //綁定拖動視頻時間 function seeked() { $video.addEventListener("seeked", function (e) { console.log("當前視頻拖動時間:" + $video.currentTime); }); } //重置視頻 即把視頻當前時間設置為0 function reset() { pop.currentTime(0); } //停止視頻 function destroy() { pop.currentTime(0); pop.pause();//暫停 } //全屏 function fullscreen() { $video.webkitRequestFullScreen(); } </script>
popcorn-js視頻Video框架簡單用法