js插件---video.js如何使用

時間 2019-11-19

標籤插件 video.js video 如何使用欄目 JavaScript 简体版

原文原文鏈接

js插件---video.js如何使用

1、總結

一句話總結：仍是要去官方網站去看英文文檔。快點把英語學好啊。

一、如何快速使用這些插件（好比video.js）？

直接百度這些js如何使用就能夠了，這樣的文檔最精簡好用javascript

仍是得去看官網看apicss

二、爲何會用到video.js？

瀏覽器全兼容，因此以前用html5實現的視頻功能就須要進行改造了。html

video.js幾乎兼容全部的瀏覽器，而且優先使用html5，在不支持的瀏覽器中，會自動使用flash進行播放。html5

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

最近項目中的視頻功能，須要作到瀏覽器全兼容，因此以前用html5實現的視頻功能就須要進行改造了。在網上翻了個遍，試來試去，在全部的視頻播放器中，就數它最實際了。首先咱們來看看它的優勢：java

1.它是開源免費的，你能夠在github很容易的獲取它的最新代碼。jquery

2.使用它很是的容易，只要花幾秒鐘就能夠架起一個視頻播放頁面。git

3.它幾乎兼容全部的瀏覽器，而且優先使用html5，在不支持的瀏覽器中，會自動使用flash進行播放。github

4. 界面能夠定製，純javascript和css打造。說明文檔也很是的詳細。web

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

<!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個子元素。優化效果很是明顯。

初始化的時候，經常使用的有以下一些參數：

https://github.com/videojs/video.js/blob/stable/docs/guides/options.md

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使用介紹 - bjtqti - 博客園
http://www.cnblogs.com/afrog/p/4115377.html

3、video.js API 詳解

videojs github官網地址
 官方文檔地址

這裏簡單的對官方的英文參數列表作了一個簡單說明，並寫了一Jquery的適配調用

$(document).ready(function () {

        var player = $("video[data-video='example_video_1']").videoJs({
            /**
             * 自動播放：true/false
             * 參數類型：Boolean
             **/
            autoplay: false,

            /**
             * 是否顯示底部控制欄：true/false
             * 參數類型：Boolean
             **/
            controls: true,

            /**
             * 視頻播放器顯示的寬度
             * 參數類型：String|Number
             * 例如：200 or "200px"
             **/
            width: 300,

            /**
             * 視頻播放器顯示的高度
             * 參數類型：String|Number
             * 例如：200 or "200px"
             **/
            height: 300,

            /**
             * 將播放器置於流體模式下，計算播放器動態大小時使用該值。
             * 該值應該是比用冒號隔開的兩個數字（如「16:9」或「4:3」）。
             * 參數類型：String
             **/
            //aspectRatio:"1:1",

            /**
             * 是否循環播放:true/false
             * 參數類型：Boolean
             **/
            loop: false,

            /**
             * 設置默認播放音頻：true/false
             * 參數類型：Boolean
             **/
            muted: false,
            /**
             * 建議瀏覽器是否在加載<video>元素時開始下載視頻數據。
             * 預加載:preload
             * 參數類型：String
             * 參數值列表：
             * auto:當即加載視頻（若是瀏覽器支持它）。一些移動設備將不會預加載視頻，以保護用戶的帶寬/數據使用率。這就是爲何這個值被稱爲「自動」，而不是更確鑿的東西
             * metadata:只加載視頻的元數據，其中包括視頻的持續時間和尺寸等信息。有時，元數據會經過下載幾幀視頻來加載。
             * none:
             */
            preload: "metadata",

            /**
             * 視頻開始播放前顯示的圖像的URL。這一般是一個幀的視頻或自定義標題屏幕。一旦用戶點擊「播放」圖像就會消失
             * 參數類型：String
             **/
            // poster:"",

            /**
             * 要嵌入的視頻資源url，The source URL to a video source to embed.。
             * 參數類型：String
             **/
            // src:"",

            /**
             * 此選項從組件基類繼承。
             * 參數類型：Array|Object
             **/
            //  children:[],

            /**
             * 是否自適應佈局
             * 播放器將會有流體體積。換句話說，它將縮放以適應容器。
             * 若是<video>標籤有「vjs-fluid」樣式時，這個選項會自動設置爲true。
             * 參數類型：Boolean
             **/
            fluid: false,

            /**
             * 閒置超時
             * 值爲0表示沒有
             * 參數類型：Number
             **/
            inactivityTimeout: 0,

            /**
             * 語言
             * 參數類型：String
             * 支持的語言在lang目錄下
             */
            language: 'zh-CN',

            /**
             * 語言列表
             * 參數類型：Object
             * 自定義播放器中可用的語言
             * 注：通常狀況下，這個選項是不須要的，最好是經過自定義語言videojs。addlanguage().
             */
            languages: "",

            /**
             * 是否使用瀏覽器原生的控件
             * 參數類型：Boolean
             */
            nativeControlsForTouch: false,

            /**
             * 是否容許重寫默認的消息顯示出來時，video.js沒法播放媒體源
             * 參數類型：Boolean
             */
            notSupportedMessage: false,

            /**
             * 插件
             * 參數類型：Object
             */
            plugins: {},

            /**
             * 資源排序
             * 參數類型：Boolean
             * 在video.js 6，這個選項將默認爲true,
             * videojs Flash將被要求使用Flash技術
             */
    //        sourceOrder:false,

            /**
             * 資源列表
             * 參數類型：Array
             */
//            sources: [{
//                src: '//path/to/video.flv',
//                type: 'video/x-flv'
//            }, {
//                src: '//path/to/video.mp4',
//                type: 'video/mp4'
//            }, {
//                src: '//path/to/video.webm',
//                type: 'video/webm'
//            }],

            /**
             * 使用播放器的順序
             * 參數類型：Array
             * 下面的示例說明優先使用html5播放器，若是不支持將使用flash
             */
            //techOrder: ['html5', 'flash'],

            /**
             * 容許重寫默認的URL vtt.js，能夠異步加載到polyfill支持WebVTT。
             * 此選項將在「novtt」創建video.js（即video。novtt js）。不然，vtt.js捆綁video.js。
             * 參數類型：String
             */
           // "vtt.js":""
        }, function () {

        });
        console.log(player);
        console.log(player.bigPlayButton.controlTextEl_)
    });

入門級別參考，更多支持能夠查看官方文檔。

參考：video.js API 詳解 - CSDN博客
https://blog.csdn.net/zh_rey/article/details/78215968

4、video.js簡單使用

百度盤下載連接地址：連接：https://pan.baidu.com/s/1k_-ynaWk-XvropYBDp7sUg 密碼：ap3p

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>video.js</title>
 6     <!-- amazeui的默認引入 -->
 7     <link rel="stylesheet" href="../../../css/amazeui.min.css">
 8     <script src="../../../js/jquery.min.js"></script>
 9     <script src="../../../js/amazeui.min.js"></script>
10 
11     <!-- 插件對應的js和css -->
12   <link rel="stylesheet" href="../video.js/amazeui.videojs.css">
13   <script src="../video.js/video.js"></script>
14 
15     
16 </head>
17 <body>
18 <!--   <section class="amp-main">
19   <div class="am-container">
20     <h2><a name="%E4%BD%BF%E7%94%A8%E6%BC%94%E7%A4%BA" class="anchor" href="#%E4%BD%BF%E7%94%A8%E6%BC%94%E7%A4%BA"><span class="header-link"></span></a>使用演示</h2><hr>
21 <div class="doc-example">
22   <video id="example_video_1" class="video-js vjs-amazeui" controls preload="fdsajkfds" width="640" height="364"
23        poster="http://video-js.zencoder.com/oceans-clip.png"
24        data-setup="{}">
25   <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' />
26   <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' />
27   <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' />
28   <track kind="captions" src="video.js/demo.captions.vtt" srclang="en" label="English"></track>
29   <track kind="subtitles" src="video.js/demo.captions.vtt" srclang="en" label="English"></track>
30   <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
31 </video>
32 
33 
34 <script>
35   videojs.options.flash.swf = "video.js/video-js.swf";
36 </script>
37 </div>
38 
39 </section> -->
40  <video id="example_video_1" class="video-js vjs-default-skin" controls width="640" height="264">
41 
42  <source src="http://yun.it7090.com/video/XHLaunchAd/video01.mp4" type='video/mp4' />
43 
44 </video> 
45 
46 </body>
47 
48 </html>