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 ?

Answer 1

Couple of things to try:

1. Use absolute URLs in ‘Video src’ attribute

2. Some devices may take little extra time to load the video

3. Change the device and try ( as you said)

Hope this will help.