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

 <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>