Search code examples
ruby-on-railssafariruby-on-rails-5html5-video

Geting Safari browsers to autoplay videos?

I have a Rails 5.2.2 app that displays a short video sequence with autoplay. The sound track has been removed from the video.

<body>
  <div>
    <header>
      <video autoplay loop muted playsinline>
        <source src="/assets/.../my_video.mp4" type="video/mp4">
      </video>
    </header>
  </div>
</body>

The video autoplays nicely from Chrome, Firefox and Safari on mobile. But in MacOS Safari browsers it does not.

This previously accepted answer suggests that muting this video should be enough, but it seems not to be in my case. A middleware change has also been suggested, but the answer is 6 years old and is labeled as prove-of-concept only.

Changing the above video tag to:

<video autoplay loop muted playsinline poster="/assets/.../my_video.mp4">
  ...
</video>

seems to fix the problem, but I am having a hard time understanding why, and understanding if I really did solve the problem. I don't understand which of the two references that actually makes the video play. Could anyone explain?

Solution

  • Your original HTML5 looks fine and the test video below is tested and auto playing in MacOS 11.1 and safari 14.0.2.

    <body>
  <div>
    <header>
      <video autoplay loop muted playsinline>
        <source src="http://commondatastorage.googleapis.com/gtv-videos-bucket/sample/ForBiggerBlazes.mp4
" type="video/mp4">
      </video>
    </header>
  </div>
</body>

    The autoplay rules can change over time so it is worth checking you have a recent version of both the OS and Safari.

    If your video still fails to autoplay then it may be some issue with the video itself, or if your framework is generating the code with the final generated HTML5 code. If the problem persists, it would be worth adding the final browser source for the video div if possible.