popcorn-js視頻Video架構簡單用法

標籤：功能   listen   重設   get   list   upd   eset   request   rip   

 <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架構簡單用法