iPad上的HTML5視頻“黑屏”

Question

我正在建立一個內嵌視頻的網​​站。 這個網站也需要迎合iPad用戶，但我現在無法使用ol' video標簽。 我有一個視頻可以在瀏覽器中播放，但不幸的是在iPad上播放。

我只是拿着iPad的黑屏，沒有錯誤信息可言。

這是我的視頻代碼：

<video id="movie" width="790" height="250" controls >
    <source src="anim/intro.ipad.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
    <source src="anim/intro.webm" type='video/webm; codecs="vp8, vorbis"'>
    <source src="anim/intro.theora.ogv"  type='video/ogg; codecs="theora, vorbis"'>
</video>
<script>
    var v = document.getElementById("movie");
    v.onclick = function() {
        if (v.paused) {
            v.play();
        } else {
            v.pause();
        }
    };
</script>

這些視頻都是在關於HTML5視頻的教程之后創建的。 它們都使用Miro Video轉換器上的首選iPad設置進行編碼。

只是因為這很重要（我不確定會不會）我在iPad模擬器上測試視頻。

無論我做什么，我都無法播放視頻：

Answer 1

你確定你的編碼正確嗎？
試試這個來測試一下：

<video src="anim/intro.ipad.mp4" controls>  
      Your browser does not support the video element.  
</video>  

Answer 2

是你的.htaccess文件正確提供特定的視頻文件？

確保您的服務器使用正確的mime類型。 如果mime-type錯誤，Firefox將不播放Ogg視頻。 將這些行放在.htaccess文件中，以將正確的mime-types發送到瀏覽器

AddType video/ogg  .ogv
AddType video/mp4  .mp4
AddType video/webm .webm

參考： 適合所有人的視頻

另外，您是否使用定位修改視頻元素？ 我發現這也創造了這個黑色視頻屏幕。