HTML5 Video tag not working in Safari , iPhone and iPad

I am trying to create an html5 web page in which there is a small video like 13s , I converted the flash version of this video into 3 format : .ogv using fireFogg , .webm using firefogg also and .mp4 using HandBrake application the html script I used in my page :

<video  width="800" height="640" loop preload="false" autoplay  controls tabindex="0">
  <source src="xmasvideo/video.mp4" type="video/mp4" />
  <source src="xmasvideo/M&P-Xmas 2.ogv" type="video/ogv" />
  <source type="video/webm" src="xmasvideo/M&P-Xmas.webm" />
</video>

The video is working fine in Chrome and FireFox but not working at all neither in Safari on Desktop nor on iPhone or iPad , the output is simply a blank page that shows the controls of the the video tag but nothing is loaded

Note that the Safari version that I have supports HTML5 video

Solution 1:

I had same issue with apple devices like iPhone and iPad, I turned off the low power mode and it worked and you should also include playsinline attribute in video tag like this:

<video class="video-background" autoplay loop muted playsinline>

It only worked when including playsinline.

Solution 2:

Another possible solution for you future searchers: (If your problem is not a mimetype issue.)

For some reason videos would not play on iPad unless i set the controls="true" flag.

Example: This worked for me on iPhone but not iPad.

<video loop autoplay width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

And this now works on both iPad and iPhone:

<video loop autoplay controls="true" width='100%' height='100%' src='//some_video.mp4' type='video/mp4'></video>

Solution 3:

Your web server might not support HTTP byte-range requests. This is the case with the web server I'm using, and the result is that the video widget loads and a play button appears, but clicking the button has no effect. — The video works in FF and Chrome, but not iPhone or iPad.

Read more here on mobiforge.com about byte-range requests, in Appendix A: Streaming for Apple iPhone:

First, the Safari Web Browser requests the content, and if it's an audio or video file it opens it's media player. The media player then requests the first 2 bytes of the content, to ensure that the Webserver supports byte-range requests. Then, if it supports them, the iPhone's media player requests the rest of the content by byte-ranges and plays it.

You might want to search the web for "iphone mp4 byte-range".

Solution 4:

If your videos are protected by a session-based login system, Safari will fail to load them. This is because Safari makes an initial request for the video, then hands the task over to QuickTime, which makes another request. Since Safari holds the session info, it will pass the authentication, but QuickTime will not.

You can see this if you view your server access log ... first the request from Safari, then the request from QuickTime. Other browsers just make a single request from the browser itself.

If this is your problem, you might have to rework the video access to use temporary tokens or a limited time access from the original request. I'll update this answer if I find a more direct solution.

Solution 5:

For future searches as well, I had an mp4 file that I downscaled with Handbrake using handbrake-gtk from apt-get, e.g. sudo apt-get install handbrake-gtk. In Ubuntu 14.04, the handbrake repository doesn't include support for MP4 out of the box. I left the default settings, stripped the audio track out, and it generates an *.M4V file. For those wondering, they are the same container but M4V is primarily used on iOS to open in iTunes.

This worked in all browsers except Safari:

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.m4v" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

I changed the mime-type between video/mp4 and video/m4v with no effect. I also tested adding the control attribute and again, no effect.

This worked in all browsers tested including Safari 7 on Mavericks and Safari 8 on Yosemite. I simply renamed the same m4v file (the actual file, not just the HTML) to mp4 and reuploaded to our CDN:

<video preload="yes" autoplay loop width="100%" height="auto" poster="http://cdn.foo.com/bar.png">
            <source src="//cdn.foo.com/bar-video.mp4" type="video/mp4">
            <source src="//cdn.foo.com/bar-video.webm" type="video/webm">
</video>

Safari I think is fully expecting an actually-named MP4. No other combinations of file and mime-type worked for me. I think the other browsers opt for the WEBM file first, especially Chrome, even though I'm pretty sure the source list should select the first source that's technically supported.

This has not, however, fixed the video issue in iOS devices (iPad 3 "the new iPad" and iPhone 6 tested).