GWT&；移动Safari中的HTML5视频

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

我可以用电脑播放视频。我甚至将代码复制到我自己的纯HTML页面上，它工作得非常完美。如果我通过GWT小部件提供相同的代码，mobile safari将不会播放视频。在iPhone上，我看到一个灰色框，在播放按钮周围有一个禁止标志，而在iPad上，它显示为一个黑色框

我已经确定我的doctype是

，但是我不知道从哪里开始调试。也许是因为代码是通过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生成的视频标记有关。（即，我点击一个按钮，视频标签在不刷新页面的情况下生成。）

我不确定问题是mobilesafari还是javascript-GWT生成的，但无论如何我都必须找到解决办法

编辑（2010年7月23日）：

---

我回来后又重新讨论了这个问题。自从我发布了这个问题，我已经完全改变了页面的布局，使用了LayoutPanels，而不是DockPanels和垂直/水平面板。我还升级到了GWT2.0.4。使用带iOS 3.2.1的iPad，它仍然不能播放视频，但当我指定它时，我会得到海报框（和以前一样）。使用iPhone4和iOS4.0.1，视频播放不会出现问题。因此，无论问题是什么，iOS 4都解决了。

以下代码适用于我的iPhone（请忽略软件包名称中的

GxtSandbox

部分，如您所见，没有使用GXT内容）。我有一个网页托管在，你可以访问你的移动设备进行测试

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

package net.binarymuse.gwt.gxt.client；
导入com.google.gwt.core.client.EntryPoint；
导入com.google.gwt.user.client.ui.DialogBox；
导入com.google.gwt.user.client.ui.HTML；
公共类GxtSandbox实现入口点{
moduleload（）上的公共void{
DialogBox=新建DialogBox（true）；
setWidget（新的HTML（“”）+
"" +
""));
box.center（）；
}
}

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

---

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

GXT不是正确的解决方案。

---

您必须检测到您的浏览器是mobile safari。查看检测并创建包装视频标签的小部件的正确方法。

要支持其他HTML5功能，您还可以查看。

我看到您有

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

---

正如我之前在4月21日的评论中所说的，iPhone、iPad和所有我喜欢的东西。。。不支持Flash，也不会支持它。
但是iPhoneOS3.0支持HTML5视频标签，因为你可以在这里看到它，在这里看到它

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

iPhone只支持mp4视频或AAC音频文件。
好的，我也一直在努力解决这个问题。我可以在Firefox、Chrome和Safari中使用HTML5视频，但不能在iPad或iPhone上使用移动Safari

我想问你们的问题是，你们是如何提供电影文件的？你们读过这一页吗


它涉及到一个分段器，以单独的数据位发送电影。注意他们建议如何发送文件

<video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8">
    This browser does not support HTML5 video.
</video>

您可以使用它来查看您的服务器是否支持字节范围请求。
已回答线程，但我确实发现了以下问题：

不包括支持iPad/iPhone 3.x的海报属性（）。iPhoneOS3存在一个主要缺陷，这意味着在任何同时使用海报属性和元素的HTML5视频标签上播放都不起作用。这在iPhoneOS4.0中是固定的，但当然现在仍然会有大量的OS3用户。此错误不会影响flashvars参数中海报图像的使用，您应该保留该参数。
我在iPad上测试了该链接。黑匣子也有同样的问题。不过，它在我的iPhone上也能正常工作。我甚至已经将我的代码缩减到只有mp4源代码的视频标签，我在iPhone和iPad上仍然存在同样的问题。我将查看第二个链接，看看我能找到什么。我确实创建了一个包装视频标签的GWT小部件。我问题中的代码来自一个小部件。我认为问题来自Flash，因为iPad和iPhone不支持它。您应该创建一个GWT视频小部件，该小部件使用VideoImpl通用HTML5实现和另一个针对非HTML5浏览器的VideoImplFlash（扩展VideoImpl）实现。实现的选择将由GWT browser detectionmecanism使用不同的绑定进行。请参阅com.google.gwt.user.TextBox.gwt.xml com.google.gwt.user.client.ui.TextBoxBase.java，例如，在gwt代码中，com.google.gwt.user.client.ui.impl.TextBoxImpl.java和com.google.gwt.user.client.ui.impl.TextBoxImplIE6.java即使使用小部件仅包装视频标签也会导致相同的问题。您是否尝试在简单的HTML页面（不是gwt生成的）中查看iPhone上的视频？有时，由于帧速率或其他类似的原因，HTML5中的视频可能会出现问题。如果您的GWT版本在桌面浏览器上运行，则这不是GWT问题，而是浏览器（safari mobile）问题。你的视频在iPhone上播放时是否只包含一个简单的HTML页面：如果它工作，你必须创建一个生成
<video src="http://devimages.apple.com/iphone/samples/bipbop/bipbopall.m3u8">
    This browser does not support HTML5 video.
</video>

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