videoJS 一款視頻播放器 ，可以播放多種格式 ，mp4、m3u8、 webm、ogg等，我主要用它來播放 m3u8格式的視頻 ,
1. 初始化
videojs("example_video_1", {}, function(){
//video.js初始化完成后執行
});
2.video標簽的class中的"video-js" 是videojs全屏和字幕等功能需要的基礎類,vjs-default-skin是vidojs界面默認的皮膚，
vjs-big-play-centered是播放按鈕居中，而默認的是在左上角的。
參數設置
1，autoplay：
該屬性使video會在頁面加載完畢后立即播放，而IOS設備屏蔽了這個屬性。
2，preload：
autoplay屬性會屏蔽掉preload屬性，沒有autoplay屬性時，
當preload值為auto時，頁面加載時即加載媒體，但是蘋果移動設備會忽略該屬性以保護帶寬
當preload值為metadata時，只加載一些關於視頻的元數據信息，如持續時間，媒體尺寸等等。
3，"poster": "./img/tian.gif", 視頻播放之前的圖 就像海報類似的
方法：
1.play() 視頻播放
2.pause() 視頻暫停
3.ended() 視頻播放結束
4.player.currentTime() //player 是播放器 currentTime 是獲取當前的播放時間
5.player.duration() 視頻結束的時候 duration獲取視頻的持續時間 也就是 視頻總的時間
6.player.bufferedPercent() 視頻緩存百分比 切記是百分比呦
插件機制：
1，聲明插件函數 function Fun(option){}
2，注冊為一個插件 videojs.plugin('Fun',Fun)
3, 使用插件
動態創建的video在初始化videojs時調用插件，即videojs('id',{plugins:{Fun:option}})
非動態創建的video初始化了的videojs對象可以直接調用，即videojs.Fun(option)
用videoJs 播放視頻的代碼如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>videoJs</title> <link rel="stylesheet" type="text/css" href="./js/video-js.css"> <script src="./js/video.js"></script> <script src="./js/videojs-contrib-hls.js"></script> </head> <body> <section id="videoPlayer"> <video id="example-video" width="600" height="300" class="video-js vjs-default-skin vjs-big-play-centered" poster=""> <source src="./video/134977E9-cn-600k.m3u8" type="application/x-mpegURL" id="target"> </video> </section> <script type="text/javascript"> var player = videojs('example-video', {"poster": "","controls": "true"}, function(){this.on('play',function(){ console.log('正在播放'); }); //暫停--播放完畢后也會暫停 this.on('pause',function(){ console.log("暫停中") }); // 結束 this.on('ended', function() { console.log('結束'); }) }); </script> </body> </html>
播放截圖：
