视频插件VideoJS5介绍
1:官网下载
http://videojs.com/
2:扩充video功能---plugins.md插件
1:新建一个函数
<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);"> function examplePlugin(options) {
this.on('play', function(e) {
console.log('playback has started!');
});
};</span></span>
2:把函数定义为插件
<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);"> videojs.plugin('examplePlugin', examplePlugin);</span></span>
3:应用插件
方法一:
<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);"> videojs('vidId', {
plugins: {
examplePlugin: {
exampleOption: true
}
}
});</span></span>
方法二:
<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);"> var video = videojs('cool-vid');
video.examplePlugin({ exampleOption: true });</span></span>
一个关于新建插件的例子:
新建一个按钮并点击时候视频回到开头并停止
我们在上面的examplePlugin()函数中添加代码
<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);"> function examplePlugin(options) {
var backplayBtn = document.createElement('div');
backplayBtn.className = 'vjs-backplay-button vjs-menu-button vjs-control';
backplayBtn.innerHTML =
'<div>'
+ '<i class="fa fa-step-backward"></i>'
+ '</div>';
myPlayer.controlBar.el().appendChild(backplayBtn);
backplayBtn.onclick = function () {
myPlayer.pause();
myPlayer.currentTime(0);
};
};</span></span>
完整代码
<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);"><!DOCTYPE HTML>
<html>
<head>
<title>Video.js Test Suite</title>
<link href="http://vjs.zencdn.net/5.7.1/video-js.css" rel="stylesheet">
</head>
<body>
<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered " width="640" height="264">
<source src="http://vjs.zencdn.net/v/oceans.mp4" type="video/mp4">
</video>
<script src="http://vjs.zencdn.net/5.7.1/video.js"></script>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.js"></script>
<script>
var myPlayer = videojs("example_video_1", {
controls: true,
preload: "auto",
controlBar: {
captionsButton: false,
chaptersButton : false,
liveDisplay:false,
playbackRateMenuButton: false,
subtitlesButton:false
}
});
function examplePlugin(options) {
var backplayBtn = document.createElement('div');
backplayBtn.className = 'vjs-backplay-button vjs-menu-button vjs-control';
backplayBtn.innerHTML =
'<div>'
+ '<i class="fa fa-step-backward">555555555555555555555555555555</i>'
+ '</div>';
myPlayer.controlBar.el().appendChild(backplayBtn);
<span style="white-space:pre"> </span>//<span style="white-space:pre"> myPlayer.controlBar.el().insertBefore(backplayBtn, myPlayer.controlBar.playToggle.el());</span>在某个组件之前插入
backplayBtn.onclick = function () {
myPlayer.pause();
myPlayer.currentTime(0);
};
};
videojs.plugin('examplePlugin', examplePlugin);
myPlayer.examplePlugin({ exampleOption: true });
</script>
</body>
</html></span></span>
效果图
3:更改视频组件的位置
首先我们打开下载的video.js 文件
找到下面这段代码
<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);">ControlBar.prototype.options_ = {
loadEvent: 'play',
children: ['playToggle', 'volumeMenuButton', 'currentTimeDisplay', 'timeDivider', 'durationDisplay', 'progressControl', 'liveDisplay', 'remainingTimeDisplay', 'customControlSpacer', 'playbackRateMenuButton', 'chaptersButton', 'subtitlesButton', 'captionsButton', 'fullscreenToggle']
};
</span></span>
children里面的就是视频 所提供的组件和它们的先后顺序.
如果你想修改,就直接改变位置即可,
如果你的项目不需要某些组件 ,那么也可以把它删除或者直接通过样式隐藏.
4:关于视频时间格式的修改
视频时间的默认格式是:
我们打开下载的video.js文件
找到下面的一段代码
<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);">function formatTime(seconds) {
var guide = arguments.length <= 1 || arguments[1] === undefined ? seconds : arguments[1];
return (function () {
var s = Math.floor(seconds % 60);
var m = Math.floor(seconds / 60 % 60);
var h = Math.floor(seconds / 3600);
var gm = Math.floor(guide / 60 % 60);
var gh = Math.floor(guide / 3600);
// handle invalid times
if (isNaN(seconds) || seconds === Infinity) {
// '-' is false for all relational operators (e.g. <, >=) so this setting
// will add the minimum number of fields specified by the guide
h = m = s = '-';
}
// Check if we need to show hours
h = h > 0 || gh > 0 ? h + ':' : '';
// If hours are showing, we may need to add a leading zero.
// Always show at least one digit of minutes.
m = ((h || gm >= 10) && m < 10 ? '0' + m : m) + ':';
// Check if leading zero is need for seconds
s = s < 10 ? '0' + s : s;
return h + m + s;
})();
}
</span></span>
这段代码就是video插件用的时间格式,你自己可以根据项目做出修改.
下面是我的一些修改
<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);">function formatTime(seconds) {
var guide = arguments.length <= 1 || arguments[1] === undefined ? seconds : arguments[1];
return (function () {
var s = Math.floor(seconds % 60);
var m = Math.floor(seconds / 60 % 60);
var h = Math.floor(seconds / 3600);
var gm = Math.floor(guide / 60 % 60);
var gh = Math.floor(guide / 3600);
// handle invalid times
if (isNaN(seconds) || seconds === Infinity) {
// '-' is false for all relational operators (e.g. <, >=) so this setting
// will add the minimum number of fields specified by the guide
h = m = s = '-';
}
// Check if we need to show hours
h = h > 0 || gh > 0 ? h + ':' : '';
// If hours are showing, we may need to add a leading zero.
// Always show at least one digit of minutes.
m = ((h || gm >= 10) && m < 10 ? '0' + m : m) ;
if(m<10){
m='0'+m
}
m=m+ ':';
// Check if leading zero is need for seconds
s = s < 10 ? '0' + s : s;
return h + m + s;
})();
}</span></span>
效果--就是多了一个0
5:videoJs事件
事件放置的地方(ready函数中)
<span style="background-color: rgb(255, 255, 255);"><span style="background-color: rgb(0, 102, 0);"> var myPlayer = videojs(videoID, { //初始化视频的一些参数
controls: true,
preload: "auto",
controlBar: {
captionsButton: false,
chaptersButton : false,
liveDisplay:false,
playbackRateMenuButton: false,
subtitlesButton:false
}
});
videojs(videoID).ready(function(){
var myPlayer = this;
myPlayer.play();//视频自动播放
myPlayer.on('timeupdate', function(e) { //播放时间改变执行函数
alert(888)
});
});</span></span>
事件列表
1,timeupdate:播放时间改变时执行.