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

参考： 适合所有人的视频

另外，您是否使用定位修改视频元素？ 我发现这也创造了这个黑色视频屏幕。