videoJS如何用

一，Web視頻播放器插件

一個好的播放器需要滿足以下需求：

1. 支持所有主流瀏覽器（兼容性保障）

2. 用戶能與播放器交互，播放器必須提供必要的API，比如播放，暫停，停止，拖動，倍速播放，片源切換

3. 可定制外觀，方便后期擴展，UI定制化保障不同的用戶自定義

4. 支持flv、mp3、mp4格式，支持播放列表

5. 詳盡的幫助文檔說明，方便開發者使用

 

二、播放器插件舉例

1、videoJS：

 　　videojs是一個兼容html5的視頻播放工具，早期版本兼容所有瀏覽器，方法是：提供三個后綴名的視頻，並在不支持html5的瀏覽器下生成一個flash的版本。

最新的3.1.0版本優化了之前的做法，只需要提供兩個格式的視頻，頁面制作起來更加方便，只有兩步走：

1、引用腳本，videojs很為你着想，直接cdn了，你都不需要下載這些代碼放入自己的網站

　　<link href=”http://vjs.zencdn.net/c/video-js.css” rel=”stylesheet”>

　　<script src=”http://vjs.zencdn.net/c/video.js”></script>

2、頁面中使用方式：

（1）直接在HTML中設置屬性

　　<video id=”my_video_1″ class=”video-js vjs-default-skin” controls preload=”auto” width=”640″ height=”264″ poster=”my_video_poster.png” data-setup=”{}”>

　　　　<source src=”my_video.mp4″ type=’video/mp4′>

　　　　<source src=”my_video.webm” type=’video/webm’>

　　</video>

其中poster就是視頻的縮略圖，那倆source一個指向mp4視頻，一個指向webm視頻，在頁面加載過程中，video.js會判斷瀏覽器支持哪個格式視頻，會自動加載可播放的視頻。

（2）通過API設置視頻：

<video id="videoID"></video>

　　var player = videojs('videoID',{
　　　　controls: true,  //控制條
　　　　preload: 'none', //是否自動加載
　　　　width: '640',
　　　　height: '264',
　　　　poster: 'media/poster.jpg',
　　　　sources: [
　　　　　　{src: 'media/001.mp4',type: 'video/mp4'}
　　　　]
　　},function(){
　　　　var that = this;
　　　　that.on('pause',function(){
　　　　　　old_time = this.currentTime();
　　　　　　console.log('pause:' + old_time);
　　　　})
　　　　that.on('play',function(){
　　　　　　new_time = this.currentTime();
　　　　　　　console.log('playing:' + this.currentTime());
　　　　})
　　　　that.on('seeked',function(){
　　　　　　new_time = this.currentTime();
　　　　　　console.log('seeked:' + this.currentTime());
　　　　　　if (old_time) {
　　　　　　　　console.log(new_time > old_time ? '拖動快進' : '拖動后退');
　　　　　　}
　　　　})
　　　　that.on('ended',function(){
　　　　　　console.log('ended:'+ this.currentTime());
　　　　　　console.log('duration:' + this.duration());
　　　　})
　　})