首页 > 代码库 > popcorn-js视频Video框架简单用法

popcorn-js视频Video框架简单用法

 <div>             <video class="video" id="ourvideobig" preload="auto" controls="controls">                <source src="http://www.mamicode.com/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框架简单用法