HTML5 video tag not working on iOS, video not loaded

Question

The following code works fine on desktop browser, but on my iPad, the video is not loaded.

Is there a problem in my code ?

HTML :

<video id="helpVideoPlayer" width="788" height="327" controls>
    <source src="" type="video/mp4">
    Your browser does not support the video tag.
</video>

JS :

var videoUrl = "../video/test.mp4";
$("#helpVideoPlayer source").attr("src", videoUrl);
$("#helpVideoPlayer").load();

Answer 1

As mentioned in the comments, one common reason for this is the video format.

The apple guide to supported formats is here:

• https://developer.apple.com/library/ios/documentation/Miscellaneous/Conceptual/iPhoneOSTechOverview/MediaLayer/MediaLayer.html

and this is relevant part:

iOS supports many industry-standard video formats and compression standards, including the following:

• H.264 video, up to 1.5 Mbps, 640 by 480 pixels, 30 frames per second, Low-Complexity version of the H.264 Baseline Profile with AAC-LC audio up to 160 Kbps, 48 kHz, stereo audio in .m4v, .mp4, and .mov file formats
• H.264 video, up to 768 Kbps, 320 by 240 pixels, 30 frames per second, Baseline Profile up to Level 1.3 with AAC-LC audio up to 160 Kbps, 48 kHz, 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, 48 kHz, stereo audio in .m4v, .mp4, and .mov file formats
• Numerous audio formats, including the ones listed in Audio Technologies

Its worth understanding that MP4 is a 'container' specification for video and audio steams and the videos and audios in the container may use different encodings, so some mp4 files may be supported and others may not.

Answer 2

<video id="helpVideoPlayer" controls="true" width="788" height="327" src="" type="video/mp4"

</video>

It will work fine on both ipad on iphone