Mp4 video won't play in the iPad

Question

Good day, I've been working on this project and learning how to place a video on the ipad, and all the other browsers.

But after writing the code for this, I noticed that the only thing I get from the iPad is the first keyframe of the video, but the video is not playing. When I press the "Play" button that appears in that screen of the ipad, the video won't just play. Weird is, the script has an autoplay command.

What is wrong with this script ? Is there a better way of doing this ? I've spent way too much time on this and I can't get it done. I checked this on Safari for Windows, Firefox, Internet Explorer and it works everywhere except for the iPad.

<video controls width="920px" height="560px" autoplay>  
<!-- if Safari/Chrome-->  
<source src="video.mp4" type="video/mp4" /> 
<source src="video.ogv" type="video/ogg" /> 
<!--If the browser doesn't understand the <video> element, then reference a Flash file. You could also write something like "Use a Better Browser!" if you're feeling nasty. (Better to use a Flash file though.)-->  
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="920" height="560" id="csSWF">
                <param name="movie" value="video_controller.swf" />
                <param name="quality" value="best" />
                <param name="bgcolor" value="#1a1a1a" />
                <param name="allowfullscreen" value="true" />
                <param name="scale" value="showall" />
                <param name="allowscriptaccess" value="always" />
                <param name="flashvars" value="autostart=true&showstartscreen=false&color=0x1A1A1A,0x1A1A1A" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="video_controller.swf" width="920" height="560">
                    <param name="quality" value="best" />
                    <param name="bgcolor" value="#1a1a1a" />
                    <param name="allowfullscreen" value="true" />
                    <param name="scale" value="showall" />
                    <param name="allowscriptaccess" value="always" />
                    <param name="flashvars" value="autostart=true&showstartscreen=false&color=0x1A1A1A,0x1A1A1A" />
                <!--<![endif]-->
                    <div id="noUpdate">
                        <p>The video content presented here, requires a more recent version of the Adobe Flash Player. If you are using a browser with JavaScript disabled please enable it now. Otherwise, please update your version of the free Flash Player by <a href="http://www.adobe.com/go/getflashplayer">downloading here</a>.</p>
                    </div>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
            <script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
    swfobject.registerObject("csSWF", "9.0.28", "expressInstall.swf");
</script>
</video>

Answer 1

What are the spec of the mp4 video (resolution and profile)?. The iPad doesn't support all the varieties of mp4.

---

Did you try a simple html without the flash and the ogv source?

---

It looks like your over sepc:

iPad Supported Video Format

• H.264 video (up to 720p, 30 frames per second; main profile level 3.1 with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats)
• MPEG-4 video, up to 2.5 Mbps, 640 by 480 pixels, 30 frames per second, Simple Profile with AAC-LC audio up to 160 Kbps, 48kHz, stereo audio in .m4v, .mp4, and .mov file formats.

Answer 2

maybe it's better if you also specify the basic media codecs

<source src="video.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />

Answer 3

Could this be it?

"iOS will not recognize the video if you include a poster attribute. The poster attribute of the element allows you to display a custom image while the video is loading, or until the user presses “play.” This bug is fixed in iOS 4.0, but it will be some time before users upgrade."

Found it in Dive into HTML5