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 条评论
登录 后参与评论

相关文章

来自专栏跟着阿笨一起玩NET

C#轻量级高性能日志组件EasyLogger(六)

2382
来自专栏张善友的专栏

深入浅出事件流处理NEsper(一)

    对实时信息分析和处理,常常需要客户应用程序的开发相应功能。一般地,这些功能需要提供以下的处理流程,分析获取的数据,筛选数据,提取出有用的信息,然后将其通...

2169
来自专栏和氏璧

如何快速隐藏修改自己本地ip地址

现在一般人都不知道IP地址的重要性,但是有的电脑高手却可以通过IP地址去找到我们,下面小编将告诉大家如何去隐藏自己的IP地址。

1650
来自专栏Java帮帮-微信公众号-技术文章全总结

Java在游戏服务器开发中应用【面试+提高】

Java在游戏服务器开发中的应用 随着游戏市场的兴起,特别是网页游戏、手机游戏的崛起,对游戏开发技术的需求越来越多。网络游戏开发是一个庞大的体系,总体来说是客户...

54111
来自专栏华仔的技术笔记

生产环境小程序登录出现502

用的是腾讯wafer的解决方案: 生产环境部署说明 https://cloud.tencent.com/document/product/619/11689

1121
来自专栏架构师之路

lvs为何不能完全替代DNS轮询

上一篇文章“一分钟了解负载均衡的一切”引起了不少同学的关注,评论中大家争论的比较多的一个技术点是接入层负载均衡技术,部分同学持这样的观点: 1)nginx前端加...

4505
来自专栏程序猿DD

数据异构的武器:BINLOG+MQ

作者:新栋BOOK 原文:https://my.oschina.net/wangxindong/blog/1531596 摘要: 分库分表中有一个最为常见的场景...

3937
来自专栏Golang语言社区

系统架构之一(RPG游戏常用架构)

RPG游戏经典的系统架构设计 : ? bigword 游戏引擎就是使用这种架构,我认识的很多rpg游戏公司的同事也大致采用了这种架构方式。 loginapp :...

4236
来自专栏运维小白

19.2 zabbix监控介绍

zabbix监控介绍 C/S架构,基于C++开发,监控中心支持web界面配置和管理 zabbix软件,是C/S架构:有一个服务端,去客户端抓数据。在客户端必须...

22210
来自专栏ionic3+

App自动化构建及打包发布

Fastlane 就是为了简化和自动化 App 发布或部署的过程的一组工具套装。盗个家族图如下:

763

扫码关注云+社区