使用HTML5 撥放影片

by vivid 4. 七月 2012 01:34

.NET Magazine國際中文電子雜誌
作 者:許薰尹
審 稿:張智凱
文章編號:N120712601
出刊日期:2012/07/04

HTML5定義了video標籤,可以用來撥放影片,這表示以後的瀏覽器便不需要外掛一些軟體就可以達到這樣的目地,video標籤可以和CSS與JavaScript整合,讓我們更容易進行操控影片或音樂的撥放。

HTML5有兩種多媒體項目可以用來撥放影片或聲音,一為video;一為audio。這兩者非常地類似,Video與audio都可以撥放聲音,而不同點在video會顯示影像;audio則不顯示。若您使用audio來撥放影片,則只會有聲音,不會顯示影像。

使用video標籤

在網頁中,你可以在video或audio標籤上設定src屬性,來指明要撥放的媒體來源檔案。範例如下,video標籤設定要撥放movie.mp4檔案:

<!DOCTYPE html>
<html xmlns = http://www.w3.org/1999/xhtml >
<head>
    <title> </title>  
</head>
<body >
     <video  src = "video/movie.mp4" width = "320" height = "240" autoplay = "autoplay"  />       
</body>
</html>

若要網頁載入時,就自動撥放影片,你可以在video或audio標籤上設定autoplay attribute,告訴瀏覽器要不要主動撥放影片或聲音。 autoplay是一個布林的屬性,若設為「autoplay」表示網頁載入時,就自動進行播放的動作。

圖一是此範例執行的結果:

clip_image002

圖 1:使用vide撥放影片。

IIS網站設定

不過當你把程式放到IIS 7.5上時,網站伺服器並不懂得這些影片的MIME型別,因此可能無法正確的撥放影片。這時您需要在IIS中進行一些設定,才可以正確地撥放影片。

開啟IIS管理工具,選取「Default Web Site」-「MIME TYPE」,請參考圖2所示:

clip_image004

圖 2:設定MIME Types。

在「Action」頁按下「Add」按鈕,進行新增,參考下圖設定File name extension為「.mp4」;然後將MIME type設定為「video/mp4」,請參考圖3所示:

clip_image006

圖 3:新增mp4 MIME Type對應。

以下為常用的幾種副檔名與MIME type的對應設定:

  • .webm:video/webm
  • .ogg:audio/ogg
  • .ogv:video/ogg

Video與audio項目常用的屬性

除了src與autoplay屬性之外,video與audio項目有一些常用的屬性,表列如下:

  • Loop:Loop attribute可以用來設定是否開啟重複撥放的功能,若沒有指定loop,則當video或audio撥放完畢時,就會停止,這也是預設的值。若指定loop,則撥放完畢時,瀏覽器就會自動地從頭開始再撥放。Loop只有在video或audio撥放時才會有用,參考範例如下所示:
<video  src = "video/movie.mp4" width = "320" height = "240"
         autoplay = "autoplay" 
         loop = "loop"  />    
  • preload:當網頁載入時,是否要載入video或audio,可以設定成三種值:
    • 「none」:網頁載入時,瀏覽器不載入video或audio資料。
    • 「metadata」:瀏覽器只下載metadata。
    • 「auto」:瀏覽器要儘可能下載資料,確保使用者能有最佳體驗,但可能會耗用許多系統資源。

若設定preload為空字串,如:「preload=""」,則意義等同於「preload="auto"」;若未此屬性,就決定在瀏覽器的預設值。若設定了autoplay屬性,則preload會被忽略。參考範例如下所示:


<video  src = "video/movie.mp4" width = "320" height = "240"
         autoplay = "autoplay" 
         loop = "loop"
         preload = "auto"
         />


  • volume: volume用來指定音量,它的值介於0與1之間。當設定為0時,代表靜音,設定為1時,聲音最大聲。
  • muted:用來設定是否靜音,底下範例設定為靜音:
<video  src = "video/movie.mp4" width = "320" height = "240"
       autoplay = "autoplay" 
       loop = "loop"
       preload = "auto"
       controls = "controls"
       muted = "muted"
       />      

Playback控制項

為了要方便讓使用者可以撥放、停止影片,你可以讓瀏覽器顯示Playback控制項,它包含撥放、暫停、停止按鈕,也包含控制音量的按鈕,參考範例如下所示:

<video  src = "video/movie.mp4" width = "320" height = "240"
      autoplay = "autoplay" 
      loop = "loop"
      preload = "auto"
      controls = "controls"
      />       

當你在瀏覽器撥放影片時,就會出現Playback控制項,底下是ie9的範例,請參考圖4所示:

clip_image008

圖 4:ie9的Playback控制項。

每個瀏覽器都設計了自己的Playback控制項,因此在不同瀏覽器上看起來的效果不太一樣,底下是Chrome的範例,請參考圖5所示:

clip_image010

圖 5:Chrome的Playback控制項。

替代內容

有些瀏覽器可能不支援HTML5中的video或audio標籤,此時您可以在標籤之中設定替代文字,例如以下範例:

<video  src = "video/movie.mp4" width = "320" height = "240"
         autoplay = "autoplay" 
         loop = "loop"
         preload = "auto"
         controls = "controls"        
         >       
         您的瀏覽器不支援影片的撥放
         </video>

當瀏覽器無法撥放影片時,將會顯示「您的瀏覽器不支援影片的撥放」字串,請參考圖6所示:

clip_image012

圖 6:顯示替代性文字。

Video特殊屬性

Video包含了視覺化的畫面,因此有一些特殊的屬性可以設定,包含了width與height。

width與height用來設定影片的寬度與高度,若沒有設定,則預設的值分別為300 * 150 pixel。您可以視情況來修改寬度與高度,例如以下範例將其修改為 640 Z* 480 pixel:

<video  src = "video/movie.mp4" width = "640" height = "480"
      autoplay = "autoplay" 
      loop = "loop"
      preload = "auto"
      controls = "controls"        
      >       
      您的瀏覽器不支援影片的撥放
      </video>

基本上影片會保留一定的長寬比,所以影片的寬度和高度最終可能會受長寬比的影響而和您標籤中設定的不同。

第二個特殊的屬性是poster。當第一次撥放影片,影片還在載入無法撥放前,你可以顯示一張圖片,就像影片的封面圖片一樣,讓使用者透過圖片了解影片的內容。要指定這張圖片,可以透過poster屬性,參考範例如下所示:

<video  src = "video/movie.mp4" width = "320" height = "240"
         loop = "loop"
         preload = "auto"
         controls = "controls"    
         poster = "demo.png"   
         >       
         您的瀏覽器不支援影片的撥放
         </video>

網頁執行的結果,請參考圖7所示:

clip_image014

圖 7:設定Poster。

設定多個video來源

由於不同的瀏覽器支援的影片格式不太相同,例如Firefox目前並不支援MP4格式影片的撥放,因此上述的範例在Firefox就無法正確執行,你會看到Firefox顯示「不支援的視訊格式或MIME類型」,請參考圖8所示:

clip_image016

圖 8:Firefox不支援mp4,顯示「不支援的視訊格式或MIME類型」。

你可以移除video開頭標籤中的src屬性設定,然後在video開頭與結尾標籤之中,加入多個source標籤,每個source標籤可以分別指定不同影片格式的檔案,參考範例如下所示:

<video width = "320" height = "240"
     autoplay = "autoplay" loop = "loop" preload = "auto" controls = "controls"
     poster = "demo.png">
     <source src = "video\movie.ogg" type = "video/ogg" />
     <source src = "video\movie.mp4" type = "video/mp4" />
     您的瀏覽器不支援影片的撥放
</video>

 

每個source標籤還包含了Type屬性,設定了MIME格式,來指明影片的類型,若瀏覽器不支援此MIME格式,就會跳過此項目,不進行下載的動作。

當透過ie9來存取這個內嵌video的網頁時,就會撥放movie.mp4檔案(ie9不支援ogg檔);若是透過Firefox 12來存取此網頁時,便會撥放movie.ogg檔案(Firefox不支援mp4)。原則上瀏覽器會視Source標籤定義的順序來決定要撥放哪一個影片,例如Chrome瀏覽器支援ogg與mp4檔案,所以當您使用Chrome瀏覽器執行上述的範例,Chrome瀏覽器會由上至下搜尋可撥放的影片,因此本範例會撥放的是movie.ogg檔案。若將標籤修改如下,先設定mp4的source標籤,再設定ogg的source標籤:

<video width = "320" height = "240"
        autoplay = "autoplay" loop = "loop" preload = "auto" controls = "controls"
        poster = "demo.png" >
        <source src = "video\movie.mp4" type = "video/mp4" />
        <source src = "video\movie.ogg" type = "video/ogg" />
        您的瀏覽器不支援影片的撥放
    </video>

則使用Chrome瀏覽器將會撥放movie.mp4檔案。

Video編碼與解碼

Video codec利用特殊的演算法來編碼與解碼video,不同的codec產生出的影片品質或檔案的大小都因不同演算法而不同,另外,有些是需要付費的。因為目前沒有一種codec是適用於所有的瀏覽器,你可以在source標籤中,設定利用type屬性來設定codec,讓瀏覽器不用去偵測該使用哪種codec來解碼,例如以下範例設定兩種codec,以逗號做區隔:

 

<video width = "320" height = "240"
        autoplay = "autoplay" loop = "loop" preload = "auto" controls = "controls"
        poster = "demo.png" >     
        <source src = "video\movie.mp4"
            type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2'           
              />      
        您的瀏覽器不支援影片的撥放
    </video>

不同的瀏覽器支援不同的codec,目前也沒有一個所有瀏覽器都支援的codec。

使用JavaScript控制影片撥放

video提供play方法可以用於撥放video,參考以下範例,在文件載入時,叫用play方法撥放影片:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
    <script type = "text/javascript">
        function play() {
            var video = document.getElementById("video");
            video.play();
        }
  
    </script>
</head>
<body onload = "play();">
    <video  id = "video" width = "320" height = "240"
         loop = "loop" preload = "auto" controls = "controls"
        poster = "demo.png">     
        <source src = "video\movie.mp4"
            type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2'           
              />      
        您的瀏覽器不支援影片的撥放
    </video>   
</body>
</html>

除了play方法之外,您也可以叫用pause方法來暫停影片的撥放動作。

整合jQuery撥放影片

jQuery可以讓JavaScript更容易撰寫,我們修改上個範例,使用jQuery來選取網頁中的video進行撥放。要使用jQuery 之前,可以先到http://jquery.com/網站,下載jQuery函式庫,然後在網頁中引用它們:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
    <script type = "text/javascript" src = "scripts/jquery-1.6.2.min.js"> </script>
    <script type = "text/javascript" >      
        $( function () {
            $("#video")[0].play();
        });
    </script>
</head>
<body >
    <video  id = "video" width = "320" height = "240"
         loop = "loop" preload = "auto" controls = "controls"
        poster = "demo.png">     
        <source src = "video\movie.mp4"
            type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2'           
              />      
        您的瀏覽器不支援影片的撥放
    </video>   
</body>
</html>

在網頁載入完成時,jQuery就會自動執行匿名方法中的程式碼,取得網頁中的id為video的video標籤,然後叫用play方法來撥放影片。

使用JavaScript設定autoplay

我們也可以使用JavaScript來控制autoplay屬性,使其自動進行撥放,例如以下程式範例將autoplay屬性設定為true:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
    <script type = "text/javascript" >
        function play() {
            var video = document.getElementById("video");
            video.autoplay = true;           
        }  
    </script>
</head>
<body onload = "play();" >
    <video  id = "video" width = "320" height = "240"
         loop = "loop" preload = "auto" controls = "controls"
        poster = "demo.png">     
        <source src = "video\movie.mp4"
            type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2'           
              />      
        您的瀏覽器不支援影片的撥放
    </video>   
</body>
</html>

不過因為有些瀏覽器可能會停用autoplay功能,所以若要進行自動撥放的動作,比較建議使用play方法。

play與pause事件

video與audio支援多種事件,當影片開始撥放時,會觸發play事件;而撥放中的影片暫停時,會觸發pause事件,例如以下程式碼所示:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
</head>
<body>
    <video id = "video" width = "320" height = "240" loop = "loop" preload = "auto" controls = "controls"
        poster = "demo.png">
        <source src = "video\movie.mp4" type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2' />
        您的瀏覽器不支援影片的撥放
    </video>
    <input id = "Button2" type = "button" value = "Play" onclick = "play();" />
    <input id = "Button1" type = "button" value = "Pause" onclick = "pause();" />
    <div id = "msg" > </div>
</body>
</html>
<script type = "text/javascript">
    var video = document.getElementById("video");
    function play() {
        video.play();
    }
    function pause() {
        var video = document.getElementById("video");
        video.pause();
    }
    video.onpause = function (e) {
        msg.textContent = "暫停撥放";
    }
    video.onplay = function (e) {
        msg.textContent = "撥放中";
    }
</script>

當使用者按下Play按鈕,便開始撥放影片,在onplay事件處理常式中,於網頁下方顯示「撥放中」訊息;當使用者按下Pause按鈕,便停止影片撥放,並在onpause事件處理常式中,利用程式碼顯示「暫停撥放」訊息,請參考圖9所示:

clip_image018

圖 9:使用Play與Pause事件。

撥放速度

你也可以利用video或audio的playbackRate屬性來設定撥放速度,撥放速度變動時,將會觸發onratechange事件,例如以下範例程式碼,當使用者按下ChangeRate按鈕時,便將影片撥放速度設為2倍,並在onratechange事件處理常式中,顯示「快轉中」訊息:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
</head>
<body>
    <video id = "video" width = "320" height = "240" loop = "loop" preload = "auto" controls = "controls"
        poster = "demo.png" >
        <source src = "video\movie.mp4" type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2' />
        您的瀏覽器不支援影片的撥放
    </video>
    <input id = "Button2" type = "button" value = "Play" onclick = "play();" />
    <input id = "Button1" type = "button" value = "Pause" onclick = "pause();" />
    <input id = "Button3" type = "button" value = "ChangeRate" onclick = "changeRate();" />
    <div id = "msg"> </div>
</body>
</html>
<script type = "text/javascript">
    var video = document.getElementById("video");
    function play() {
        video.play();
    }
    function pause() {
        var video = document.getElementById("video");
        video.pause();
    }
    function changeRate() {
        var video = document.getElementById("video");
        video.playbackRate = 2;
    }
    video.onpause = function (e) {
        msg.textContent = "暫停撥放";
    }
    video.onplay = function (e) {
        msg.textContent = "撥放中";
    }
    video.onratechange = function (e) {
        msg.textContent = "快轉中" + video.playbackRate;
    }
</script>

整合video與canvas

Video可以和Canvas整合,以便設計出更複雜的應用程式。參考以下範例,在網頁載入時叫用video的play方法撥放影片:

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml" >
<head>
    <title> </title>
    <style type = "text/css">
        canvas
        {
            border: solid 1px blue;
        }
    </style>
    <script type = "text/javascript" >
        function frame() {
            var context = document.getElementById("canvas").getContext("2d");
            var video = document.getElementById("video");
            context.drawImage(video, 0, 0);
            window.setTimeout(frame, 20);
        }

        function load() {
            var video = document.getElementById("video");
            video.preload = "auto";
            video.onplaying = frame;
            video.play();
        }
    </script>
</head>
<body onload = "load();" >
    <canvas id = "canvas"> </canvas>
    <video id = "video" width = "320" height = "240" loop = "loop" preload = "auto" controls = "controls"
        poster = "demo.png" >
        <source src = "video\movie.mp4" type = 'video/mp4; codecs="avc1.4D401E, mp4a.40.2' />
        您的瀏覽器不支援影片的撥放
    </video>
</body>
</html>

canvas可以搭配JavaScript來繪製二維的圖型,因此範例中透過window的setTimeout方法,每隔20毫秒,透過canvas的drawImage方法,定時將video撥放的影像繪製在canvas上。不過真正進行繪製動作的是瀏覽器,請參考圖10所示。

clip_image020

圖 10:整合video與canvas。

總結

HTML 5提供影片與聲音播放的功能,不用再依賴瀏覽器的外掛。只要瀏覽器有支援,您就可以使用它來撥放各式的多媒體。HTML 5的video與audio與JavaScript、jQuery緊密的整合,可以直接來控制多媒體的撥放。

Tags:

.NET Magazine國際中文電子雜誌 | 許薰尹Vivid Hsu | HTML

評論 (1) -

DotNet2Share
DotNet2Share Taiwan
2012/7/9 下午 04:49:56 #

很奇怪, 在 FaceBook 上無法直接分享本頁 (出現 "Page Not Found" 錯誤, 但鏈結卻是對的)。在 Google+ 上分享則沒有問題

回覆

新增評論




  Country flag
biuquote
  • 評論
  • 線上預覽
Loading






NET Magazine國際中文電子雜誌

NET Magazine國際中文電子版雜誌,由恆逸資訊創立於2000,自發刊日起迄今已發行超過500篇.NET相關技術文章,擁有超過40000名註冊讀者群。NET Magazine國際中文電子版雜誌希望藉於電子雜誌與NET Developer達到共同學習與技術新知分享,歡迎每一位對.NET 技術有興趣的朋友們多多支持本雜誌,讓作者群們可以有持續性的動力繼續爬文。<請加入免費訂閱>

月分類Month List