views:

90

answers:

3

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"&gt;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>
A: 

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"' />
Fabrizio Calderan
I'm gonna try this one right away
UXdesigner
+2  A: 

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.
Shay Erlichmen
The original MP4 is : 1012 x 586 px / frame rate : 30 / codec: h264 MPEG-AWC (part 10) (avc1). It was given to me as an m4v and I renamed it to MP4. When embedding the video on the html5 tag , I declare it as a width="920px" height="560px" with autoplay.
UXdesigner
The size of the element (which should be defined without 'px' - it isn't CSS) and the size of the video are not the same thing. You are tell it to render a video that is too big for it to render in a small space. That doesn't suddenly give it the ability to render it.
David Dorward
Thank you guys, awesome ! Let me modify this and will post the answer.
UXdesigner
Thanks a lot for your help. This was the right answer. I had to reduce the size of the original video file to 720p width and it did the miracle.
UXdesigner
A: 

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

Jakob
Thanks for your answer, but the script doesn't have a Poster attribute. So that wouldn't be the case.
UXdesigner