i am Roger Li

就是Firefox顯示 "沒有找到支援格式與MIME類型的影片"

最近利用HTML5 的 <video> 設定影片到網頁上播放,大致順利。成功在桌面電腦﹑iPhone和我的Nexus5 上測試播放。正滿心歡喜以為可以收工時,再隨手也開啓了Firefox 來測試一番,竟然真的出了問題?!

在桌面的Firefox 無法播放
反覆把程式碼檢查都找不出異樣。當然! Source code 都是從W3C copy 得來的,不會錯吧。

在Firefox video player 的畫面顯示了"沒有找到支援格式與MIME類型的影片" 字句,如果是英文應該顯示 "No video with supported format and MIME type found"。
既然Firefox 有提過可能是MIME類型問題,就朝這方向去檢查。查看Firefox 的Browser Console,當中顯示:

HTTP "Content-Type" of "text/plain" is not supported. Load of media resource http://xxx.com/xxx/video.mp4 failed.

得知真是MIME type的問題。但為何明明已在程式碼描述了MIME type 還會是 "text/plain" ?

因為在client side 聲稱的 MIME type (或稱 Content-type) 可能對web server 並無意義,應該說它不懂得處理。正如你對一般用家解說一堆專有名詞,對方不懂如何反應。因此,解決方法是在web server 上(尤其Apache),需要先教懂它對應的MIME type。可以在 httpd.conf 或 .htaccess file加入以下資訊:

AddType video/mp4 mp4 m4v
AddType audio/mp4 m4a
AddType video/ogg ogv
AddType audio/ogg ogg oga
AddType video/webm webm

有一點要注意,如果你是修改.conf 檔,需要restart Apache service才生效。據說部分web hosting provider 會定時更新設置,無須人手restart server/service,可向service provider 查詢。


喜歡這篇文章嗎? 加我到你 Google+Follow @iamrogerli吧!

至於為何Firefox 才出現此MIME問題情況? 源於他們對標準的堅持。有興趣可參考此Mozilla的技術文章

發佈留言

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