一款開源免費跨瀏覽器的視訊播放器--videojs使用介紹

阿新 • • 發佈：2019-01-15

最近專案中的視訊功能，需要做到瀏覽器全相容，所以之前用html5實現的視訊功能就需要進行改造了。在網上翻了個遍，試來試去，在所有的視訊播放器中，就數它最實際了。首先我們來看看它的優點：

1.它是開源免費的，你可以在github很容易的獲取它的最新程式碼。

2.使用它非常的容易，只要花幾秒鐘就可以架起一個視訊播放頁面。

3.它幾乎相容所有的瀏覽器，並且優先使用html5，在不支援的瀏覽器中，會自動使用flash進行播放。

4. 介面可以定製，純javascript和css打造。說明文件也非常的詳細。

下面是官網提供的一個簡單的使用方法：

<!DOCTYPE HTML>
<html>
<head>
  <title>Video.js Test Suite</title>
<link href="//vjs.zencdn.net/4.10/video-js.css" rel="stylesheet">
<script src="//vjs.zencdn.net/4.10/video.js"></script>
 
</head>
<body>
 <video id="example_video_1" class 
="video-js vjs-default-skin" controls width="640" height="264">

 <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />

</video> 
</body> 
</html>

這樣個例子對於想用它做一個電影網站來說夠用了。可是我們的需求往往不會只是這麼簡單。比如我現在要強制在pc端使用flash播放要怎麼設定？

有兩種途徑：

先說第一種，通過html的data-setup 屬性進行設定。

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{ techOrder: ["flash","html5"]}'>
  ...
</video>

第二種就是使用javascript:

  videojs('#example_video_1',{
    techOrder: ["flash","html5"]
  },function() {
  
  })

當然，官方的文件說，在內部會自動檢測是否支援html5，在不支援的情況下會自動使用flash播放。

隨著單頁應用的流行，很多時候，我們在初始化videojs的時候，頁面上是不存在存放video的節點的。這個時候，videojs也替我們想到了，我們只需要置空data-setup的屬性就可以了。然後在js中進行如下申明：

videojs(document.getElementById('example_video_1'), {}, function() {
  // This is functionally the same as the previous example.
});

也就是說，第一個位置，我們直接傳dom節點的引用也是可以的。

這時候我們發現，播放按鈕預設是在左上角，官方說這樣可以不會遮擋內容的精彩部分，但是如果我們想要放到中間，處理也很簡單。在video標籤中增加一個vjs-big-play-centered樣式就好了

<video id="example_video_1" class="video-js vjs-default-skin vjs-big-play-centered"
  controls preload="auto" width="640" height="264"
  poster="http://video-js.zencoder.com/oceans-clip.png"
  data-setup='{"example_option":true}'>
  ...
</video>

如果我們想要它自動播放，非常容易，加一個autoplay 就可以了，或者data-setup='{"autoplay":true}' ,通過js也是一樣的道理。非常簡單就不演示了。官方說了，由於html5的標準，不建議寫成autoplay="true" 或 controls="true",那是html5之前的版本用的。

預設的控制欄會有許多我用不需要用到的元件，比字幕什麼的，為了優化，我們可以定義要顯示的元件：

var player = videojs("example_video_1", {
    "techOrder": ["flash","html"],
    "autoplay":false,
    controlBar: {
        captionsButton: false,
        chaptersButton : false,
        liveDisplay:false,
        playbackRateMenuButton: false,
        subtitlesButton:false
      }

}, function(){

    this.on('loadeddata',function(){
        console.log(this)
    })

    this.on('ended',function(){
         this.pause();
         this.hide()
    })

});

我們優化是針對option,因為有些節點我們不需要建立，預設是建立的，這顯然會影響效率，以下是我專案中的一個使用情況：

videojs('example_video_1',{
        techOrder : ["html5","flash"],
        children : {
            bigPlayButton : false,
            textTrackDisplay : false,
            posterImage: false,
            errorDisplay : false,
            controlBar : {
                captionsButton : false,
                chaptersButton: false,
                subtitlesButton:false,
                liveDisplay:false,
                playbackRateMenuButton:false
            }
        }
    },function(){
        console.log(this)
    });

對照一下dom節點，少了一大堆，感覺啟動明顯快了許多。看著也清爽了。

列印this看下：

兩者是一至的，共有9個物件，於是生成了9個節點，外部只有3個子元素。預設的控制部分會生成14個，外部9個子元素。優化效果非常明顯。

初始化的時候，常用的有如下一些引數：

autoplay

自動播放

<video autoplay ...>
or
{ "autoplay": true }

preload

預載入資源

<video preload ...>
or
{ "preload": "auto" }

poster

視訊縮圖

<video poster="myPoster.jpg" ...>
or
{ "poster": "myPoster.jpg" }

loop

自動迴圈

<video loop ...>
or
{ "loop": "true" }

width

The width attribute sets the display width of the video.

<video width="640" ...>
or
{ "width": 640 }

height

The height attribute sets the display height of the video.

<video height="480" ...>
or
{ "height": 480 }

Component Options

功能元件（例中演示如何移除靜音按鈕）

var player = videojs('video-id', {
  controlBar: {
    muteToggle: false
  }
});

videojs 有許多的元件，比如聲音，播放按鈕，字幕，時間，進度條等等，它們在html中的結構類似於這樣子：

Player
    PosterImage
    TextTrackDisplay
    LoadingSpinner
    BigPlayButton
    ControlBar
        PlayToggle
        FullscreenToggle
        CurrentTimeDisplay
        TimeDivider
        DurationDisplay
        RemainingTimeDisplay
        ProgressControl
            SeekBar
              LoadProgressBar
              PlayProgressBar
              SeekHandle
        VolumeControl
            VolumeBar
                VolumeLevel
                VolumeHandle
        MuteToggle

通常html5會比flash載入的更快，所以我們通常優先使用html5,同時把我們要進行的操作寫在回撥裡邊。比如：

videojs("example_video_1").ready(function(){
  var myPlayer = this;

  // EXAMPLE: Start playing the video.
  myPlayer.play();

});

需要強調的是，如果使用flash優先，那麼你在本地調式的時候，要用http的方式訪問，否則你什麼也看不到。

METHODS

autoplay
buffered
bufferedEnd
bufferedPercent
cancelFullScreen deprecated
controls
currentSrc
currentTime
currentType
dispose //清理
duration
ended //結束
error //錯誤
exitFullscreen //退出全屏
init
isFullScreen deprecated 廢棄
isFullscreen
language
load
loop //迴圈
muted 靜音
pause 暫停
paused //檢測是否暫停的狀態
play
playbackRate
poster //靜態圖片
preload
remainingTime //餘下時間
requestFullScreen deprecated
requestFullscreen
seeking
src
volume
addChild inherited
addClass inherited
buildCSSClass inherited
children inherited
contentEl inherited
createEl inherited
dimensions inherited
el inherited
enableTouchActivity inherited
getChild inherited
getChildById inherited
hasClass inherited
height inherited
hide inherited
id inherited
initChildren inherited
name inherited
off inherited
on inherited
one inherited
options inherited
player inherited
ready inherited
removeChild inherited
removeClass inherited
show inherited
trigger inherited
triggerReady inherited
width inherited

這裡我說一下幾個常用的方法：清理 dispose，hide() 隱藏，show() 顯示，play()播放，pause(), el()獲取video元素，暫停幾本上就差不多了。

最後要說一下的就是事件。官方提示的事件如下：

EVENTS

durationchange
ended
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
seeked
seeking
timeupdate
volumechange
waiting
resize inherited

我們常用的有play播放,pause暫停,ended結束，error錯誤, loadeddata資料載入完成

videojs的外掛機制,我以在播放器的控制條中新增一個關閉按鈕為例，展示如果使用外掛實現我們自己想要的功能。

videojs.PowerOff = videojs.Button.extend({
              /* @constructor */
               init: function(player, options){

                 videojs.Button.call(this, player, options);
                 //onClick為預設事件，不需要人為邦定，否則會調兩次
                 //this.on('click', this.onClick);
               }
             });

            /* This function is called when X button is clicked */
            videojs.PowerOff.prototype.onClick = function() {
                console.log('ddd')
                //這裡新增做你想要乾的事情
            };

             /* Create X button */
             var createPowerOffButton = function() {
               var props = {
                   className: 'vjs-off-button vjs-control',
                   innerHTML: '<div class="vjs-control-content">X</div>',
                   role: 'button',
                   'aria-live': 'polite',
                   tabIndex: 0
                 };

               return videojs.Component.prototype.createEl(null, props);
             };

            /* Add X button to the control bar */
            var X;
             videojs.plugin('PowerOff', function() {
               var options = { 'el' : createPowerOffButton() };
               X = new videojs.PowerOff(this, options);
               this.controlBar.el().appendChild(X.el());
             });

呼叫的時候，引數要加上外掛的名稱：

var player = videojs("example_video_1", {
      plugins : { PowerOff : {} }
}, function(){
    
});

看到我們新增的“X” 了沒有？什麼，你的X是在中間？忘了告訴你，這個地方的樣式要自己加上，我的是這樣的

.vjs-default-skin .vjs-control.vjs-off-button {
         display: block;
         font-size: 1.5em;
         line-height: 2;
         position: relative;
         top: 0;
         float:right;
         left: 10px;
         height: 100%;
         text-align: center;
         cursor: pointer;
         }

是不是相當的nice呀。

在實踐中，我發現flash模式和html5模式還是有一些不一致的地方。

比如在flash模式中，在播放器暫停或隱藏之後，呼叫paused()方法報錯：VIDEOJS: Video.js: paused unavailable on Flash playback technology element.

呼叫hide()之後，呼叫show()方法，在flash模式中，會自動呼叫播放，而且是重新開始，而html5模式則不會。對於這一點，解決的辦法是在option中指定autoplay:false,這樣兩者行為就一致了。

使用videojs我發現有幾個地方是要注意的：

1：在iframe載入的頁面中，全屏按鈕是無效的。當然後來證實不是videojs的問題，是iframe要加allowfullscreen 屬性才行。

2：在flash模式下有太多的問題，比哪重複呼叫pause()會報錯，在hide()之後呼叫paused()會報錯。

3：在flash模式下不要試圖使用audio去播放音訊，雖然有外掛可以支援，但是問題很多。html5模式下本人沒有測試。

videojs 在flash模式下，以下情況有衝突：
1. video 在播中呼叫hide()會導致內部錯誤，如果先呼叫了pause()和hide(),再呼叫pause()同樣會導致內部錯誤。類似的情況還有呼叫dispose()
2. 在video是hide的情況下，去呼叫paused()會產生內部錯誤
3. 在hide的狀態下，呼叫show()再呼叫play會產生內部錯誤
4. 在檔案不存在的情況下，如果不呼叫dispose會產生內部錯誤。

綜上所述，對於單頁應用，videojs在隱藏時，內部的狀態就存在丟失的情況，會導致一系列的問題。解決的辦法就是播一次就建立一次。關閉就清理。經測試，這種模式就再也不會有錯誤了

僅管如此，作為一個開源免費的產品，已經是相當不錯了。

一款開源免費跨瀏覽器的視訊播放器--videojs使用介紹

autoplay

preload

poster

loop

width

height

Component Options

一款開源免費跨瀏覽器的視訊播放器--videojs使用介紹

【轉】一款開源免費跨瀏覽器的視頻播放器--videojs使用介紹

一款開源免費的WPF圖表控制元件ModernuiCharts

免費視訊播放器videojs中文教程

7款很棒的 HTML5 視訊播放器

HTML5的視訊播放器videojs

【原創】關於視訊播放器如何做到邊播邊快取？【如何用Vitamio做一款功能強大的視訊播放器補充篇】

[轉載］分享10款最棒的免費HTML5視訊播放器

推薦一款基於Java的音視訊處理開源專案--JAVE

android 音樂視訊播放器（github上十二款最著名的Android播放器開源專案）

推薦一款基於Java的音視訊處理開源專案 JAVE

一款開源恢復工具——scalpel

android黑科技系列——破解一款永久免費網絡訪問工具

lylmwt推薦] 五款開源免費的建站系統推薦

我們到底選擇哪一款開源的Socket框架？

記錄一款開源數據同步工具syncthing

萬能視訊格式轉換器是一款功能強大的全能視訊格式轉換軟體，支援多種視訊格式轉換。萬能視訊轉換器可以將R

跨瀏覽器網頁播放RTSP技術研究-未完待續

一段蛋疼的程式碼：超不清視訊播放器

安卓視訊播放器——ijkPlayer（Bilibili開源）

一款開源免費跨瀏覽器的視訊播放器--videojs使用介紹

autoplay

preload

poster

loop

width

height

Component Options

相關推薦