2023年7月11日发(作者：)

⼀款开源免费跨浏览器的视频播放器--videojs使⽤介绍 最近项⽬中的视频功能，需要做到浏览器全兼容，所以之前⽤html5实现的视频功能就需要进⾏改造了。在⽹上翻了个遍，试来试去，在所有的视频播放器中，就数它最实际了。⾸先我们来看看它的优点： 1.它是开源免费的，你可以在github很容易的获取它的最新代码。 2.使⽤它⾮常的容易，只要花⼏秒钟就可以架起⼀个视频播放页⾯。 3.它⼏乎兼容所有的浏览器，并且优先使⽤html5，在不⽀持的浏览器中，会⾃动使⽤flash进⾏播放。 4. 界⾯可以定制，纯javascript和css打造。说明⽂档也⾮常的详细。下⾯是官⽹提供的⼀个简单的使⽤⽅法：

这样个例⼦对于想⽤它做⼀个电影⽹站来说够⽤了。可是我们的需求往往不会只是这么简单。⽐如我现在要强制在pc端使⽤flash播放要怎么设置？有两种途径： 先说第⼀种，通过html的data-setup 属性进⾏设置。

第⼆种就是使⽤javascript:

videojs('#example_video_1',{ techOrder: ["flash","html5"] },function() {

})当然，官⽅的⽂档说，在内部会⾃动检测是否⽀持html5，在不⽀持的情况下会⾃动使⽤flash播放。

随着单页应⽤的流⾏，很多时候，我们在初始化videojs的时候，页⾯上是不存在存放video的节点的。这个时候，videojs也替我们想到了，我们只需要置空data-setup的属性就可以了。然后在js中进⾏如下申明：

videojs(mentById('example_video_1'), {}, function() { // This is functionally the same as the previous example.});也就是说，第⼀个位置，我们直接传dom节点的引⽤也是可以的。这时候我们发现，播放按钮默认是在左上⾓，官⽅说这样可以不会遮挡内容的精彩部分，但是如果我们想要放到中间，处理也很简单。在video标签中增加⼀个vjs-big-play-centered样式就好了如果我们想要它⾃动播放，⾮常容易，加⼀个autoplay 就可以了，或者data-setup='{"autoplay":true}' ,通过js也是⼀样的道理。⾮常简单就不演⽰了。官⽅说了，由于html5的标准，不建议写成autoplay="true" 或 controls="true",那是html5之前的版本⽤的。默认的控制栏会有许多我⽤不需要⽤到的组件，⽐字幕什么的，为了优化，我们可以定义要显⽰的组件：

var player = videojs("example_video_1", { "techOrder": ["flash","html"], "autoplay":false, controlBar: { captionsButton: false, chaptersButton : false, liveDisplay:false, playbackRateMenuButton: false, subtitlesButton:false }}, function(){ ('loadeddata',function(){ (this) }) ('ended',function(){ (); () })});

我们优化是针对option,因为有些节点我们不需要创建，默认是创建的，这显然会影响效率，以下是我项⽬中的⼀个使⽤情况：videojs('example_video_1',{ techOrder : ["html5","flash"], children : { bigPlayButton : false, textTrackDisplay : false, posterImage: false, errorDisplay : false, controlBar : { captionsButton : false, chaptersButton: false, subtitlesButton:false, liveDisplay:false, playbackRateMenuButton:false } } },function(){ (this) });对照⼀下dom节点，少了⼀⼤堆，感觉启动明显快了许多。看着也清爽了。

打印this看下：两者是⼀⾄的，共有9个对象，于是⽣成了9个节点，外部只有3个⼦元素。默认的控制部分会⽣成14个，外部9个⼦元素。优化效果⾮常明显。初始化的时候，常⽤的有如下⼀些参数：autoplay⾃动播放

通常html5会⽐flash加载的更快，所以我们通常优先使⽤html5,同时把我们要进⾏的操作写在回调⾥边。⽐如：videojs("example_video_1").ready(function(){ var myPlayer = this; // EXAMPLE: Start playing the video. ();});需要强调的是，如果使⽤flash优先，那么你在本地调式的时候，要⽤http的⽅式访问，否则你什么也看不到。METHODSautoplaybufferedbufferedEndbufferedPercentcancelFullScreen deprecatedcontrolscurrentSrccurrentTimecurrentTypedispose //清理durationended //结束error //错误exitFullscreen //退出全屏initisFullScreen deprecated 废弃isFullscreenlanguageloadloop //循环muted 静⾳pause 暂停paused //检测是否暂停的状态playplaybackRateposter //静态图⽚preloadremainingTime //余下时间requestFullScreen deprecatedrequestFullscreenseekingsrcvolumeaddChild inheritedaddClass inheritedbuildCSSClass inheritedchildren inheritedcontentEl inheritedcreateEl inheriteddimensions inheritedel inheritedenableTouchActivity inheritedgetChild inheritedgetChildById inheritedhasClass inheritedheight inheritedhide inheritedid inheritedinitChildren inheritedname inheritedoff inheritedon inheritedone inheritedoptions inheritedplayer inheritedready inheritedremoveChild inheritedremoveClass inheritedshow inheritedtrigger inheritedtriggerReady inheritedwidth inherited这⾥我说⼀下⼏个常⽤的⽅法：清理 dispose，hide() 隐藏，show() 显⽰，play()播放，pause(), el()获取video元素 ，暂停 ⼏本上就差不多了。最后要说⼀下的就是事件。官⽅提⽰的事件如下：EVENTSdurationchangeendedfirstplayfullscreenchangeloadedalldataloadeddataloadedmetadataloadstartpauseplayprogressseekedseekingtimeupdatevolumechangewaitingresize inherited我们常⽤的有play播放,pause暂停,ended结束，error错误, loadeddata数据加载完成videojs的插件机制,我以在播放器的控制条中添加⼀个关闭按钮为例，展⽰如果使⽤插件实现我们⾃⼰想要的功能。ff = ({ /* @constructor */ init: function(player, options){ (this, player, options); //onClick为默认事件，不需要⼈为邦定，否则会调两次 //('click', k); } }); /* This function is called when X button is clicked */ k = function() { ('ddd') //这⾥添加做你想要⼲的事情 }; /* Create X button */ var createPowerOffButton = function() { var props = { className: 'vjs-off-button vjs-control', innerHTML: '

', role: 'button', 'aria-live': 'polite', tabIndex: 0 }; return El(null, props); }; /* Add X button to the control bar */ var X; ('PowerOff', function() { var options = { 'el' : createPowerOffButton() }; X = new ff(this, options); ().appendChild(()); });调⽤的时候，参数要加上插件的名称：var player = videojs("example_video_1", { plugins : { PowerOff : {} }}, function(){

});看到我们添加的“X” 了没有？什么，你的X是在中间？忘了告诉你，这个地⽅的样式要⾃⼰加上，我的是这样的.vjs-default-skin .-off-button { display: block; font-size: 1.5em; line-height: 2; position: relative; top: 0; float:right; left: 10px; height: 100%; text-align: center; cursor: pointer; }是不是相当的nice呀。在实践中，我发现flash模式和html5模式还是有⼀些不⼀致的地⽅。⽐如在flash模式中，在播放器暂停或隐藏之后，调⽤paused()⽅法报错：VIDEOJS: : paused unavailable on Flash playbacktechnology element.调⽤hide()之后，调⽤show()⽅法，在flash模式中，会⾃动调⽤播放，⽽且是重新开始，⽽html5模式则不会。对于这⼀点，解决的办法是在option中指定autoplay:false,这样两者⾏为就⼀致了。使⽤videojs我发现有⼏个地⽅是要注意的：1：在iframe加载的页⾯中，全屏按钮是⽆效的。当然后来证实不是videojs的问题，是iframe要加allowfullscreen 属性才⾏。2：在flash模式下有太多的问题，⽐哪重复调⽤pause()会报错，在hide()之后调⽤paused()会报错。3：在flash模式下不要试图使⽤audio去播放⾳频，虽然有插件可以⽀持，但是问题很多。html5模式下本⼈没有测试。videojs 在flash模式下，以下情况有冲突：1. video 在播中调⽤hide()会导致内部错误，如果先调⽤了pause()和hide(),再调⽤pause()同样会导致内部错误。类似的情况还有调⽤dispose()2. 在video是hide的情况下，去调⽤paused()会产⽣内部错误3. 在hide的状态下，调⽤show()再调⽤play会产⽣内部错误4. 在⽂件不存在的情况下，如果不调⽤dispose会产⽣内部错误。综上所述，对于单页应⽤，videojs在隐藏时，内部的状态就存在丢失的情况，会导致⼀系列的问题。解决的办法就是播⼀次就创建⼀次。关闭就清理。经测试，这种模式就再也不会有错误了 仅管如此，作为⼀个开源免费的产品，已经是相当不错了。videojs已更新，