我正在尝试使用 GWT 编写一个网站，该网站可以使用 HTML5 播放视频。在桌面上一切正常，但 iPhone 和 iPad 上的移动版 Safari 无法播放视频。
我可以使用 Video for Everybody 播放视频.我什至将代码复制到我自己的纯 HTML 页面中，并且它可以完美运行。如果我通过 GWT 小部件提供相同的代码，移动 safari 将不会播放视频。在 iPhone 上，我看到播放按钮周围有一个带有禁止标志的灰色框，而在 iPad 上，它显示为一个黑框。
我确定我的文档类型是 <!DOCTYPE html> ，但我不知道从哪里开始调试。也许是因为代码是通过 javascript 注入(inject)的？非常感谢任何关于从哪里开始寻找的指示。
这是我在视频中使用的确切代码:
<!-- "Video For Everybody" by Kroc Camen. see <camendesign.com/code/video_for_everybody> for documented code
=================================================================================================================== -->
<video width="640" height="360" poster="poster.jpg" controls autoplay>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4"></source>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg"></source>
<!--[if gt IE 6]>
<object width="640" height="375" classid="clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B"><!
[endif]--><!--[if !IE]><!-->
<object width="640" height="375" type="video/quicktime" data="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
<!--<![endif]-->
<param name="src" value="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
<param name="autoplay" value="true" />
<param name="showlogo" value="false" />
<object width="640" height="384" type="application/x-shockwave-flash"
data="player.swf?autostart=true&image=poster.jpg&file=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
<param name="movie" value="player.swf?autostart=true&image=poster.jpg&file=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" />
<!-- fallback image -->
<img src="poster.jpg" width="640" height="360" alt="Big Buck Bunny"
title="No video playback capabilities, please download the video below" />
</object><!--[if gt IE 6]><!-->
</object><!--<![endif]-->
</video>
编辑:
我使用 this bookmarklet 复制了在我的 iPhone/iPad 上显示的源代码.然后我将该代码复制到一个纯 HTML 页面，该页面运行完美。它必须与通过 javascript 生成的视频标签有关。 (即我点击一个按钮，视频标签在没有刷新页面的情况下生成。)
我不确定问题是移动 safari 还是 javascript GWT 生成的，但无论哪种方式，我都必须找到解决方法。
编辑 (7/23/10):
我回来重新审视了这个问题。自从我发布了这个问题后，我已经完全改变了页面布局以使用 LayoutPanels 而不是 DockPanels 和垂直/水平面板。我还升级到 GWT 2.0.4。使用装有 iOS 3.2.1 的 iPad，它仍然无法播放视频，但是当我指定它时我确实得到了海报框(与以前相同)。使用 iPhone 4 和 iOS 4.0.1，视频播放没有问题。所以看起来无论问题是什么，它都已在 iOS 4 中得到修复。
最佳答案
好的，我也一直在努力解决这个问题。我可以让 HTML5 视频在 Firefox、Chrome 和 Safari 中运行，但不能在我的 iPad 或 iPhone 上运行移动版 Safari。
我想问你们，你们是如何提供电影文件的？你们读过这个页面吗？
https://developer.apple.com/library/content/technotes/tn2224/_index.html
它谈到了一个分段器以单独的数据位发送电影。请注意他们如何建议发送文件...
<video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8">
This browser does not support HTML5 video.
</video>
此外，您可能还想看看
http://www.ioncannon.net/projects/http-live-video-stream-segmenter-and-distributor/
http://www.ioncannon.net/programming/1015/ipad-streaming-video-and-more/
编辑
还有一个链接，这个链接完全帮助我解决了我的问题。看看我们使用 nginx 和 unicorn 来运行我们的 Rails 站点。不幸的是，nginx 不支持字节范围请求，但 apache 支持。所以我在 Apache 上测试了这个并且它有效。这是我用作引用的文章来解决这个问题。
注意这行代码
curl --range 0-99 http://example.com/test.mov -o /dev/null
您可以使用它来查看您的服务器是否支持字节范围请求。
关于Mobile Safari 中的 GWT 和 HTML5 视频，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/2609717/