8

Below code is working fine in Mozilla & Chrome. But in Safari the video doesn't play.

<video id="v-control" width="100%" autoplay="autoplay" loop>
    <source src="assets/img/web home page banner.mp4" type="video/mp4" 
    media="all and (max-width: 480px)">
    <source src="video-small.webm" type="video/webm" media="all and 
    (max-width: 480px)">
    <source src="assets/img/web home page banner.mp4" type="video/mp4">
    <source src="video.webm" type="video/webm">
</video>

I have tried preload for the video tag and If I add controls I should click on Play button. I dont need any controls for the video so I have removed controls.

Krishna
  • 1,089
  • 5
  • 24
  • 38
  • Your issue might be related to [https://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipad?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa](https://stackoverflow.com/questions/20347352/html5-video-tag-not-working-in-safari-iphone-and-ipad?utm_medium=organic&utm_source=google_rich_qa&utm_campaign=google_rich_qa) – Mahuna May 04 '18 at 06:43
  • According to the post @Mahuna referred to, you should add the `playsinline` attribute. – Maytha8 Oct 04 '19 at 23:14

7 Answers7

13

If the video is not working in Safari, but works in other browsers (Chrome, Firefox, Edge), you may be running into an issue relating to byte-range requests.

Byte-range requests are when a client asks a server for only a specific portion of the requested file. The primary purpose of this is to conserve bandwidth usage by only downloading small sections of the file as needed (a video in your case). If you inspect the Safari video request, you may notice a Range header set to bytes=0-1. This is Safari's way of testing if your HTTP servers accept byte ranges before requesting a larger chunk of data.

To fix your server config, take a look at Apple's recommendations. If you need a quick fix, you could move your videos to a different hosting server that has a proper config (and make sure to update all video source references).

jberg7777
  • 341
  • 3
  • 6
11

Safari has started (in the last year) preventing videos with audio tracks from auto-playing by default. They never specifically publicised this as far as I'm aware, however I believe it was part of the following changes:

Safari 11 also gives users control over which websites are allowed to auto-play video and audio by opening Safari’s new “Websites” preferences pane

(Source)

The only real workarounds for this are to either remove the audio track from the video, or have it muted by default.

<video id="v-control" width="100%" autoplay="autoplay" loop muted>

If your server can detect the requester's browser, you can apply this to just Safari, leaving other browsers as they were before.

DBS
  • 9,110
  • 4
  • 35
  • 53
5

In my case i'm using angular with service-worker and Safari is not loading mp4 files.

The service worker breaks the Byte-range requests, because it is like man in the middle between safari and the server, in the process the SW change the http response code from 206 to 200, this way Safari do not download the mp4.

To solve this I bypass the service worker when I need to show an mp4 video, using angular 8 is its simple, just add ngsw-bypass=true as a query string in the mp4 url and in works. ( https://....video.mp4?ngsw-bypass=true )

Cristian Sepulveda
  • 1,572
  • 1
  • 18
  • 25
  • Thank you, sir. I wasted half a day trying to resolve this issue and this finally worked on iOS Safari. As it turns out this issue is still very much present (see GitHub, Stackoverflow, ...) and yet nobody has suggested this workaround. – LukyFoggy Feb 08 '21 at 15:13
  • I also have same problem with angular, service-worker, safari. And solve with your answer! thanks! – BYUNGJU JIN Sep 05 '21 at 06:52
3

The Other work around also includes, adding attribute playsInline to the video tag along with muted.

For Example, something like this :

<video id="v-control" width="100%" autoplay="autoplay" loop muted playsInline>

The playsInline allows the browser to play the video right where it is instead of the default starting point.

Adesh Khanna
  • 172
  • 2
  • 9
2

Keep in mind that the videos you are serving need to contain the metadata required for streaming.

In my case, I was serving dynamic videos encoded in the server using ffmpeg. Using the -movflags faststart in the ffmpeg command made the videos available to be played on Safari

Alex Styl
  • 3,982
  • 2
  • 28
  • 47
-5

Added an attribute "muted"

--- video muted autoplay---

in Chrome I have everything worked and Safari is also trying

Антон Сайтостроев
  • 1
  • 1
  • 1
    It is unclear what your answer is suggesting. Where did you add this attribute? What do you mean by "Safari is also trying"? – James Whiteley May 04 '18 at 09:41
-5

I had a similar problem with videos not playing on Safari. The problem was my web server. I moved the video to another hosting server, loaded it from there and it worked.

e.g.

instead of:

<video src='/assets/myVideo.mp4' controls> </video>

do something like this:

<video src='https://anotherServer.com/assets/myVideo.mp4' controls> </video>
Brendan
  • 834
  • 1
  • 9
  • 20