2012年5月31日 星期四

使用HTML5 撥放Video

若要利用 HTML5 video 標籤來撥放Video,你可以在video標籤中加上source項目,例如底下設定撥放四種不同格式的檔案

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>
    <video width="320" height="240" controls="controls">
        <source src="video/movie.mp4" type="video/mp4" />
        <source src="video/movie.webm" type="video/webm" />
        <source src="video/movie.ogv" type="video/ogg" />
        <source src="video/movie.ogg" type="audio/ogg" />
        你的瀏覽器不支援 video 標籤
    </video>
</body>
</html>


不過當你把程式放到IIS 7.5上時,Web Server不懂得這些影片的MIME Type,因此可能無法正確的撥放影片。這時只要開啟IIS管理工具,在Default Web Site設MIME TYPE :

image

部分的MIME Type與其Extension的對應,可以參考這個網站  MIME Types and File Extensions

新增一個MIME Type,如.mp4對應到 video/mp4

image

 

底下的MIME Type也是根據上步驟新增的,懶得重做一次來抓圖,把設好的直接貼上來。

image

 

image

 

image

底下是使用Firefox, chrome與ie瀏覽器,以筆者機器來測試不同格式檔案的結果,有列出來的表示影片正常顯示。

  • mp4
        chrome 19.0.1084.52 m
        ie9
  • webm
        chrome 19.0.1084.52 m
        Firefox12
  • ogv
        Firefox12
        chrome 19.0.1084.52 m
  • ogg
        Firefox12
        chrome 19.0.1084.52 m

沒有留言:

總瀏覽量