[iphone] 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

For IOS, please use only mp4 source file. I have observed one issue in latest safari browser that safari browser cant able to detect source file correctly and because of this, video autoplay doesn't work.

Lets check below example -

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
        <source src="video/video.webm" type="video/webm"></source>
     </video>

As I have used mp4, webm in source files. Safari deosnt support webm but still in latest safari version, it would select webm and it fails video autoplay.

So to work autoplay across supported browser, I would suggest to check browser first and based on that you should generate your html.

So for safari, use below html.

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

For other than safari,

     <video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">
        <source src="video/video.webm" type="video/webm"></source>
        <source src="video/video.mp4" type="video/mp4"></source>
     </video>

I have found that although Safari does support HTML5 Video, the Quicktime Player has to be installed in order for this to work. On a site that I built that uses HTML5 Video, the user is alerted when using Safari, telling them they must have Quicktime installed, otherwise they will only be able to see video transcripts. Hope this helps.

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

I had exactly the same problem, my HTML video tag played well on Chrome & Mozilla, on Safari - controls appeared but video was blank. I tried to play with all the above attributes, remove/add muted, playsInline, etc. and nothing worked. Problem was with servers as described here as well. I had this - DID NOT WORK:

<video 
  muted
  playsInline
  controls
  style={{ width: `100%` }}>
  <source src={MfMfVideo} type="video/mp4" />
  <source src={MfMfVideoWebM} type="video/webm" />
</video>

and I just moved my video out to external library and I am fine on Safari now, it WORKS well:

<video 
  muted
  playsInline
  controls 
  style={{ width: `100%` }}>
  <source src={"https://blabla.com/video/dixneuf-video_r8xuvc.mp4"} type="video/mp4" />
  <source src={"https://blabla.com/videodixneuf-video_gyquuu.webm"} type="video/webm" />
  Sorry, your browser doesn't support embedded videos.
</video>

Adding 'playsinline' works for me on Iphone and Ipa if you don't mind your video being muted.

<video muted playsinline>
  <source src="..." type="video/mp4">
</video>

If you don't want your video being muted, but still want autoplay, maybe try to remove muted attribute with js: How to unmute html5 video with a muted prop

Working around for few days into the same problem (and after check "playsinline" and "autoplay" and "muted" ok, "mime-types" and "range" in server ok, etc). The solution for all browsers was:

<video controls autoplay loop muted playsinline>
    <source src="https://example.com/my_video.mov" type="video/mp4">
</video>

Yes: convert video to .MOV and type="video/mp4" in the same tag. Working!

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

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>

What helped in my case was dropping the audio track. It was silent before, but it had to be gone completely.

On ubuntu:

ffmpeg -i input.mp4 -vcodec copy -an output.mp4

And safari/desktop start to play the video

I know this is an old post, but the issue still seems to surface under different server environments. None of the above were the solution for me. In my case it came down to web optimization and making use gzip, or rather needing to disable it for videos.

I added this to my htaccess file and it took care it. SetEnvIfNoCase Request_URI .(?:ogv|ogg|oga|m4v|mp4|m4a|mov|mp3|wav|webma?|webmv)$ no-gzip dont-vary

I was already using these attributes on my tag: controls playsinline

is working but MacOs recently has autoplay policy for user: https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/, I resolved the same issue using a button to enable sound:

ejm:

<video autoplay loop muted id="myVideo">_x000D_
  <source src="amazon.mp4" type="video/mp4">_x000D_
  Sorry, your browser doesn't support embedded videos..._x000D_
</video>_x000D_
_x000D_
<button class="pausee" onclick="disableMute()" type="button">Enable sound</button>_x000D_
_x000D_
<script>_x000D_
var vid = document.getElementById("myVideo");_x000D_
function disableMute() { _x000D_
  vid.muted = false;_x000D_
}_x000D_
</script>

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.

If your using in REACT use playsInline this is working in all IOS devices

By using this code video will play in all browser in safari as well with ios devices... Go for it everyone (I have used this and working fine)

`

<video autoplay loop muted playsinline poster="video_thumbnail/thumbanil.jpg" src="video/video.mp4">_x000D_
     <source src="video/video.mp4" type="video/mp4"></source>_x000D_
  <source src="video/video.webm" type="video/webm"></source>_x000D_
  <source src="video/video.mov" type="video/mov"></source>_x000D_
</video>

`

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.

As of iOS 6.1, it is no longer possible to auto-play videos on the iPad. According to Apple documentation Autoplay feature is not working on Safari in all ios devices including iPad:

"Apple has made the decision to disable the automatic playing of video on iOS devices, through both script and attribute implementations.

In Safari, on iOS (for all devices, including iPad), where the user may be on a cellular network and be charged per data unit, preload and auto-play are disabled. No data is loaded until the user initiates it."

You can read more abut it in this Apple documentation

I had a similar issue where videos inside a <video> tag only played on Chrome and Firefox but not Safari. Here is what I did to fix it...

A weird trick I found was to have two different references to your video, one in a <video> tag for Chrome and Firefox, and the other in an <img> tag for Safari. Fun fact, videos do actually play in an <img> tag on Safari. After this, write a simple script to hide one or the other when a certain browser is in use. So for example:

<video id="video-tag" autoplay muted loop playsinline> 
    <source src="video.mp4" type="video/mp4" />  
</video>
<img id="img-tag" src="video.mp4">

<script type="text/javascript">
    function BrowserDetection() {

    //Check if browser is Safari, if it is, hide the <video> tag, otherwise hide the <img> tag
    if (navigator.userAgent.search("Safari") >= 0 && navigator.userAgent.search("Chrome") < 0) {
        document.getElementById('video-tag').style.display= "none";
    } else {
        document.getElementById('img-tag').style.display= "none";
    }               

    //And run the script. Note that the script tag needs to be run after HTML so where you place it is important. 
    BrowserDetection();
</script>

This also helps solve the problem of a thin black frame/border on some videos on certain browsers where they are rendered incorrectly.

Nothing worked for me except for compressing the video to be under 30mb. That did the trick but with very bad compression.

I had same problem - make sure the url for video asset is coming from secure domain. Our dev environment is http while production is secure. Due to the video being referenced via relative path, it wasn't working on development. Seems to be an issue that apple requires video to be secure...

I have faced same issue. Because my video frame size was too big. ie.2248 px apple support H.264 Baseline Profile Level 3.0 video, up to 640 x 480 at 30 fps. Note that B frames are not supported in the Baseline profile. check this for more info

If someone having same problem i solved it by enabling Byte-Range support on my server. It appears that Safari requires Byte range requests. In my case i use NGINX and i had to add proxy_force_ranges on; to my config file. Thanks to this answer!

For my use case there were two things:

1. I wasn't using the new attribute / webkit's policy playsinline;
2. My video / mime-type or whathathell wasn't properly encoded, so I used this site to convert it to all formats I needed: https://pt.converterpoint.com/

o/

I had this problem where .mp4 playback in Safari didn't work, but in other browsers it was fine. The error that I was seeing in the console was: error media src not supported. In my case this turned out to be a MIME type issue, but not because it wasn't declared as MIME type in IIS, rather that it was declared twice (once in IIS and also in a web.config file). I found this out by trying to download the .mp4 file locally on the server. I removed the config file from the location of the content I was trying to play and it fixed the issue. I could have just deleted the MIME type from the web.config file, but in this case the web.config file wasn't needed.

I've seen weird issues with a non trusted 'development' SSL certificates where mobile Safari will quite happily serve your page but refuses to serve a video to a 'fake' SSL certificate even if you've accepted the certificate.

To test you can deploy the video elsewhere - or switch to http (for the whole page) and it should play.

For a .mp4 this works ( safari mobile & desktop ) :

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

The controls=”true” mentioned in an above post make no sence to me as Apple says just use controls on its own.

Reference : “To use HTML5 audio or video, start by creating an  or  element, specifying a source URL for the media, and including the controls attribute. <video src="http://example.com/path/mymovie.mp4" controls></video>”

Source : https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Introduction/Introduction.html

In my dealings ( a small digression ) : I have found that uploading video from iPhone sends it to server as .quicktime. Ironically, this is the problem when trying to play back the video from the server on safari. ( mobile & desktop ).

So if ( like me ) you are experiencing a .quicktime ( or anything other than .mp4 ) problem in safari, here is a work around provided by apple. Note, I'm yet to test it myself and I'm not all that happy with it at a glance, just providing more info.

Reference : “Fall Back to the QuickTime Plug-in There is a simple way to fall back to the QuickTime plug-in that works for nearly all browsers—download the prebuilt JavaScript file provided by Apple, ac_quicktime.js, from HTML Video Example and include it in your webpage by inserting the following line of code into your HTML head: <script src="ac_quicktime.js" type="text/javascript"></script>”

Source : https://developer.apple.com/library/content/documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/AudioandVideoTagBasics/AudioandVideoTagBasics.html#//apple_ref/doc/uid/TP40009523-CH2-SW6

Update: For .quicktime rename to .mov prior upload to server ( in base64 filetype "data:video/mov;" ), skip ac_quicktime.js . . . will then work in html video tag; Hackerdy Hack.

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.