ansaurus

Question

Answer 1

A:

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.

BinaryMuse 2010-04-18 05:54:16

I tested that link on an iPad. Same problem with the black box. It does work on my iPhone however. I've even cut down my code to just the video tag with the mp4 source, and I still have the same issue on both the iPhone and iPad. I'll take a look at that second link and see what I can find.

KevMo 2010-04-18 13:52:08

Answer 2

+1 A:

GXT isn't the right solution. You have to detect that your browser is mobile safari. see the right way to detect mobile browsers in GWT and then create a widget that wraps the video tag.

Cbe317 2010-04-19 13:15:41

I did create a GWT widget that wraps the video tag. The code in my question is coming from a widget.

KevMo 2010-04-20 00:09:08

I think the problem comes from Flash because iPad and iPhone don't support it. You should create a GWT Video widget that uses a VideoImpl generic HTML5 implementation and another VideoImplFlash (extending VideoImpl) Flash implementation for non HTML5 browsers. The choice of the implementation will be made by GWT browser detectionmecanism using deffered binding.See com.google.gwt.user.TextBox.gwt.xml com.google.gwt.user.client.ui.TextBoxBase.java, com.google.gwt.user.client.ui.impl.TextBoxImpl.java and com.google.gwt.user.client.ui.impl.TextBoxImplIE6.java for example in GWT code

Cbe317 2010-04-21 13:54:18

even using the widget to wrap just the video tag results in the same problem

KevMo 2010-04-22 16:30:03

Did you try to see the video on the iPhone in a simple HTML page (not GWT generated)? Sometimes you can have issues on videos in HTML5 because of frame rate or other things like that.

Cbe317 2010-04-22 23:27:43

I did use a simple HTML page, even one that serves up the same code as my GWT generated page. See my edited question.

KevMo 2010-04-22 23:49:02

If your GWT version works on Desktop browsers, it is not a GWT issue, but a browser (safari mobile) issue.Did your video play on iPhone with a simple HTML page containing only :<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>If it works you have to create an VideoImplIPhone that generates a simple video tag like above.

Cbe317 2010-04-23 00:11:44

I did create a widget with JUST the video tag. Same issue, doesn't play on either device. It will play however if that code is on a plain HTML page.

KevMo 2010-05-03 16:26:49

As I don't have an iPhone, I can't help you more on Iphone/iPad problem, but I think you can read the AKAMAI white paper on Video for iPhone delivery. They explain lots of things on iPhone video support (about Video encoding and BitRates)www.akamai.com/dl/akamai/iphone_wp.pdf

Cbe317 2010-05-10 19:50:18

Answer 3

A:

To support other HTML5 features, you can also see the GWT-Mobile-Webkit project.

Cbe317 2010-04-19 13:19:37

Answer 4

A:

I see you have

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

in your code.

The apple mobile products minus the laptop do not support flash.

(which is the dumbest thing I have ever seen, I bet Apple is going to disallow air and water in there next license agreement.)

Also try:

<!DOCTYPE html>

if your are using html 5

tcables 2010-04-28 14:43:56

so that's why farmville won't work on my iPhone... damn

KevMo 2010-04-28 15:26:26

Also, HTML 5 is not available till iPhone OS 4.0

tcables 2010-04-28 16:20:17

HTML 5 videos have been supported since iPhone OS 3.0

KevMo 2010-04-29 19:50:53

Answer 5

+1 A:

As I said before in my comment from Apr 21, iPhone, iPad and all i... don't support Flash, and won'tever support it. But iPhone OS 3.0 support HTML5 video Tag as you can read it in this article and see it in this one

AKAMAI is a video provider and the iPhone page uses HTML5 video tag.

iPhone supports only mp4 videos or AAC audio files.

Cbe317 2010-04-29 16:34:06

Answer 6

+1 A:

OK I have been trying to figure this out as well. I can get the HTML5 video to work in Firefox, Chrome, and Safari, just not moblie Safari for my iPad or iPhone.

My question to you guys is, how are you are you guys serving up the movie files? Have you guys read this page?

http://developer.apple.com/iphone/library/technotes/tn2010/tn2224.html

It talks about a segmenter to send the movie in seperate bits of data. Notice how they suggest to send the file...

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

Also, you might want to check out

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/

EDIT

One more link, this one totally helped me figure out my problem. See we using nginx and unicorn to run our Rails site. Unfortunately nginx does not support byte-range requests, but apache does. So I tested this out on Apache and it worked. Here is the article I used as a reference to figure this out.

http://developer.apple.com/safari/library/documentation/AppleApplications/Reference/SafariWebContent/CreatingVideoforSafarioniPhone/CreatingVideoforSafarioniPhone.html

note this line of code

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

You can use that to see if your browser supports byte-range requests.

Hope this helps some people out.

taelor 2010-05-01 04:28:58

Answer 7

A:

Answered thread already, but I did find this:

DO NOT INCLUDE THE poster ATTRIBUTE () FOR iPad / iPhone 3.x SUPPORT. There is a major bug with iPhone OS 3 that means that playback will not work on any HTML5 video tag that uses both the poster attribute and elements. This was fixed in iPhone OS 4.0, but of course for now there will still be a large number of OS 3 users. This bug does not affect use of the poster image in the flashvars parameter, which you should retain.

Blundell 2010-09-24 09:20:28

ansaurus

tags:

views:

answers:

GWT & HTML5 Video in Mobile Safari

related questions