使用html5進行視頻播放

一直以來網頁大多是使用 flash 來播放視頻。在目前唱衰 flash 的環境下，HTML5 為我們帶來了一個網頁內視頻播放的解決方案—— <video>標簽。

在HTML5 中，可以通過HTML標簽“audio”和“video”來支持嵌入式的媒體，使開發者能夠方便地將媒體嵌入到HTML文檔中。

視頻格式

當前，video 元素支持三種視頻格式：

• Ogg = 帶有 Theora 視頻編碼和 Vorbis 音頻編碼的 Ogg 文件
• MPEG4 = 帶有 H.264 視頻編碼和 AAC 音頻編碼的 MPEG 4 文件
• WebM = 帶有 VP8 視頻編碼和 Vorbis 音頻編碼的 WebM 文件

嵌入媒體

html5嵌入媒體就和使用 <img> 標簽嵌入圖片一樣簡單，你只需要一個 <video> 標簽就可以：

<video src="../video/2.ogg" controls>
</video>

src 屬性來指定想要播放的視頻文件，controls 屬性可以顯示視頻播放控件（默認不顯示）。

可以在 <video> 標簽中設置內容，這些內容將在瀏覽器不支持 <video> 時展示：

<audio src="audio.ogg" controls autoplay loop>
<p>你的瀏覽器不支持video標簽</p>
</audio>

播放屬性

video 標簽中可以設置一些屬性來對播放器進行簡單的控制。

比如規定播放器大小為640px * 480px：

<video src="../video/2.ogg" height="480" width="640" controls>
    <p>你的瀏覽器不支持video標簽</p>
</video>

height 和 width 屬性的單位都是 pixels， 即像素。如果設置這些屬性，在頁面加載時會為視頻預留出空間。如果沒有設置這些屬性，那么瀏覽器就無法預先確定視頻的尺寸，這樣就無法為視頻保留合適的空間。結果是，在頁面加載的過程中，其布局也會產生變化。

再比如下面這個例子：

<video src="../video/2.ogg" height="480" width="640" autoplay loop muted controls>
    <p>你的瀏覽器不支持video標簽</p>
</video>

這個例子中又增加了三個屬性：
autoplay 屬性可以讓視頻在准備完畢后自動播放；
loop 屬性規定視屏循環播放，即播放完畢后再次從頭開始播放； muted 屬性讓視頻播放時默認是靜音狀態

接下來再看一個例子：

<video src="../video/2.ogg" height="480" width="640" preloader="auto" poster="../video/show.png" controls>
    <p>你的瀏覽器不支持video標簽</p>
</video>

這里出現兩個屬性： preloader 告訴了視頻在頁面加載時進行加載，並預備播放。如果使用 "autoplay"，則忽略該屬性。 preloader 有三個屬性值可設置：

• "none" 不緩沖文件
• "auto" 緩沖音頻文件
• "metadata" 僅僅緩沖文件的元數據 poster 則設定了視頻的展示圖像，包括播放前的展示圖像和下載的展示圖像；如果未設定此屬性，一般情況下播放前視頻區是黑色的。

上面三個例子包含了html5 <video> 標簽到目前新增的所有屬性，整理如下：

• height 播放器高度
• width 播放器寬度
• autoplay 視頻准備完畢后自動播放
• controls 顯示包含“播放”、“進度條”、“全屏”等操作組件的播放控件
• loop 設定視頻循環播放
• muted 靜音播放視頻
• preload 視頻在頁面加載時進行加載，並預備播放。如果使用 "autoplay"，則忽略該屬性。
• poster 視頻展示的圖像，即視頻播放前或下載時展示的圖像

<source> 標簽

可以在 <video> 標簽內使用 <source> 標簽來指定多個播放文件，來為不同的瀏覽器提供可支持的編碼格式。例如：

<video controls>
  <source src="../video/2.ogg" type="video/ogg">
  <source src="../video/2.mp4" type="video/mp4">
  <p>你的瀏覽器不支持video標簽</p>
</video>

瀏覽器會先加載 2.ogg， 如果不支持ogg格式或視頻不存在，則會加載2.MP4，以此類推。

<source> 標簽里，需要通過 src 來指定文件，通過 type 屬性來指定文件格式。

<track> 標簽

想要指定字幕文件，可以使用 <track> 標簽；track 使用方式與 source 相同。

<video controls>
  <source src="../video/2.ogg" type="video/ogg">
  <source src="../video/2.mp4" type="video/mp4">
  <track kind="captions" src="sampleCaptions.vtt" srclang="en">
  <track kind="descriptions" src="sampleDescriptions.vtt" srclang="en">
  <track kind="chapters" src="sampleChapters.vtt" srclang="en">
 
  <p>你的瀏覽器不支持video標簽</p>
</video>

<track> 標簽可以用於規定字幕文件或其他包含文本的文件。

<track> 標簽屬性包括：

• src 源文件
• kind 指定文件的使用目的，默認值為 subtitles ，可選值包括：
  • subtitles 定義此文件是字幕文件，就是大家熟悉的視頻底部字幕了
  • captions 將在播放器中顯示的簡短說明
  • descriptions 視頻內容的文本描述，適用於盲人或者視頻不可見時的提供的音頻描述。
  • chapters 定義章節，用於導航媒介資源
  • metadata 提供給腳本使用的內容，對用戶不可見
• label 為字幕文件指定一個名字，以供瀏覽器使用；當瀏覽器需要列出可用的字幕文件時，會使用此名字。
• srclang 軌道的語言，若、當 kind 屬性值為 "subtitles"時，該屬性是必需的

雖然 <track> 標簽為 video 提供了豐富的文本內容支持，但是目前瀏覽器對於 track 的支持率很不樂觀。

以上簡單介紹了HTML5中video標簽的使用方法。下一篇文章計划介紹video事件相關內容。想要進行更深入的了解可以在此查看文檔。

 

使用html5進行視頻播放 （二）

 

在播放視頻時，經常需要對播放進行控制。這時我們就需要使用 HTML5 <video> 元素的方法、屬性和事件。

暫停/播放

video 的 play()、pause() 方法分別用於實現視頻的播放、暫停。

通過對 video 標簽的 paused 屬性進行判斷，可以知道當前視頻的播放狀態。視頻處於播放狀態時，paused 為 false；處於暫停狀態時， paused 為 true。

示例：

<video id="video" preloader poster="../video/show.png" height="480" width="640">
    <source src="../video/trailer.MP4" type="video/mp4">
</video>
<button id="play_btn" type="button"></button>

var v = document.getElementById('video');

var playBtn = document.getElementById('play_btn');

playBtn.textContent = '>';

playBtn.addEventListener("click", function(){
    if(v.paused){
      v.play();
      playBtn.textContent = '||';
    }else{
      v.pause();
      playBtn.textContent = '>';
    }
});

音量

通過 volume 屬性可以控制播放音量。
volume 的值在 0~1 之間。

<video id="video" preloader poster="../video/show.png" height="480" width="640">
    <source src="../video/trailer.MP4" type="video/mp4">
</video>
<div>
    音量<button id="vol_inc_btn" type="button">+</button>
    <button id="vol_dec_btn" type="button">-</button>
</div>

var v = document.getElementById('video');

var volIncBtn = document.getElementById('vol_inc_btn');
var volDecBtn = document.getElementById('vol_dec_btn');

volIncBtn.addEventListener("click", function(){
  v.volume > 0.9?v.volume = 1:v.volume += 0.1;
})

volDecBtn.addEventListener("click", function(){
  v.volume < 0.1?v.volume = 0:v.volume -= 0.1;
})

muted 屬性表示是否靜音。值為 true 時，視頻被靜音。

<button id="muted_btn" type="button">靜音</button>

var mutedBtn = document.getElementById('muted_btn');

mutedBtn.addEventListener("click", function(){
  v.muted = !v.muted;
  mutedBtn.textContent = v.muted?'恢復':'靜音';

})

播放時間

video 的 currentTime 屬性用來獲取當前播放的位置。duration 屬性表示當前資源的長度。利用這兩個屬性，可以實現 當前時刻/總長度 格式的時間顯示。

<font id="now_time" size="3"></font>/<font id="duration" size="3"></font>

var nowTime = document.getElementById('now_time');
var duration = document.getElementById('duration');

//初始值設為0
nowTime.textContent = 0;
duration.textContent = 0;

//currentTime 和 duration 單位都是秒，我們寫一個函數來將時間顯示格式變為 mm:ss。
function parseTime(time){
  time = Math.floor(time);
  var _m, _s;
  _m = Math.floor(time/60);
  _s = time - _m*60;
  if(_m<10){
    _m = '0' + _m;
  }
  if(_s<10){
    _s = '0' + _s;
  }
  return _m + ':' + _s
}

v.addEventListener('timeupdate', function(){
  nowTime.textContent = parseTime(v.currentTime);
})

v.addEventListener('loadedmetadata', function(){
  console.log('loadedmetadata')
  duration.textContent = parseTime(v.duration);
})

這里用到了兩個事件：timeupdate 和 loadedmetadata。

timeupdate 事件在播放時間改變時觸發，在這里我們監聽播放時間的改變，然后同步更新顯示。

loadedmetada 在成功獲取資源長度時觸發。

進度條

在播放器中進度條是標配，我們在這里也簡單實現以下進度條功能。

<div id="progressWrap">
    <div id="playProgress">
    </div>
</div>

var progressWrap = document.getElementById("progressWrap");
var playProgress = document.getElementById("playProgress");

//計算當前進度條顯示長度，利用前面說過的 currentTime 和 duration。
function getProgress(){
  var percent = v.currentTime / v.duration;
  playProgress.style.width = percent * (progressWrap.offsetWidth) + "px";
}

// 鼠標在播放條上點擊時進行捕獲並進行處理
function videoSeek(e){
    if(v.paused || v.ended){
        v.play();
    }
    enhanceVideoSeek(e);
}
function enhanceVideoSeek(e){
    var length = e.pageX - progressWrap.offsetLeft;
    var percent = length / progressWrap.offsetWidth;
    playProgress.style.width = percent * (progressWrap.offsetWidth) + "px";
    v.currentTime = percent * v.duration;
}

progressWrap.addEventListener('click', function(e){
  videoSeek(e);
})

v.addEventListener('timeupdate', function(){
  getProgress();
})

播放速度

playbackRate 屬性代表當前的播放速度。正常播放速度為 1。 通過改變 playbackRate 的值，可以調整視頻的播放速度。

例如我們實現一個快進功能，使播放速度在 正常/2倍/4倍 間切換：

<button id="speed_up" type="button">快進</button>

var speedUpBtn = document.getElementById('speed_up');

var _speed = 1;

speedUpBtn.addEventListener('click', function(){
  changeSpeed();
});

function changeSpeed () {
  _speed = _speed * 2;
  if(_speed>4){
    _speed = 1;
  }
  v.playbackRate = _speed;
  speedUpBtn.textContent = _speed===1?'快進':'快進x' + _speed;
}

有了快進功能，一般還要有一個快退的功能。在這里可以用之前提到過得 currentTime 來簡單實現。

<button id="back" type="button">快退</button>

var backBtn = document.getElementById('back');
var _back_speed = 1;
var _t;

backBtn.addEventListener('click', function(){
  _back_speed = _back_speed * 2;
  if(_back_speed>4){
    v.playbackRate = 1;
    _back_speed = 1;
    clearInterval(_t);
  }else{
    v.playbackRate = 0;
    clearInterval(_t);
    //通過計時器來不斷改變當前播放位置，實現后退的功能
    _t = setInterval(function(){
      v.currentTime -= _back_speed * 0.1;
    },100)
  }
  backBtn.textContent = _back_speed===1?'快退':'快退x' + _back_speed;
})

加載狀態

通過事件 loadstart 和 loadeddata 可以監控資源的加載狀態。

當資源開始加載時，觸發 loadstart 事件。加載完畢時，觸發 loadeddata 事件。如果加載失敗，觸發 error 事件。

<p id="load_state"></p>

var loadState = document.getElementById('load_state');

v.addEventListener('loadstart', function(){
  loadState.textContent = '視頻加載中。。。';
})

v.addEventListener('loadeddata', function(){
  loadState.textContent = '加載完畢。';
})

v.addEventListener('error', function(){
  loadState.textContent = '加載失敗。';
})

全屏

現在主流瀏覽器基本上實現了全屏效果，但是不同瀏覽器實現不一樣：

// Webkit (works in Safari5.1 and Chrome 15)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();

// Firefox 10+
element.mozRequestFullScreen();
document.mozCancelFullScreen();

// W3C 提議
element.requestFullscreen();
document.exitFullscreen();

實現全屏效果，只需要調用這些方法即可。

<button id="fullscreen" type="button">全屏</button>

function requestFullScreen(de) {
  if (de.requestFullscreen) {
    de.requestFullscreen();
  } else if (de.mozRequestFullScreen) {
    de.mozRequestFullScreen();
  } else if (de.webkitRequestFullScreen) {
    de.webkitRequestFullScreen();
  }
}

var fullscreen = document.getElementById('fullscreen');

fullscreen.addEventListener('click', function(){
  requestFullScreen(v);
})

至此基本上實現了一個簡單的播放器的操控組件，包括 播放、暫停、時間顯示、音量調節、進度條、快進、快退、全屏等。我們的播放器張這樣：

哈哈，很粗糙，但是加上樣式的話會好很多吧~

除此之外， video 還提供了很多事件在上面的例子中並沒有用到，就列舉在下面，需要豐富功能時可以隨時查看~

完整代碼ChinTeo/html5videoDemo