首页 > 代码库 > popcorn-js视频Video框架简单用法
popcorn-js视频Video框架简单用法
<div> <video class="video" id="ourvideobig" preload="auto" controls="controls"> <source src="http://www.mamicode.com/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框架简单用法
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。