popcorn-js视频Video框架简单用法
时间:2022-05-04
本文章向大家介绍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>
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 【Python】使用Pygame做一个Flappy bird小游戏(一)
- 从0到1,实现你的第一个多层神经网络
- 【Python】使用Pygame做一个Flappy bird小游戏(二)
- 【Pandas】pandas的主要数据结构
- 【Python】使用Pygame做一个Flappy bird小游戏(三)
- Godot游戏开发实践之三:容易被忽视的Resource
- 方便快捷的调试 Node.js 程序
- LeetCode 06Z字形变换&07整数反转
- 对搜索表单提交是否为空进行弹出提示
- PWN入门(Fastbin Attack)
- Qt项目网络聊天室设计
- nginx 端口转发
- linux通用链表
- 什么情况用ArrayList or LinkedList呢?
- Dubbo系列-扬帆起航