Menu
I'm trying to code a site in GWT that plays videos with HTML5. Everything works great on the desktop, but mobile Safari on both the iPhone and iPad do not play the video.
I can play a video using Video for Everybody. I've even copied the code to my own plain HTML page, and it works flawlessly. If I serve that same code via a GWT widget, mobile safari will not play the video. On the iPhone I see a gray box with a prohibitory sign around the play button, and on the iPad it shows up as a black box.
I've made sure my doctype is <!DOCTYPE html>, but I don't know where else to start debugging. Perhaps it it because the code is injected via javascript? Any pointers on where to start looking would be greatly appreciated.
Here is the exact code I am using for the video:
<!-- "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> EDIT:
I coppied the source that was being displayed on my iPhone/iPad using this bookmarklet. I then copied that code to a plain HTML page, which works flawlessly. It must have something to do with the video tag being generated via javascript. (I.E. I click on a button and the video tag is generated without a page refresh.)
I'm not sure if the issue is mobile safari, or the javascript GWT generates, but either way I'll have to find a workaround.
EDIT (7/23/10):
I've come back and re-visited the issue. Since I posted the question, I've completely changed the layout of the page to use LayoutPanels instead of DockPanels and Vertical/Horizontal panels. I've also upgraded to GWT 2.0.4. Using an iPad with iOS 3.2.1 it still does not play video, but I do get the poster frame when I specify it (same as before). With an iPhone 4 and iOS 4.0.1, the video plays without issue. So it looks like whatever the issue is, it's fixed with iOS 4.
920
GWT is not dead! It's simply suffering from PR misunderstanding. People think that you have to use the old widget system to use GWT, but you don't. Just use Elemento instead of widgets and REST calls instead of RPC.
GWT is a development toolkit for building and optimizing complex browser-based applications. Its goal is to enable productive development of high-performance web applications without the developer having to be an expert in browser quirks, XMLHttpRequest, and JavaScript.
We have a medium size project based on GWT in our company; It's a mature software, with more than 100,000 users and has performed well so far. However, GWT technology seems to become obsolete and I personally see no bright future for it, in competition with brand-new client-side rivals such as Angular.
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 mobile 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?
https://developer.apple.com/library/content/technotes/tn2224/_index.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"> 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.
https://developer.apple.com/library/content/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 server supports byte-range requests.
133
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
