Video.js 簡單的使用介紹

vedio.js 是一款視頻播放插件，它會自動檢測瀏覽器對 HTML5 的支持情況，如果不支持 HTML5 則自動使用 Flash 播放器。下面來介紹下它的使用：

引用video-js.cs樣式文件和video.js

<link href="video-js.css" rel="stylesheet" type="text/css">
<script src="video.js"></script>

 

設置flash播放器的路徑，如果你的瀏覽器不支持html5，將會使用flash播放

<script>
    videojs.options.flash.swf = "video-js.swf";
</script>

 

body部分，這里支持三種格式MP4,webm,ogg，也可以設置網絡路徑，poster：視頻的封面圖片

<video id="example_video_1" class="video-js vjs-default-skin" controls preload="auto" width="1280" height="800"
    poster="http://video-js.zencoder.com/oceans-clip.png"
    data-setup="{}">
    <source src="wangmaohuijieshao.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' />-->
    <track kind="captions" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
    <track kind="subtitles" src="demo.captions.vtt" srclang="en" label="English"></track><!-- Tracks need an ending tag thanks to IE9 -->
</video>

 

自動播放：

<script type="text/javascript">
    var myPlayer = videojs('example_video_1');
    videojs("example_video_1").ready(function () {
        var myPlayer = this;
        myPlayer.play();
    });
</script>

 

一些參數：

var myPlayer = videojs(“example_video_1″);//獲取對象,example_video_1就是video標簽的id值　
myPlayer.play();//播放
myPlayer.pause();//暫停
var whereYouAt = myPlayer.currentTime();//獲取播放進度：
myPlayer.currentTime(120);//設置播放進度：
var howLongIsThis = myPlayer.duration();//視頻持續時間，加載完成視頻才可以知道視頻時長，且在flash情況下無效
var whatHasBeenBuffered = myPlayer.buffered();//緩沖，就是返回下載了多少
var howMuchIsDownloaded = myPlayer.bufferedPercent();//百分比的緩沖
var howLoudIsIt = myPlayer.volume();//獲取聲音大小
myPlayer.volume(0.5);//設置聲音大小（0-1之間）
var howWideIsIt = myPlayer.width();//取得視頻的寬度
myPlayer.width(640);//設置寬度
var howTallIsIt = myPlayer.height();//獲取高度
myPlayer.height(480);//設置高度：
myPlayer.size(640,480);//一步到位的設置大小：
myPlayer.enterFullScreen();//全屏

//自定義事件
var myFunc = function(){
// Do something when the event is fired
};
//添加事件
myPlayer.addEvent(“eventName”, myFunc);
//刪除事件
myPlayer.removeEvent(“eventName”, myFunc);