22

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

我可以使用Video for Everyone播放视频。我什至已经将代码复制到我自己的纯 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>

编辑：

我使用这个小书签复制了在我的 iPhone/iPad 上显示的源代码。然后我将该代码复制到一个纯 HTML 页面，该页面运行良好。它必须与通过 javascript 生成的视频标签有关。（IE我点击一个按钮，视频标签在没有刷新页面的情况下生成。）

我不确定问题是移动 safari 还是 javascript GWT 生成的，但无论哪种方式，我都必须找到解决方法。

编辑（7/23/10）：

我已经回来并重新访问了这个问题。自从我发布问题以来，我已经完全改变了页面的布局以使用 LayoutPanels 而不是 DockPanels 和 Vertical/Horizo​​ntal 面板。我还升级到了 GWT 2.0.4。使用带有 iOS 3.2.1 的 iPad，它仍然无法播放视频，但是当我指定它时，我确实得到了海报框架（与以前相同）。使用 iPhone 4 和 iOS 4.0.1，视频播放没有问题。所以看起来无论问题是什么，它都已在 iOS 4 中得到修复。

4

7 回答 7

6

好的，我也一直在尝试解决这个问题。我可以让 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

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

于 2010-05-01T04:28:58.663 回答
1

正如我之前在 4 月 21 日的评论中所说，iPhone、iPad 和所有我...不支持 Flash，也永远不会支持它。但是 iPhone OS 3.0 支持 HTML5 视频标签，你可以在这篇文章中阅读它并在这篇文章中看到它

AKAMAI是一个视频提供商，iPhone 页面使用 HTML5 视频标签。

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

于 2010-04-29T16:34:06.010 回答
1

GXT 不是正确的解决方案。您必须检测到您的浏览器是移动 safari。查看在 GWT中检测移动浏览器的正确方法，然后创建一个包装视频标签的小部件。

于 2010-04-19T13:15:41.087 回答
0

The following code works on my iPhone (please ignore the GxtSandbox part of the package name, no GXT stuff is being used, as you can see). I have a page hosted at http://binarymuse.net/video/GxtSandbox.html that you may visit on your mobile device for testing.

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();
    }
}

The gray box with the prohibitory sign displays when you try to use the .ogv file as the source--perhaps Mobile Safari is trying to use that for some reason?

I would recommend creating some GWT classes that use deferred binding to create the right tag for the browser permutation being compiled. You may also find something at useful at gwt-html5-media.

于 2010-04-18T05:54:16.560 回答
0

已经回答了线程，但我确实找到了这个：

不包括用于 iPad / iPhone 3.x 支持的海报属性 ()。iPhone OS 3 存在一个重大错误，这意味着播放将无法在任何同时使用海报属性和元素的 HTML5 视频标签上工作。这在 iPhone OS 4.0 中已修复，但当然现在仍然会有大量 OS 3 用户。此错误不会影响您应该保留的 flashvars 参数中海报图像的使用。

于 2010-09-24T09:20:28.843 回答
0

要支持其他 HTML5 功能，您还可以查看GWT-Mobile-Webkit 项目。

于 2010-04-19T13:19:37.183 回答
0

我看你有

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

在你的代码中。

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

（这是我见过的最愚蠢的事情，我敢打赌，苹果将在下一个许可协议中禁止空气和水进入。）

也试试：

<!DOCTYPE html>

如果您使用的是 html 5

于 2010-04-28T14:43:56.480 回答