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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏知晓程序

开发 | 简单易上手,资讯类小程序开发实战指南

今天,知晓程序(微信号 zxcx0101)将通过一个简单的电影资讯小程序,来看看在知晓云内容库功能的帮助下,如何将内容资讯类小程序的开发效率提高 60%。

951
来自专栏Youngxj

微信透明头像

2085
来自专栏ytkah

如何将页面设置为微信端才能打开

  我们有时候开发一个新项目比较辛苦,不想让别人轻易就能反编译代码,我们可以加一个授权登录,如果不是在微信端登录就会提示“请在微信客户端打开链接”,如下图所示,...

2524
来自专栏ytkah

wordpress去掉category怎么操作让url更简洁友好

  用wordpress建站是比较流行的,全球将近25%的站点是用wordpress搭建的。有很多的模板、插件可以选择,当然最好还是能自己优化。URL固定链接就...

2547
来自专栏十月梦想

bootstrap按钮

bootstrap提供了其中按钮样式:默认(.btn-default),主要(.btn-primary),成功(.btn-success),警告(.btn-wa...

836
来自专栏腾讯社交用户体验设计

vuejs初体验-Chrome插件开发实录

1292
来自专栏ytkah

如何将finecms链接URL中的list和show去掉

  finecms上手还算比较快吧,对seo关注的朋友会想着将它的url改造了,里面多了-list-和-show-,可以直接去掉,下面就随着ytkah一起来进行...

2676
来自专栏十月梦想

js鼠标事件

PS:鼠标移动(onmousemove)和鼠标移入(onmouseover)区别:移动事件指鼠标只要移动就产生事件,移入事件需要移入到指定的对象内才执行事件

624
来自专栏行者常至

Struts的工作原理

882
来自专栏九彩拼盘的叨叨叨

如何调试CSS动画

我们在做某个复杂的动画,或者多个元素同时做动画时,我们需要查看动画在某些时间点的元素的状态。此时动画应该是暂停的,这样方便我们进行查看。

483

扫码关注云+社区