HTML video not playing in Safari browser

Question

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.

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.