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>
popcorn-js视频Video框架简单用法的更多相关文章
- jquery.validate.js 表单验证简单用法
引入jquery.validate.js插件以及Jquery,在最后加上这个插件的方法名来引用.$('form').validate(); <!DOCTYPE html PUBLIC " ...
- JS的简单用法
JS的简单用法 参考:http://www.w3school.com.cn/js/js_switch.asp JavaScript 是网络的脚本语言 JavaScript 是可插入 HTML 页面的编 ...
- 【FIORI系列】SAP OpenUI5 (SAPUI5) js框架简单介绍
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[FIORI系列]SAP OpenUI5 (SA ...
- jest js 测试框架-简单方便人性化
1. 安装 yarn global add jest-cli or npm install -g jest-cli 备注:可以安装为依赖不用全局安装 2. 项目代码 a. 项目初始化 yarn ini ...
- Knockout简单用法
Knockout简单用法 在最近做的一个项目中,页面数据全部通过js ajax调用webapi接口获取,也就是说页面的数据全部使用javascript脚本填充,这就想到了使用一个MVVM模式的js框架 ...
- Android MultiType第三方库的基本使用和案例+DiffUtil的简单用法
1.MultiType简单介绍 1.1.MultiType用于比较复杂的页面. 如下图,今日头条用到了MultiType处理各种复杂的页面. 这种还是比较简单的类型.因为一个页面也就这种类型. ...
- node.js Web应用框架Express入门指南
node.js Web应用框架Express入门指南 作者: 字体:[增加 减小] 类型:转载 时间:2014-05-28 我要评论 这篇文章主要介绍了node.js Web应用框架Express入门 ...
- js插件---video.js如何使用
js插件---video.js如何使用 一.总结 一句话总结:还是要去官方网站去看英文文档.快点把英语学好啊. 1.如何快速使用这些插件(比如video.js)? 直接百度这些js如何使用就可以了,这 ...
- 后盾网lavarel视频项目---vue-axios基本用法
后盾网lavarel视频项目---vue-axios基本用法 一.总结 一句话总结: 都是npm安装,然后import引入vue,然后按手册使用就好了,很简单 二.vue-axios基本用法 转自或参 ...
随机推荐
- boost 线程库
http://www.boost.org/ Boost的安装 step1.从www.boost.org下载boost库 step2 在 tools\build\jam_src目录下 运行build.b ...
- win10 合并磁盘 disk Acronis Disk Director
硬盘调整C盘大小的工具.zip 无损分区软件(Acronis Disk Director)下载 11.0 破解版 ADD11H_trial_en-US(11.0.0.2343).exe 注册码: E ...
- Matrix: android 中的Matrix (android.graphics.Matrix) (转)
本篇博客主要讲解一下如何处理对一个Bitmap对象进行处理,包括:缩放.旋转.位移.倾斜等.在最后将以一个简单的Demo来演示图片特效的变换. 1. Matrix概述 对于一个图片变换的处理,需要Ma ...
- alpha测试和beta测试的区别是什么?
1.测试时间不同: Beta测试是软件产品完成了功能测试和系统测试之后,在产品发布之前所进行的软件测试活动,它是技术测试的最后一个阶段. alpha测试简称“α测试”,可以从软件产品编码结束之时开始, ...
- java-mybaits-012-mybatis-Interceptor-拦截器读写分离四种实现方案
一.概述 基本项目搭建 技术框架:spring web mvc .日志[slf4j.log4j2].mybatis.druid.jetty插件启动.mybatis-generator逆向配置生产dao ...
- 总结Lock和synchronized的区别
1. Lock是一个接口,而synchronized是Java中的关键字,synchronized是内置的语言实现,Lock是代码层面的实现. 2. Lock可以选择性的获取锁,如果一段时间获取不到, ...
- Linux MySql状态、启动、停止、重启命令
1.查看mysql状态 [1]ps -ef|grep mysqld 看看是否有mysqld_safe 和mysqld进程 [root@localhost ~]# ps -ef|grep mysqld ...
- rf笔记
1.使用robot 用例绝对路径 可执行用例 2.robot --h 可以查看命令用法 3. 创建字典 *** Settings *** Library Collections *** ...
- 123457123457#0#-----com.yuming.ZuiNiuChengYu--前拼后广--最牛成语
com.yuming.ZuiNiuChengYu--前拼后广--最牛成语
- matlab学习——05插值和拟合(黄河小浪底调水调沙问题)
05插值和拟合 黄河小浪底调水调沙问题 data3.txt 1800 1900 2100 2200 2300 2400 2500 2600 2650 2700 2720 2650 32 60 75 8 ...