Advertisement
Advertisement


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

1
91
4/27/2017 3:56:23 PM


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>
2014/09/04

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

2015/02/28

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.

2015/07/10

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

2015/01/22

Just add a muted attribute and everything will work fine.

The source of this answer is here: https://webkit.org/blog/6784/new-video-policies-for-ios/

By default, WebKit will have the following policies:

<video autoplay> elements will now honor the autoplay attribute, for elements which meet the following conditions:

  • <video> elements will be allowed to autoplay without a user gesture if their source media contains no audio tracks.
  • <video muted> elements will also be allowed to autoplay without a user gesture.
  • If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
  • <video autoplay> elements will only begin playing when visible on-screen such as when they are scrolled into the viewport, made visible through CSS, and inserted into the DOM.
  • <video autoplay> elements will pause if they become non-visible, such as by being scrolled out of the viewport.

<video> elements will now honor the play() method, for elements which meet the following conditions:

  • <video> elements will be allowed to play() without a user gesture if their source media contains no audio tracks, or if their muted property is set to true.
  • If a <video> element gains an audio track or becomes un-muted without a user gesture, playback will pause.
  • <video> elements will be allowed to play() when not visible on-screen or when out of the viewport.
  • video.play() will return a Promise, which will be rejected if any of these conditions are not met.

On iPhone, <video playsinline> elements will now be allowed to play inline, and will not automatically enter fullscreen mode when playback begins. <video> elements without playsinline attributes will continue to require fullscreen mode for playback on iPhone. When exiting fullscreen with a pinch gesture, <video> elements without playsinline will continue to play inline.

2018/07/08