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>

  

时间: 2024-11-04 16:26:31

popcorn-js视频Video框架简单用法的相关文章

android AsyncTask的简单用法

public class WeatherAsyncTask extends AsyncTask<String, Integer, String> { public TextView t1=null; public WeatherAsyncTask(TextView t) { t1=t; } @Override protected String doInBackground(String... params) { // TODO Auto-generated method stub return

video.js的简单用法

今天项目中需要跨浏览器地播放视频,在网上找了一下,找到了video.js,记录一下video.js的简单用法. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 <html> <head> ... <!-- 引入vide

jquery.cycle.js简单用法实例

样式: a{text-decoration: none;} *{margin:0; padding:0;} /*容器设置*/ .player { width:216px; height:248px; background:url(http://i2.itc.cn/20120117/2cc0_da8f6c82_c8da_693d_7714_9533a013006a_3.jpg) no-repeat; background-color:#ede1d1; position:relative; padd

Node.js的Connect框架的代码重写与改进

Node.js的Connect框架的代码重写与改进 Connect框架简介 Connect框架是建立在Node.js的基本http.server功能之上,帮助实现结构化的web服务器逻辑的框架.Connect框架建立在两个重要的设计模式之上. 1) 责任链模式 在处理web请求时常需要作分派处理.例如,ASP.NET MVC支持按照请求参数将处理分派至某个Controller类的某个Action方法,以及根据Action方法的返回结果类型分派不同的结果操作(如ViewResult.JsonRes

马蜂窝视频编辑框架设计及在 iOS 端的业务实践

(马蜂窝技术公众号原创内容,ID: mfwtech) 熟悉马蜂窝的朋友一定知道,点击马蜂窝 App 首页的发布按钮,会发现发布的内容已经被简化成「图文」或者「视频」. 长期以来,游记.问答.攻略等图文形式的形态一直是马蜂窝发展的优势所在.将短视频提升至与图文并列的位置,是因为对于今天的移动互联网用户来说,内容更真实直观.信息密度更大.沉浸感更强的短视频已经成为刚需.为了使旅游用户拥有更好的内容交互体验,丰富和完整原有的内容生态体系,马蜂窝加码了对短视频领域的布局. 现在,每天都会有大量短视频在马

更快学习 JS 的 6 个简单思维技巧

当人们尝试学习 JavaScript , 或者其他编程技术的时候,常常会遇到同样的挑战: 有些概念容易混淆,特别是当你学习过其他语言的时候. 很难找到学习的时间(有时候是动力). 一旦当你理解了一些东西的时候,却很容易再一次忘记. 可以使用的工具甚多且经常变化,所以不知道从哪里开始入手. 幸运的是,这些挑战最终都可以被战胜.在这篇文章里,我将介绍 6 个思维技巧来帮你更快的学习 JavaScript ,让你成为一个更快乐更多产的程序员. 1.不要让将来的决定阻止你进步 对于很多学习 JavaSc

MPEG2与MPEG4在视频编码的简单比较

1 MPEG-2技术 MPEG-2的初衷是为广播级电视质量(CCIR601格式)的视音频信号定义的压缩编码标准,但最终结果是成为了一个通用的标准,能在很大范围内对不同分辨率和不同输出比特率的图像信号进行有效编码. MPEG-2的编码技术主要基于两个概念:即时间相关性与空间相关性.所谓时间相关性指的是物体前后运动的连续性,例如,一扇门的开启不可能是开关 两个状态,而一定是关.微开.开等一系列的连续动作,因此利用前一次的动作可以预测下一次的动作:空间相关性指的是空间内相邻物体的色彩和亮度是一个渐变

Node.js学习笔记(3) - 简单的curd

这个算是不算完结的完结吧,前段时间也是看了好久的Node相关的东西,总想着去整理一下,可是当时也没有时间: 现在看来在整理的话,就有些混乱,自己也懒了,就没在整理,只是简单的记录一下 一.demo的简单介绍 这次demo,只涉及到简单的curd操作,用到的数据库是mongo,所以要安装mongo数据库,数据库连接驱动是mongoose: 当然关于mongo的驱动有很多,比如mongous mongoskin等:(详见http://cnodejs.org/topic/4f4ca8e0940ce2e

js中setInterval与setTimeout用法

setTimeout 定义和用法: setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式. 语法: setTimeout(code,millisec) 参数: code (必需):要调用的函数后要执行的 JavaScript 代码串. millisec(必需):在执行代码前需等待的毫秒数. 提示: setTimeout() 只执行 code 一次.如果要多次调用,请使用 setInterval() 或者让 code 自身再次调用 setTimeout(). 两种调用函数的写法: