Take a video like this:

  <video autoPlay controls muted preload="metadata" height="100%" width="100%" playsInline>
    <source src="https://video.dailymail.co.uk/video/1418450360/2015/02/1418450360_4056782948001_nerdist--1424015378606.mp4" type="video/mp4" />
    Sorry, your browser doesn't support embedded videos.
  </video>

It has autoPlay, controls, muted, preload, and playsInline.

On Chrome and Safari, the video will not start until some portion of it enters the user's viewport.

On Firefox, the video plays immediately, regardless of whether or not it is in the viewport.

Why?

Here is a codepen that demonstrates this. You'd have to try it on the various browsers to get a sense of what I'm talking about.

CodePudding user response：

From the support of mozilla:

Some kinds of video can be played by Firefox directly. That uses the built-in HTML5 video player, in combination with the Windows Media Foundation (to decode MP4/H.264 video).

So it is default Firefox. I suggest that you could stop all the videos (mutch better user experience) and start when it is visible with JS or change it to <iframe> so the firefox don't mess it. The support suggest you to change hidden settings that help you control when videos start but this will only affect your browser not the others.

code solution with JS to play only when is visible.

CodePudding user response：

1. Try Incognito Mode · 2. Disable Hardware Acceleration · 3. Allow Websites to AutoPlay Video · 4. Disable Add-Ons · 5. Clear Browser Cache