標籤：des style blog http io ar color os 使用
最近項目中的視頻功能，需要做到瀏覽器全相容，所以之前用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之前的版本用的。初始化的時候，常用的有如下一些參數：
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
功能組件（例中示範如何移除靜音按鍵）
You can set the options for any single player component. For instance, if you wanted to remove the muteToggle button, which is a child of controlBar, you can just set that component to false:
var player = videojs(‘video-id‘, { children: { controlBar: { children: { muteToggle: false } } }});
上面的代碼等價於：
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
這方便我們自己改寫樣式和js進行控制。當然，大多數情況我們不需要自己輪子，官方預設的皮膚已經做的非常漂亮了.
通常html5會比flash載入的更快，所以我們通常優先使用html5,同時把我們要進行的操作寫在回調裡邊。比如：
videojs("example_video_1").ready(function(){ var myPlayer = this; // EXAMPLE: Start playing the video. myPlayer.play();});
需要強調的是，如果使用flash優先，那麼你在本地調式的時候，要用http的方式訪問，否則你什麼也看不到。
更多的api調用請看這裡https://github.com/videojs/video.js/blob/stable/docs/api/vjs.Player.md
METHODSautoplaybufferedbufferedEndbufferedPercentcancelFullScreen deprecatedcontrolscurrentSrccurrentTimecurrentTypedisposedurationendederrorexitFullscreeninitisFullScreen deprecatedisFullscreenlanguageloadloopmutedpausepausedplayplaybackRateposterpreloadremainingTimerequestFullScreen deprecatedrequestFullscreenseekingsrcvolumeaddChild inheritedaddClass inheritedbuildCSSClass inheritedchildren inheritedcontentEl inheritedcreateEl inheriteddimensions inheritedel inheritedenableTouchActivity inheritedgetChild inheritedgetChildById inheritedhasClass inheritedheight inheritedhide inheritedid inheritedinitChildren inheritedname inheritedoff inheritedon inheritedone inheritedoptions inheritedplayer inheritedready inheritedremoveChild inheritedremoveClass inheritedshow inheritedtrigger inheritedtriggerReady inheritedwidth inherited
這裡我說一下幾個常用的方法：清理 dispose，hide() 隱藏，show() 顯示，play()播放，pause()暫停 幾本上就差不多了。
最後要說一下的就是事件。官方提示的事件如下：
EVENTSdurationchangeendedfirstplayfullscreenchangeloadedalldataloadeddataloadedmetadataloadstartpauseplayprogressseekedseekingtimeupdatevolumechangewaitingresize inherited
我們常用的有play,pause,ended，這些可以協助我們在必要的時候進行處理。不過呢，在實踐中，我發現flash模式和html5模式還是有一些不一致的地方。
比哪在flash模式中，在播放器暫停或隱藏之後，調用paused()方法報錯：VIDEOJS: Video.js: paused unavailable on Flash playback technology element.
調用hide()之後，調用show()方法，在flash模式中，會自動調用播放，而且是重新開始，而html5模式則不會。對於這一點，解決的辦法是在option中指定autoplay:false,這樣兩者行為就一致了。
一款開源免費跨瀏覽器的視頻播放器--videojs使用介紹
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
