video.js简单使用
Video.js 是一个通用的在网页上嵌入视频播放器的 JS 库。Video.js 自动检测浏览器对 HTML5 的支持情况，如果不支持 HTML5 则自动使用 Flash 播放器。通过相关js可支持IE8，IE9及以上本就支持h5。
插件支持自定义组建按钮（个人测试5.0及以上版本自定义按钮失效），支持视频静态图片指定等。
<%--
Created by IntelliJ IDEA.
User: 张勇波
Date: 2017/1/4
Time: 15:29
--%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>videojs demo</title>
<link href="video-js-5.15.1/video-js.min.css" rel="stylesheet">
<script src="video-js-5.15.1/ie8/videojs-ie8.min.js"></script>
<script src="video-js-5.15.1/video.min.js"></script>
<script src="video-js-5.15.1/lang/zh-CN.js"></script>
<script src="video-js-5.15.1/jquery.min.js"></script>
<script>
videojs.options.flash.swf = "video-js-5.15.1/video-js.swf";
</script>
</head>
<body>
<video id="my-video" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto">
<%--字幕文件地址--%>
<track src="video-js-5.15.1/examples/elephantsdream/captions.en.vtt" srclang="en" label="English" kind="caption">
<track src="video-js-5.15.1/examples/elephantsdream/captions.ar.vtt" srclang="zh-cn" label="简体中文" kind="caption"
default>
</video>
<input type="button" onclick="state('play')" value="开始">
<input type="button" onclick="state('pause')" value="暂停">
<%
String mp4 = request.getParameter("mp4");
String picture = request.getParameter("picture");
%>
<script type="text/javascript">
var myvideo;
function videojs_run() {
var mp4 = "<%=mp4%>";
var picture = "<%=picture%>";
//播放类型支持，mp4、webm、ogg
myvideo = videojs('my-video', {
plugins: {//调用插件
// examplePlugin: {exampleOption: false}
},
language: "zh-CN",
loop: false,//循环播放
autoplay: false,//自动播放
// width: "1270",//宽度
// height: "663",//高度
poster: picture,//静态封面
}, function () {
// 播放器初始化后回调
this.src(mp4);
// this.play();//播放
// this.pause();//暂停
this.volume(0.3);
// this.load();
});
}
function state(val) {
if (val == "play") {
myvideo.play();
} else if (val == "pause") {
myvideo.pause();
}
}
/**
* 编辑插件
* @param options
*/
function examplePlugin(options) {
this.on('play', function (e) {
alert('playback has started!');
});
this.on('pause', function (e) {
alert('pause has started!');
});
}
//注册插件
videojs.plugin('examplePlugin', examplePlugin);
$(function () {
videojs_run();
});
</script>
</body>
</html>
