GWT & HTML5 Video in Mobile Safari
- by KevMo
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>
