⼀款开源免费跨浏览器的视频播放器--videojs使⽤介绍
最近项⽬中的视频功能，需要做到浏览器全兼容，所以之前⽤html5实现的视频功能就需要进⾏改造了。在⽹上翻了个遍，试来试去，在所有的视频播放器中，就数它最实际了。⾸先我们来看看它的优点：
1.它是开源免费的，你可以在github很容易的获取它的最新代码。
2.使⽤它⾮常的容易，只要花⼏秒钟就可以架起⼀个视频播放页⾯。
3.它⼏乎兼容所有的浏览器，并且优先使⽤html5，在不⽀持的浏览器中，会⾃动使⽤flash进⾏播放。
4. 界⾯可以定制，纯javascript和css打造。说明⽂档也⾮常的详细。
下⾯是官⽹提供的⼀个简单的使⽤⽅法：
<!DOCTYPE HTML>
<html>
<head>
<title>Video.js Test Suite</title>
<link href="//dn/4.10/video-js.css" rel="stylesheet">
<script src="//dn/4.10/video.js"></script>
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264">
<source src="der/oceans-clip.mp4" type='video/mp4' />
</video>
</body>
</html>
这样个例⼦对于想⽤它做⼀个电影⽹站来说够⽤了。可是我们的需求往往不会只是这么简单。⽐如我现在要强制在pc端使⽤flash播放要怎么设置？
有两种途径：
先说第⼀种，通过html的data-setup 属性进⾏设置。
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
controls preload="auto" width="640" height="264"
poster="der/oceans-clip.png"
data-setup='{ techOrder: ["flash","html5"]}'>
...
</video>
第⼆种就是使⽤javascript:
videojs('#example_video_1',{
techOrder: ["flash","html5"]
},function() {
})
当然，官⽅的⽂档说，在内部会⾃动检测是否⽀持html5，在不⽀持的情况下会⾃动使⽤flash播放。
随着单页应⽤的流⾏，很多时候，我们在初始化videojs的时候，页⾯上是不存在存放video的节点的。这个时候，videojs也替我们想到了，我们只需要置空data-setup的属性就可以了。然后在js中进⾏如下申明：
ElementById('example_video_1'), {}, function() {
// This is functionally the same as the previous example.
});
也就是说，第⼀个位置，我们直接传dom节点的引⽤也是可以的。
这时候我们发现，播放按钮默认是在左上⾓，官⽅说这样可以不会遮挡内容的精彩部分，但是如果我们想要放到中间，处理也很简单。在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="der/oceans-clip.png"
data-setup='{"example_option":true}'>
...
</video>
如果我们想要它⾃动播放，⾮常容易，加⼀个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(){
console.log(this)
})
<('ended',function(){
this.pause();
this.hide()
})
});
我们优化是针对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(){
console.log(this)
});
对照⼀下dom节点，少了⼀⼤堆，感觉启动明显快了许多。看着也清爽了。
打印this看下：
两者是⼀⾄的，共有9个对象，于是⽣成了9个节点，外部只有3个⼦元素。默认的控制部分会⽣成14个，外部9个⼦元素。优化效果⾮常明显。
初始化的时候，常⽤的有如下⼀些参数：
autoplay
⾃动播放
<video autoplay ...>
or
{ "autoplay": true }
preload
预加载资源
<video preload ...>
or
{ "preload": "auto" }
poster
视频缩略图
<video poster="myPoster.jpg" ...>
or
{ "poster": "myPoster.jpg" }
loop
⾃动循环
<video loop ...>
or
{ "loop": "true" }
width
The width attribute sets the display width of the video.
<video width="640" ...>
or
{ "width": 640 }
height
The height attribute sets the display height of the video.
<video height="480" ...>
or
{ "height": 480 }
Component Options
功能组件（例中演⽰如何移除静⾳按钮）
var player = videojs('video-id', {
controlBar: {
muteToggle: false
}
});
videojs 有许多的组件，⽐如声⾳，播放按钮，字幕，时间，进度条等等，它们在html中的结构类似于这样⼦：Player
PosterImage
TextTrackDisplay
LoadingSpinner
BigPlayButton
ControlBar
PlayToggle
FullscreenToggle
CurrentTimeDisplay
TimeDivider
DurationDisplay
RemainingTimeDisplay
ProgressControl
SeekBar
LoadProgressBar
PlayProgressBar
SeekHandle
VolumeControl
VolumeBar
VolumeLevel
VolumeHandle
MuteToggle
通常html5会⽐flash加载的更快，所以我们通常优先使⽤html5，同时把我们要进⾏的操作写在回调⾥边。⽐如：videojs("example_video_1").ready(function(){
var myPlayer = this;
// EXAMPLE: Start playing the video.
myPlayer.play();
});
需要强调的是，如果使⽤flash优先，那么你在本地调式的时候，要⽤http的⽅式访问，否则你什么也看不到。METHODS
autoplay
buffered
bufferedEnd
bufferedPercent
cancelFullScreen deprecated
controls
currentSrc
currentTime
currentType
dispose //清理
duration
ended //结束
error //错误
exitFullscreen //退出全屏
init
isFullScreen deprecated 废弃
isFullscreen
language
load
loop //循环
muted 静⾳
pause 暂停
paused //检测是否暂停的状态
play
playbackRate
poster //静态图⽚
preload
remainingTime //余下时间
requestFullScreen deprecated
requestFullscreen
seeking
src
volume
addChild inherited
addClass inherited
buildCSSClass inherited
children inherited
contentEl inherited
createEl inherited
dimensions inherited
el inherited
enableTouchActivity inherited
getChild inherited
getChildById inherited
hasClass inherited
height inherited
hide inherited
id inherited
initChildren inherited
name inherited
off inherited
on inherited
one inherited
options inherited
player inherited
ready inherited
removeChild inherited
removeClass inherited
show inherited
trigger inherited
triggerReady inherited
width inherited
这⾥我说⼀下⼏个常⽤的⽅法：清理 dispose，hide() 隐藏，show() 显⽰，play()播放，pause(), el()获取video元素，暂停⼏本上就差不多了。
最后要说⼀下的就是事件。官⽅提⽰的事件如下：
EVENTS
durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart注册页面js特效
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited
我们常⽤的有play播放,pause暂停,ended结束，error错误, loadeddata数据加载完成
videojs的插件机制，我以在播放器的控制条中添加⼀个关闭按钮为例，展⽰如果使⽤插件实现我们⾃⼰想要的功能。videojs.PowerOff = d({
/* @constructor */
init: function(player, options){
videojs.Button.call(this, player, options);
//onClick为默认事件，不需要⼈为邦定，否则会调两次
//('click', Click);
}
});
/* This function is called when X button is clicked */
videojs.Click = function() {
console.log('ddd')
//这⾥添加做你想要⼲的事情
};
/* Create X button */
var createPowerOffButton = function() {
var props = {
className: 'vjs-off-button vjs-control',
innerHTML: '<div class="vjs-control-content">X</div>',
role: 'button',
'aria-live': 'polite',
tabIndex: 0
};
return videojs.ateEl(null, props);
};
/* Add X button to the control bar */
var X;
videojs.plugin('PowerOff', function() {
var options = { 'el' : createPowerOffButton() };
X = new videojs.PowerOff(this, options);
});
调⽤的时候，参数要加上插件的名称：
var player = videojs("example_video_1", {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。