在 iPad 上播放 HTML5 视频？

Posted 2023-05-08

【中文标题】在 iPad 上播放 HTML5 视频？

【英文标题】：HTML5 video playback on the iPad?

【发布时间】：2011-11-04 14:50:00

【问题描述】：

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

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

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

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

【问题讨论】：

视频是否使用 Theora 编解码器？ iPad 不支持 Theora。它们应该在 h.264 中。见tipb.com/2010/05/01/…

h.264/aac 和 ogg theora 都有。 iPad 只能看到第一个来源是 mp4。我禁用了 mp4 的类型，因为它也适用于 android 的diveintohtml5.org/video.html（最后一个示例）。 （还没有在安卓上测试过）

愚蠢的问题，但是 video.mp4 确实存在，对吧？尝试将type='video/mp4; codecs="avc1.4D401E, mp4a.40.2"' 添加到.mp4 <source> 标记中。

是的，当然！类型没有帮助：/你认为它没有在页面加载时加载是一个问题吗？

谢谢。这缩小了范围。

【参考方案1】：

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

HTML：

<div id="movie-wrapper">
  <div id="webkit-wrapper">
    <video   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 是否在浏览器中播放）。

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

【讨论】：

这是一个很好的答案，非常详细，但是它不起作用。编辑：实际上，让我再试一次。编辑2：是的，它不起作用。

好吧，我刚刚完全删除了ogv源，然后再试一次。仍然显示一个黑框。

嗯，你的编辑很有趣。我已经检查过了，它是一个浏览器渲染，因为我在 js 中将它输入为 controls ='controls'，这在其他所有浏览器中都很好

设置海报会怎样？

discussions.apple.com/thread/2590775?start=0&tstart=0 | support.microsoft.com/kb/922330