HTML5 Video tag not working in Safari , iPhone and iPad

Question

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).

View more solutions

Comments

[Bishbulb]

This was the problem for me as well... nothing worked until adding the controls attribute to the video tag.

[Jon]

This worked perfectly for me. For future readers, I am embedding an mp4 using the video tag that @niknak posted above. Thanks!

[Hozefa]

For me, adding the autoplay option worked. I have controls="false" in my code.

[fahad]

@Hozefa controls="false" is redundant; controls itself is a boolean that when present turns on the controls, and when not present there are no controls. See W3C spec

[Alex Cory]

Here's another good resource for configuring your server to support byte range requests.

[zzzzBov]

This doesn't attempt to answer the question in any way and might be useful as a comment. The question was about videos not playing at all, and has nothing to do with the autoplay feature.

[Ian Devlin]

Also, since controls is a Boolean attribute, the only valid values are none, an empty string, or its own name. True and false values are incorrect.

[Stuart Pinfold]

This was the only thing that worked for me trying to get a background video to loop, autoplay and without controls. Thanks Arvinda!

[Joost]

This was my issue. I'm using Flask with 'send_file' and 'send_from_directory' calls. I had to add 'conditional=True' argument to those calls.

[Erica Summers]

We didn't want to show the video controls even though that got it working on iphones for us, but adding "playsinline" worked perfectly and got it working on iphones as well as all other devices without showing controls. Perfect answer!

[Ethan Ryan]

Note for anyone using React: you'll need to use playsInline, in camelCase.

[RubyFanatic]

This is actually the best answer here.

[noel293]

this works 100%.. I noticed the issue is not just the browser itself rather than iPhones in general because my video wasn't playing in other browsers on iPhones as well

[Manabu Tokunaga]

This answer applies to me and worked in my Play Framework implementation (2.7) Use RangeResult.ofPath(finalPath, range, Some(mime)) and should work 2.7 and upwards.

[Manabu Tokunaga]

P.S.: Forgot to add how to get the range. That's this call. It comes in as "Range" ` val range = request.headers.get("Range")`

[jor]

This answer is no longer up-to-date.

[Greg Sadetsky]

Cheers, this was failing for me as well (using Python's built in http server did not work -- Mobile Safari refused to play the video because the web server didn't support byte-range requests). npmjs.com/package/http-server can be used for this purpose -- it does support byte-range!

[Victor Sokoliuk]

It's sad but for me, playsinline does not work.

[Jagannath Swarnkar]

I have the same issue (I'm a web developer but getting this issue in iphone), did you get any solution for this? if then please post it here

[arlomedia]

Sorry, I don't remember what project I was working on when I wrote this. My current projects use a CDN (Rackspace Cloud Files) that includes a tempURL function, which avoids the problem with session-based authentication.

[rolandforbes]

playsinline works perfectly for me too!

[OtotheA]

I'm not satisfied with this answer but i also tried all the other suggestions and this is the only thing that gets videos to work on iOS for me. I am also able to do it with no controls

[Steve C.]

I always remember "muted," but I always forget about "playsinline." That fixes it for me. 👍

[Jay Smoke]

Didn't work for me, am using Android