video.js简单使用-vue 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>

【本文是51CTO专栏作者张勇波的原创文章，转载请通过51CTO获取作者授权】

戳这里，看该作者更多好文