html5 video does not autoplay in OSX Safari if positioned outside the viewport

1
votes

I´m trying to autoplay and inline an html5 video on a web page. This works fine in all browsers and all devices (except for some Android devices). However, if you place the video on the lower parts of the page (outside the viewport) and scroll down to it, the video does not autoplay anymore in OSX Safari (version 11). Other browsers like Firefox and Chrome don´t show this problem.

When you scroll down, having the video visible, and refresh the page, the video will autoplay however. 

<video id="videoheader" playsinline autoplay="autoplay" muted loop data-flashblockwhitelisted="true" poster="posterimage.jpg">
            <source src="video.mp4">
</video>

The website is still in development (and not online yet), but a good example of a page which shows this problem too, is:

http://www.pixomondo.com/

The video's in the lower parts of the page, won´t autoplay in Safari.

It seems that Apple has disabled autoplay feature for html5 video outside the viewport. In older versions of Safari (version 6.1.6) it performed well.

Any suggestions or code examples how to get around this problem?

1
htmlmacosvideosafariautoplay
There is no getting around it. It is the new reality in safari. – szatmary

1 Answers

1
votes

It looks like your video is autoplay and muted - there is a known issue which is addressed in one of the later Safari release which may addresses this [my bolding]:

Media

  • Implemented HTMLMediaElement dispatch of the onencrypted event
  • Fixed autoplay muted videos not playing when outside the viewport
  • Fixed HTMLTrackElement behavior to match standards

More info on the preview releases here: https://developer.apple.com/safari/technology-preview/release-notes/

You can download the preview releases here to verify if this solves your issue: https://developer.apple.com/safari/download/