Video autoplay on Safari 11

Question

Hi have noticed video does not auto play on safari 11 anymore. Below is my code it works on Chrome as it has to be muted. It just shows the poster image. Any Help.

<video width="100%" poster="poster_url.png" autoplay muted playsinline>
<source src="video_url.mp4" type="video/mp4">
</video>

Answer 1

The below autoplays for me on Safari 11.1.2 on OSX 10.12.6

<video width="100%" poster="poster_url.png" autoplay muted playsinline>
<source src="http://download.blender.org/peach/trailer/trailer_480p.mov" type="video/mp4">
</video>

The rules do changes quite often and it is also possible for a user or organisation to set their own preferences, so the Safari team recommend that you check in your code always to see if the video is able to auto play:

var promise = document.querySelector('video').play();

if (promise !== undefined) {
    promise.catch(error => {
        // Auto-play was prevented
        // Show a UI element to let the user manually start playback
    }).then(() => {
        // Auto-play started
    });
}

More details here at the time of writing:

• https://webkit.org/blog/7734/auto-play-policy-changes-for-macos/