在 iPad 上播放 HTML5 视频？

Question

我正在开发一个 Web 应用程序，但在处理适用于 iPad 的 HTML5 视频时遇到了问题。此代码在其他任何地方都可以正常工作，而不是 iPad。我只是得到一个视频帧，一个黑匣子。 HTML 是用 javascript 生成的，它本身不是硬编码的。

<video preload="true" src="places/video.mp4" class="c1" id="it" height="480" width="385" controls="">
</video>

有人知道可能是什么问题吗？ （视频使用 handbrake CLI 和 ffmpeg2theora 编码，如 Dive Into HTML5 中所述）。

我认为问题在于它不是http://serverlocation/places/video.ext。我将如何将其更改为那样（不保证我知道服务器位置。）我的一部分对此表示怀疑，因为图像是在没有 http:// 的情况下提供的，并且它们工作正常。

Answer 1

我想我知道问题所在。出现多个<source> 标签时，iPad 会窒息。你可以做的（简单地做）是使用 jQuery 来添加/删除对象。

HTML：

<div id="movie-wrapper">
  <div id="webkit-wrapper">
    <video width="480" height="360" controls="controls" src="places/video.mp4"></video>
  </div>
  <div id="other-wrapper">
    <!-- Do your video in a new wrapper for all others -->
  </div>
</div>

JS：

$(document).ready( function(){
  if($.browser.webkit) {
    $('#other-wrapper').remove();
  } else {
    $('#webkit-wrapper').remove();
  }
});

理想情况下，您将为每个主要浏览器设置一个条件，因为您至少需要三种类型的视频才能完全兼容。但是这样的事情应该可以解决 iPad webkit 阻塞。

编辑 重读您的评论，我想确定一件事——您在上面的视频元素上有controls="controls"。从我读过的所有内容来看，iPad 需要它来启用播放。否则，你会得到……黑屏。

您还可以查看是否存在编码问题，HTML5 Video "Black Screen" on iPad

编辑 其他注意事项： 网络服务器可能没有正确报告文件类型（如果传输时出现类型警告，您可以在错误控制台中检查）

如果正在加载海报，请尝试直接访问 mp4 视频的链接（查看 quicktime 是否在浏览器中播放）。

除此之外，我不知道 - 除非您使用无效示例发布指向您的页面的链接，否则会继续存在错误传达事实的情况。