视频播放插件 Video.js
2018-03-06 13:31
686 查看
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库,Video.js 自动检测浏览器对 HTML5 的支持情况,如果不支持 HTML5 则自动使用 Flash 播放器。(要支持ie低版本请下载5.4.3版 )点击进入官网
设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件。
将 data-setup 属性从 video 标签中移除掉,避免播放器混乱。
运行下面的 javascript
第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。
第三个参数是一个 'ready' 回调。一旦 Video.js 初始化完成后,就会触发这个回调。
注意在动态加载HTML进行初始化
比如,如果页面有多余元素(例如白点),浏览器调试找到,css 设置
我做的项目中的使用效果
暂停:
获取播放进度:
设置播放进度:
视频持续时间,加载完成视频才可以知道视频时长,且在flash情况下无效:
缓冲,就是返回下载了多少: `var whatHasBeenBuffered = myPlayer.buffered();
百分比的缓冲:
声音大小(0-1之间):
设置声音大小:
取得视频的宽度:
设置宽度:
获取高度:
设置高度::
一步到位的设置大小:
全屏:
离开全屏 :
HTML
代码片段如下:
作者:丹青笔
链接:https://www.jianshu.com/p/9414886a8963
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
下载
各个版本下载使用
引入文件
<link href="video-js.css" rel="stylesheet" type="text/css"> <script src="video.js"></script>注:一般我使用时会把下载的包整个拷贝到项目的
plugin目录下,一方面可以方便以后查看Demo的使用方法,另一方面也避免内部文件之间引用的路径问题。
设置flash路径,Video.js会在不支持html5的浏览中使用flash播放视频文件。
<script> videojs.options.flash.swf = "video-js.swf"; </script>
HTML
<video id="example_video_1" class="video-js vjs-default-skin" controls preload="none" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup="{}"> <source src="http://视频地址格式1.mp4" type='video/mp4' /> <source src="http://视频地址格式2.webm" type='video/webm' /> <source src="http://视频地址格式3.ogv" type='video/ogg' /> <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --> <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 --> </video>设置自动播放将下面代码加到html中代码后面
<script type="text/javascript"> var myPlayer = videojs('example_video_1'); // video 标签中的ID myPlayer.ready(function(){ myPlayer.play(); // 调用播放函数 }); </script>默认情况下,大的播放按钮是被定为在左上角的,这样就不会覆盖视频内容。如果你想让这个播放按钮居中,你可以给你的 video 标签添加额外的
vjs-big-play-centered样式,比如:
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="640" height="264" poster="http://video-js.zencoder.com/oceans-clip.png" data-setup='{"example_option":true}'> ... </video>如果你还对播放按钮样式不满意可重新定义
video-js .vjs-big-play-button{/*这里的样式重写*/}
为动态加载的 HTML 元素设置 Video.js
如果你的 web 页面或者应用是动态加载 video 标签的(ajax,appendChild,等等),这样在页面加载后这个元素是不存在的,那么你会想要手动设置播放器而不是依靠data-setup属性,做法如下:
将 data-setup 属性从 video 标签中移除掉,避免播放器混乱。
运行下面的 javascript
videojs("example_video_1", {}, function(){ // Player (this) is initialized and ready. });videojs 方法中的第一个参数是你的 video 标签的 ID,用你自己的代替。
第二个参数是一个选项对象。它允许你像设置 data-setup 属性一样设置额外的选项。
第三个参数是一个 'ready' 回调。一旦 Video.js 初始化完成后,就会触发这个回调。
注意在动态加载HTML进行初始化
player对象的时候,很容易出现播放界面混乱的情况,我做的时候就出现了比如播放条错位,缺少播放时间和全局时间的显示,有白点等问题。遇到这种情况先检查加载顺序,如果不是的话也不要慌,在浏览器里找到混乱的元素,自己进行调试,把修改的 css 样式放到 HTML 的
<style>块中,不要修改插件的 CSS 文件,因为是在 js 加载的时候更改的样式,要在自己的页面里修改,如果这时候修改还是没有起作用,css 属性后面用
!important来强制提高样式加载的优先级。
比如,如果页面有多余元素(例如白点),浏览器调试找到,css 设置
display:none;当页面元素错位(例如进度条、声音图标错位),用
margin来调节合适位置;当页面元素缺失,比如缺少播放时间、剩余时间等,在浏览器 F12 调试找到对应元素,设置
display:block。
我做的项目中的使用效果
常用方法
播放:myPlayer.play();
暂停:
myPlayer.pause();
获取播放进度:
var whereYouAt = myPlayer.currentTime();
设置播放进度:
myPlayer.currentTime(120);
视频持续时间,加载完成视频才可以知道视频时长,且在flash情况下无效:
var howLongIsThis = myPlayer.duration();
缓冲,就是返回下载了多少: `var whatHasBeenBuffered = myPlayer.buffered();
百分比的缓冲:
var howMuchIsDownloaded = myPlayer.bufferedPercent();
声音大小(0-1之间):
var howLoudIsIt = myPlayer.volume();
设置声音大小:
myPlayer.volume(0.5);
取得视频的宽度:
var howWideIsIt = myPlayer.width();
设置宽度:
myPlayer.width(640);
获取高度:
var howTallIsIt = myPlayer.height();
设置高度::
myPlayer.height(480);
一步到位的设置大小:
myPlayer.size(640,480);
全屏:
myPlayer.enterFullScreen();
离开全屏 :
myPlayer.enterFullScreen();
添加事件
durationchange ended //播放结束 firstplay fullscreenchange loadedalldata loadeddata loadedmetadata loadstart pause //暂停 play //播放 progress seeked seeking timeupdate volumechange waiting resize inherited var myFunc = function(){ // Do something when the event is fired };
事件绑定
myPlayer.on("ended", function(){ console.log("end", this.currentTime()); }); myPlayer.on("pause", function(){ console.log("pause") });
删除事件
myPlayer.removeEvent(“eventName”, myFunc);
页面中有多个视频
一个页面中有多个视频,需要点击后触发bootstrap 的模态窗,再弹出视频HTML
<a videohref="http://xxx.mp4" class="video_link">![](../images/xxx.jpg)</a>js
$(".video_link").click(function() { var myPlayer = videojs('my-video'); var videoUrl = $(this).attr("videohref"); videojs("my-video", {}, function() { window.myPlayer = this; $("#mymoda .video-con #my-video source").attr("src", videoUrl); myPlayer.src(videoUrl); myPlayer.load(videoUrl); myPlayer.play(); }); $(".click-modal").click(); }); // 模态窗消失时,关闭视频 $('#mymoda').on('hidden.bs.modal', function() { myPlayer.pause(); });
场景使用补充
场景1:实时监控
在当需要实时监听视频进度的时候,比如我遇到的场景是课程视频有试听课,只能试听这个视频的前多少分钟。这个时候,不管是普通播放还是拖动进度条都需要实时监听播放的时间进度,判断是否大于试听时间,进行对应操作。代码片段如下:
// 判断试听时间 if(b){ window.loopMarquee = setInterval(function(){ if(player.currentTime() >= listenTime){ player.pause(); $(".gobuy").fadeIn(200); } },500) // 设置每500秒查询一次 }
场景2: 记录观看历史,下次从上次位置打开
思路:在离开页面时触发得到当前播放时间,存到数据库,下一次加载时从数据库取,如果有history_time则用
player.currentTime(historyTime),没有的话,正常从头播放。
$( window ).unload(function() { getVideoTime(); });
作者:丹青笔
链接:https://www.jianshu.com/p/9414886a8963
來源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
相关文章推荐
- 视频播放插件Video.js
- HTML5视频播放插件Video.js使用详解
- 视频播放插件Video.js
- 视频播放插件Video.js简单使用
- 视频播放插件Video.js
- js-视频播放插件Video.js简单使用
- Video.js网页视频播放插件
- 【PythonDjango后台实例 第七章】Django使用Video.js视频播放插件
- 比较好的播放视频插件swfobject.js
- 使用video.js播放视频
- video.js播放视频
- 帮助你生成全屏视频背景的超棒jQuery插件 - BigVideo.js
- 帮助你生成全屏视频背景的超棒jQuery插件 - BigVideo.js
- video.js--很赞的H5视频播放库
- swfobject.js视频播放插件
- 设置video.js多视频连续播放
- 帮助你生成全屏视频背景的超棒jQuery插件 - BigVideo.js
- js控制html5 【video】标签中视频的播放和停止
- Native.js调用android原生播放video视频MUI
- web视频播放插件:Video For Everybody