HTML5 Video does not play in mobile device

Question

I am using HTML5 Video with this code:

<div id="lightBox1" class="lightBox">
    <video id="video" controls preload="metadata">
        <source width="100%" height="470" src="/ImageworkzAsia/video/iworkzvid.mp4" type="video/mp4">
        <source width="100%" height="470" src="/ImageworkzAsia/video/iworkzvid.ogv" type="video/ogg">
        <source width="100%" height="470" src="/ImageworkzAsia/video/iworkzvid.m4v" type="video/m4v">
        <p style="text-align:center;">Your browser does not support HTML5 Video.</p><br />
    </video>
</div>

The problem is that it does not play in Mobile Safari but it does play in desktop Safari. It also plays in chrome, firefox as expected. I have not yet tested this in an android device. Any ideas ?

i do not know how to do so. xD pls instruct me on how I should do this. — AJ Naidas

IndrajithP IndrajithP · Accepted Answer · 2012-05-24T06:45:07

Couple of things to try:

Use absolute URLs in 'Video src' attribute
Some devices may take little extra time to load the video
Change the device and try ( as you said)

Hope this will help.

HTML5 Video does not play in mobile device

2 Answers