Question

我正在尝试在GWT中编写一个使用HTML5播放视频的网站。桌面上的一切都很好用，但iPhone和iPad上的移动Safari都不能播放视频。

我可以使用Video for Everybody播放视频。我甚至将代码复制到我自己的纯HTML页面，它完美无缺。如果我通过GWT小部件提供相同的代码，则移动版Safari将无法播放视频。在iPhone上，我看到一个灰色的盒子，在播放按钮周围有一个禁止标志，在iPad上它显示为一个黑盒子。

我确定我的doctype是<!DOCTYPE html>，但我不知道还有什么地方可以开始调试。也许是因为代码是通过javascript注入的？任何关于从哪里开始寻找的指示都将非常感激。

以下是我用于视频的确切代码：

<!-- "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&amp;image=poster.jpg&amp;file=http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4">
        <param name="movie" value="player.swf?autostart=true&amp;image=poster.jpg&amp;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和Vertical / Horizontal面板。我也升级到GWT 2.0.4。使用带有iOS 3.2.1的iPad，它仍然不能播放视频，但是当我指定它时，我会得到海报帧（与之前相同）。使用iPhone 4和iOS 4.0.1，视频播放没有问题。所以看起来无论问题是什么，它都是用iOS 4修复的。

Answer 1

好的，我一直试图解决这个问题。我可以将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/

http://www.ioncannon.net/programming/452/iphone-http-streaming-with-ffmpeg-and-an-open-source-segmenter/

修改

还有一个链接，这个完全帮助我解决了我的问题。看到我们使用nginx和unicorn来运行我们的Rails站点。不幸的是，nginx不支持字节范围请求，但apache确实如此。所以我在Apache上测试了这个并且它有效。以下是我用作参考的文章。

https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html

注意这行代码

curl --range 0-99 http://example.com/test.mov -o /dev/null

您可以使用它来查看您的服务器是否支持字节范围请求。

Answer 2

GXT不是正确的解决方案。您必须检测到您的浏览器是移动版Safari。查看检测mobile browsers in GWT的正确方法，然后创建包装视频标记的小部件。

Answer 3

正如我之前在4月21日的评论中所说，iPhone，iPad和所有我...不支持Flash，并且不会支持它。但是，iPhone OS 3.0支持HTML5视频标记，因为您可以在此article中阅读它，并在此one

中查看

AKAMAI是视频提供者，iPhone页面使用HTML5视频标记。

iPhone仅支持mp4视频或AAC音频文件。

Answer 4

以下代码适用于我的iPhone（请忽略软件包名称的GxtSandbox部分，正如您所见，没有使用GXT内容）。我在http://binarymuse.net/video/GxtSandbox.html处托管了一个页面，您可以在移动设备上访问该页面进行测试。

package net.binarymuse.gwt.gxt.client;

import com.google.gwt.core.client.EntryPoint;
import com.google.gwt.user.client.ui.DialogBox;
import com.google.gwt.user.client.ui.HTML;

public class GxtSandbox implements EntryPoint {

    public void onModuleLoad() {
        DialogBox box = new DialogBox(true);
            box.setWidget(new HTML("<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>" +
            "</video>"));
        box.center();
    }
}

当您尝试使用.ogv文件作为源时，会显示带有禁止标志的灰色框 - 也许Mobile Safari因某种原因试图使用它？

我建议创建一些使用延迟绑定的GWT类，为正在编译的浏览器排列创建正确的标记。您还可以在gwt-html5-media找到有用的内容。

Answer 5

要支持其他HTML5功能，您还可以看到GWT-Mobile-Webkit project。

Answer 6

我看到你有

<object width="640" height="384" type="application/x-shockwave-flash"

代码。

苹果移动产品减去笔记本电脑不支持闪存。

（这是我见过的最蠢的事情，我打赌苹果公司将在下一份许可协议中禁止使用空气和水。）

还可以尝试：

<!DOCTYPE html>

如果您使用的是html 5

Answer 7

已回答主题，但我确实找到了这个：

不要包含适用于iPad / iPhone 3.x支持的海报属性（）。 iPhone OS 3存在一个主要错误，这意味着播放不适用于同时使用poster属性和元素的任何HTML5视频标签。这在iPhone OS 4.0中得到了修复，但是当然现在仍然会有大量的OS 3用户。此错误不会影响您应保留的flashvars参数中海报图像的使用。

GWT＆amp;移动Safari中的HTML5视频

7 个答案: