Html Video Not Playing in Safari Browser

HTML video not playing in Safari browser

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.

HTML5 video problems on Safari

This is indeed a bug* in Safari (at least 12.0.2), which doesn't accept to fetch this 300MB video as a single Request from the MediaElement.

They try desperately to make a Range request, but your host doesn't allow such requests. You can see it by trying to seek in the video while not fully loaded in other browsers.

You could workaround that issue by either

• Setting your server so that it accepts Range requests (that would be the best solution, even for other browsers).
• On error, fetch the whole file through AJAX and play it from memory (as a Blob). But this means waiting for the 400MB to be downloaded.
• On error, fetch the file and pipe a ReadableStream to a MediaSource's SourceBuffer using its appendStream() method. But no browsers supports it yet...

_{*Though I found this link which says that "HTTP servers hosting media files for iOS must support byte-range requests", so it is for iOS, but they probably have the same constraints for desktop. But that they do not support non-range requests sounds like a bug anyway as it goes against the specs.}

Why is my video not playing in safari webbrowser?

(1) Try using a full path to video. (2) Also rename your MP4 file name to not have spaces.

Code should be something like this:

<div class="small-mobile-container">
<div class="mobv">

<video preload="true" playsinline="" autoplay="" muted="" loop="" style="position:sticky; width: 100%; height: auto;" >
<source src="https://mywebsite.com/Pictures/Video_1.mp4"  />
Your browser does not support the video tag.
</video>

</div>
</div> 

Video auto play is not working in Safari and Chrome desktop browser

The best fix I could get was adding this code just after the </video>

<script>
    document.getElementById('vid').play();
</script>

...not pretty but somehow works.

UPDATE
Recently many browsers can only autoplay the videos with sound off, so you'll need to add muted attribute to the video tag too

<video autoplay muted>
...
</video>

---

Related Topics