網站Web flash播放器 Video js使用教程

Video js下載地址：http://www.videojs.com/downloads/video-js-4.4.3.zip

包含video js文件 在播放頁面
CDN Version<link href="//vjs.zencdn.net/4.4/video-js.css" rel="stylesheet"><script src="//vjs.zencdn.net/4.4/video.js"></script>
本身本地的目錄
<link href="//example.com/path/to/video-js.css" rel="stylesheet"><script src="//example.com/path/to/video.js"></script><script>  videojs.options.flash.swf = "http://example.com/path/to/video-js.swf"</script>
寫html標籤播放影片
<video id="example_video_1" class="video-js vjs-default-skin"  controls preload="auto" width="640" height="264"  poster="http://video-js.zencoder.com/oceans-clip.png"> <source src="http://video-js.zencoder.com/oceans-clip.mp4" type='video/mp4' /> <source src="http://video-js.zencoder.com/oceans-clip.webm" type='video/webm' /> <source src="http://video-js.zencoder.com/oceans-clip.ogv" type='video/ogg' /></video>
設置video js 播放器參數
這段視頻。js嵌入代碼僅僅是一個HTML5視頻標籤,因此對於許多選項可使用標準的標籤屬性設置選項。
<video controls autoplay preload="auto" ...>

或者,您可使用data-setup屬性提供以JSON格式選項。這也是如何設置選項,不標準的視頻標記。

<video data-setup='{ "controls": true, "autoplay": false, "preload": "auto" }'...>

最後,若是你不使用data-setup屬性引起玩家的設置,您能夠傳遞一個對象與玩家選擇javascript中的第二個參數設置功能。

videojs("example_video_1", { "controls": true, "autoplay": false, "preload": "auto" });

我的的選擇

注意視頻標籤屬性

HTML5視頻標記屬性,只能真或假(布爾),您只需包括屬性(沒有等號)打開,或者排除它關機。例如,將控制:

錯誤

<video controls="true" ...>

正確

<video controls ...>

人們遇到的最大問題是試圖設置這些值爲false使用假的值(如控制=「false」)其實是相反的,設置屬性的值爲true由於仍然是包括在內。若是你須要的屬性包含一個等號XHTML驗證,您能夠設置的屬性的值和它的名字同樣(如控制=「控制」)。

控制

控制選項設置是否玩家控制,用戶能夠與之交互。沒有控制的惟一途徑開始播放的視頻播放屬性或經過API。

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

自動播放

若是播放是真的,就會開始播放視頻頁面加載(沒有任何用戶交互)。不支持的蘋果iOS設備。蘋果塊自動播放功能,以保護它的客戶從使用他們的不少不情願地(一般是昂貴的)月度數據計劃。須要用戶觸摸/點擊開始在這種狀況下的視頻。

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

預加載

預加載屬性告訴瀏覽器視頻數據是否應該開始下載只要視頻加載標記。選擇汽車、元數據和沒有。

「汽車」:當即開始加載視頻(若是瀏覽器贊成)。一些移動設備如iphone和ipad不會預加載視頻爲了保護其用戶的帶寬。這就是爲何稱爲「汽車」的價值,而不是更多的東西最終像「真正的」。

「元數據」:只加載視頻的元數據,包括信息,如視頻的時間和維度。

「沒有」:不要預加載任何視頻數據。這將等到用戶點擊開始下載。

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

海報

海報屬性集的圖像顯示在視頻開始前玩耍。這一般是一個框架的視頻或自定義標題屏幕。當用戶單擊圖像就會消失。

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

循環

循環屬性使視頻從新開始就結束。這能夠用於視覺影響像雲在後臺。

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

寬度

寬度屬性集視頻的顯示寬度。

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

高度

高度屬性設置顯示視頻的高度。

<video height="480" ...>or{ "height": 480 }
Video js  API函數的使用
videojs("example_video_1").ready(function(){  var myPlayer = this;  // EXAMPLE: Start playing the video.  myPlayer.play();});

// setting a property on a bare HTML5 video elementmyVideoElement.currentTime = "120";// setting a property on a Video.js playermyPlayer.currentTime(120);

事件監聽；
只監聽一次：
one( type, fn )

Add an event listener to be triggered only once and then removed

PARAMETERS:

• type String Event type
• fn Function Event listener
  

RETURNS:

• vjs.Component
  

myPlayer.one('play',function(){
//do something
});

每次都監聽：
myPlayer.on('pause',function(){
// do something
});

事件列表
EVENTS

durationchange
ended
error
firstplay
fullscreenchange
loadedalldata
loadeddata
loadedmetadata
loadstart
pause
play
progress
timeupdate
volumechange
resize 

 

轉自：

網站Web flash播放器 Video js使用教程http://www.hacktea8.com/thread-9617-1-1.html(出處: 鴻鵠IT網絡學院)