专栏首页kwcodepopcorn-js视频Video框架简单用法

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

相关文章

  • iframe 同域下父子页面的通信

    //共同引用的JS文件 common.js ; (function (window, $) { $(function ($) { wi...

    纯粹是糖
  • 未在本地计算机上注册“microsoft.ACE.oledb.12.0”提供程序

    System.InvalidOperationException: 未在本地计算机上注册“Microsoft.ACE.OLEDB.12.0”提供程序。

    纯粹是糖
  • setInterval做定时器

    <script src="/js/jquery-1.8.3.min.js"></script> <script> $(f...

    纯粹是糖
  • EasyNVR、EasyDSS二次开发---RTMP、HLS流在web页面进行无插件播放(demo)

    对于EasyNVR和EasyDSS的使用方式大概分为两大类,一类是直接将软件作为视频能力平台来进行使用;另一类就是将视频能力集成到自身的业务系统来,这就涉及到相...

    EasyNVR
  • rtmp、m3u8直播小记

    最近项目做跟视频有关的,一个是直播,一个是播放视频。使用video标签。视频直播有很多协议,rtmp、rtsp、hls等就自己去了解,业务有做到就会了解一些。

    wade
  • EasyNVR H5无插件直播方案前端架构之:videojs的使用

    在引入videojs加载文件的前提下,可以在video标签中添加属性值“data-setup=’{}’”,并且在class属性中添加“video-js”;二者缺...

    EasyNVR
  • 理解去中心化 稳定币 DAI

    随着摩根大通推出JPM Coin 稳定币,可以预见稳定币将成为区块链落地的一大助推器。 坦白来讲,对于一个程序员的我来讲(不懂一点专业经济和金融),理解DAI的...

    Tiny熊
  • 腾讯云linux服务器搭建wordpress视频教程

    linux服务器针对php及其友好,配置好Memcached加速或者Redis加速,可以完全解决wordpress在国内卡的问题,如果说你觉得WordPress...

    Wordpress教程
  • 【Linux_Shell 脚本编程学习笔记二、打印菜单】

         1、当用户输入1时,输出 “start installing lamp.” 然后执行 /server/script/lamp.sh, 脚本内容输出 ...

    梅花
  • 谷歌开源超大型视频数据库,含800万视频 (附技术报告)

    9月28日,谷歌在官方博客上宣布,将含有800万个Youtube 视频URL 的视频数据库开源,视频总时长达到了50万个小时。一并发布的还有从包含了4800个知...

    新智元

扫码关注云+社区

领取腾讯云代金券