iPad上的HTML5视频出现“黑屏”问题

Question

我正在构建一个嵌入视频的网站。这个网站也需要适用于iPad用户，但是我目前在使用老旧的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模拟器上测试视频。

无论我做什么，视频都无法播放：

- Dan Hanly

---

我认为在移动版Safari中，通过JavaScript控制HTML5音频和视频是不起作用的。如果将mediaPlaybackRequiresUserAction设置为NO，则可以在UIWebView中实现。 - at0mzk

这是一个需要与iPad兼容的网站，而不是使用UIWebView的应用程序。 - Dan Hanly

@at0mzk：不，它们完全正常。我已经在我的上面使其工作。 - Petrogad

Answer 1

你确定编码是正确的吗？
试试这个来测试：

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

- gnur

---

我尝试了这个方法，但视频仍然显示为黑屏，没有显示“您的浏览器不支持视频元素”的消息。 - Dan Hanly

好的，那么这就是一个编码问题。如果你的编码正确，这段代码确实可以正常工作。 - gnur

仅仅为了梳理一下一个老问题，对我起作用的解决方案是直接从Quicktime 7编码视频，它允许你导出到移动设备。这自动预设了在设备上显示所需的正确设置，例如iPad。这个问题帮助我确定我的问题确实是编码问题。 - Dan Hanly

虽然已经解决了：你应该遵循苹果的手册。最常见的错误是在编码视频时没有使用基线配置文件。 - Jörn Berkefeld

Answer 2

你的 .htaccess 文件是否正确提供了特定的视频文件？

确保你的服务器使用了正确的 MIME 类型。如果 MIME 类型错误，Firefox 将无法播放 Ogg 视频。将以下代码添加到你的 .htaccess 文件中，以向浏览器发送正确的 MIME 类型。

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

参考： Video for Everybody 另外，你是否通过定位来修改视频元素？我发现这会导致黑屏问题。

- Petrogad

---

嗨@Federico，是的，我已经添加了这个。正如@gnur建议的那样，这是一个编码错误，我使用QuickTime正确地将其导出到iPhone而不是Miro，然后就没问题了。 - Dan Hanly