前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >popcorn-js视频Video框架简单用法

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

作者头像
纯粹是糖
发布2018-03-14 15:05:05
2.4K0
发布2018-03-14 15:05:05
举报
文章被收录于专栏:kwcodekwcode
代码语言:javascript
复制
 <div> 
            <video class="video" id="ourvideobig" preload="auto" controls="controls">
                <source src="/File/video/1.mp4" />
            </video>
        </div>
代码语言:javascript
复制
<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>
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档