Popcorn-js Video Frame Simple usage

<div>             <video class= "video" id= "Ourvideobig" preload= "Auto" controls= "Controls" >                <source src= "/file/video/1.mp4"/>            </video>        </div>

　　

<script>//Video list facilitates multiple video switching 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;        Video Toggle value var pop = null;        var $video = null;            var init = function () {pop = popcorn ("#ourvideobig");            $video = document.getElementById ("Ourvideobig"); Loadedready ();        Video load complete Execution event} $ (function () {init ();//Initialize}) var wait = 0;             Video load complete execution event function Loadedready () {var rdy = pop.readystate ();//Get Video status if (Rdy = = 4)//load complete                {$ ("#msg"). HTML ("Total video time:" + pop.duration ());                Console.log ("Total video time:" + pop.duration ());                Timeupdate ();//dynamic listener playback time} else {Console.log ("video Status:" + Rdy + ", times =" + wait); Loop if (wait <=) {//Console.log ("Wait:" + WaiT);                    SetTimeout (Loadedready, 200);                wait++; }}}//Bind dynamic Listen play time function timeupdate () {$video. AddEventListener ("Timeupdate"                , function (e) {$ ("#txt_msg"). Val ("Current Play Time:" + $video. currenttime);        Can be used for automatic switching function});                }//Bind drag video Time function seeked () {$video. AddEventListener ("seeked", function (e) {            Console.log ("Current video Drag Time:" + $video. currenttime);        });        }//Reset the video to set the video current time to 0 function reset () {pop.currenttime (0);}            Stop video function Destroy () {pop.currenttime (0); Pop.pause ();//pause}//full-screen function fullscreen () {$video. Webkitrequestfullscreen ();} </script>

　　

Popcorn-js Video Frame Simple usage