[HTML5] HTML5 學習筆記:使用 video 標籤播放影片

[HTML5] HTML5 學習筆記:使用 video 標籤播放影片

1336579054_HTML_Logo借了 HTML 5 的書之後一直都還沒有看,

倒是 PT 搶先拿去看了,還做到了播放影片的部分,

不過因為遇到了一些問題,研究了一下,

原來是 IIS 7 的問題~

 

基本上要用 HTML 5 播放影片非常簡單,只要用 <video> 標籤就可以了,例如:

<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<video preload controls>
    <source src=“dolby.mp4”/>
</video>
</body>
</html>

 

在上面的範例中,在 <video> 標籤裡,用 <source> 指定影片的位置,

就是正確的語法了~

但是!!這樣寫好之後,卻發現不論在 Chrome 或 Firefox 上面都不能成功播放…

Firefox 還不支援 mp4 就算了,但 Chrome 理應要支援的…

試試直接在瀏覽器網址列上打 http://localhost/dolby.mp4 看看,

這才發現問題所在~ 

HTTP 錯誤 404.3 – Not Found
因為網頁伺服器上設定的多用途網際網路郵件延伸標準 (MIME) 對應原則,而無法提供您要求的網頁。如果此網頁為指令碼,請新增處理常式,而且如果它是應該要下載的檔案,請新增 MIME 對應。

看來是因為 IIS 看不懂 .mp4,因此沒有將 dolby.mp4 的內容提供給瀏覽器顯示~

 

解決方法很簡單:

1. 在 Windows 開始 > 搜尋 > IIS,選擇 Internet Information Services (IIS) 管理員

2. 選擇 MIME 類型 > 新增 > 副檔名寫 .mp4,對應的 MIME 類型是 video/mp4,就 OK 了!

mime_mp4    

3. 再試試在瀏覽器網址列上打 .mp4 檔案的位址,像是此例中的 http://localhost/dolby.mp4,

就可以發現瀏覽器可以正常的顯示影片(或是下載影片)~

這時候再去跑 HTML 5,應該是會正常的播放影片囉~~

(本頁面已被瀏覽過 1,350 次)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料