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

相关文章

来自专栏王磊的博客

art-template用户注册方法

应用场景nodejs Express框架,使用art-template模板引擎。 后台注册方法代码: var template = require('art-t...

3228
来自专栏Java后端生活

EasyUI(一)--加载本地json数据

1694
来自专栏我的博客

XHProf安装

下载地址: https://pecl.php.net/package/xhprof [xhprof-0.9.4] wget http://pecl.php...

2945
来自专栏王磊的博客

nodejs支持ssi实现include shtml页面

express 对于include的代码默认不处理,直接输出,没办法执行include的内容,但可以通过Nginx实现。 1、 配置nginx设置开启ssi模式...

2604
来自专栏落花落雨不落叶

让sublime实现js控制台(前提是安装了nodejs)

2415
来自专栏野路子程序员

centos多版本php配置多版本composer

33212
来自专栏计算机视觉

linux-Anaconda+conda创建python-pytorch虚拟环境

1182
来自专栏小白安全

本地搭建安全狗无法安装插件问题的解决方法

一般是由于找不到apache服务名 其实很简单就可以解决的。 安装步骤:进入Apache安装目录下的bin目录: cd D:phpStudyAp...

2606
来自专栏从零学习云计算

openshift/origin学习记录(11)——赋予用户集群管理员权限

由于system:admin默认没有密码,没法登录web console,这里通过指令给账号dev赋予集群管理员权限。 # oc login -u sys...

2610
来自专栏从零开始的linux

ssh命令

ssh命令是openssh套件中的客户端连接工具,可以给予ssh机密协议实现安全的远程登录服务器. 语法: ssh (选项) (参数) 选项: -v:显示版本-...

2824

扫描关注云+社区