HTML video not playing in Safari browser

Question

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

Answer 1

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.

Answer 2

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

Answer 3

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>

Answer 4

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 )

Answer 5

Added an attribute "muted"

--- video muted autoplay---

in Chrome I have everything worked and Safari is also trying