Kev*_*vMo 22 video gwt html5 mobile-safari
我正在尝试在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&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>
编辑:
我使用这个书签来覆盖我的iPhone/iPad上显示的来源.然后我将该代码复制到一个纯HTML页面,该页面完美无瑕.它必须与通过javascript生成的视频标记有关.(IE我点击一个按钮,生成的视频标签没有页面刷新.)
我不确定问题是移动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修复的.
好吧,我一直试图解决这个问题.我可以将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
您可以使用它来查看您的服务器是否支持字节范围请求.
以下代码在我的 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找到一些有用的东西。
| 归档时间： |
|
| 查看次数： |
16588 次 |
| 最近记录： |