網站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網絡學院)