Videojs視頻插件在React中的應用

1.介紹video.js視頻插件

　　1.1 簡單介紹

　　　　Video.js是一個通用的在網頁上嵌入視頻播放器的JS庫，支持電腦端和移動端。Video.js自動檢測瀏覽器對Html5的支持情況，如果不支持Html5，則自動使用Flash播放器。插件下載，如要支持ie低版本，點擊此處下載。

　　1.2 入門使用

　　　 （1）載入CSS文件和JS文件

　　　　

　　　（2）在頁面添加Html5的Video標簽

　　　

　　　　id: 就是id。

　　　　class:  video-js與vjs-default-skin，前者是JS識別，后者加載CSS，都是必須的。

　　　　poster: 播放的初始圖。

　　　　data-setup: 頁面准備完成即自動加載。

　　　　source: 指向視頻。這里提供三種視頻格式，mp4/webm/ogg。

 　　　（3）簡單應用Video.js

　　　　

　　　　將上面設置自動播放代碼添加到Html中代碼后面。下面提供幾個常用的方法：
　　　
　　　 獲取對象：var myPlayer = vjs(“my_video_1″);
　　　
　　　 播放： myPlayer.play();

　　　 暫停： myPlayer.pause();

　　　 獲取進度條：var whereYouAt = myPlayer.currentTime();

　　 設置播放進度： myPlayer.currentTime(120);

　　 緩沖： var whatHasBeenBuffered = myPlayer.buffered();

　　 百分比的緩沖： var howMuchIsDownloaded = myPlayer.bufferedPercent();

　　　 聲音大小(0-1之間)：var howLoudIsIt = myPlayer.volume();

　　　 設置聲音大小：myPlayer.volume(0.5);

　　　 設置寬度：myPlayer.width(640);

　　 設置高度：myPlayer.height(480);

　　 全屏：myPlayer.enterFullScreen();

 　　　添加事件：var myFunc = function(){
　　　　　　　　　　// Do something when the event is fired
　　　　　　　　 };
　　　　　　　　myPlayer.addEvent(“eventName”, myFunc);
　　　 刪除事件：myPlayer.removeEvent(“eventName”, myFunc);

 　　　注：需要了解更詳細的使用方法，可以在Video.js官網查看。

2.項目中實際應用

　　項目采用React前端框架技術，結合前后台技術背景。Video.js在項目中的具體應用如下：

　　（1）異步加載CSS文件和JS文件，並且設置視頻的尺寸大小、是否自動播放。

　　

　　（2）定義實體，供后台返回數據可用。

　　

　　（3）書寫Html。source指向的三種視頻格式，放在一個數組里面。

　　

　　點擊按鈕，數據刷新。

　　

　　（4）最后效果