Safari browser jumps to display HTML5 autoplay video

Question

I have a feed of Instagram content that includes recent posts. If the post is a video it displays as such: HTML5 video with autoplay, loop and muted attributes.

Aesthetically the result is very pleasing; however in Safari when the video has completed loading, the browsers skips down the web page to the position of the video. It doesn't do this in Chrome.

The video is not the main content so I do not want it to skip down the page.

Questions

Is there a W3C standard for autoplay? i.e is safari or chrome taking the default approach
What's the best way to remedy this?

Thoughts on soultion

I could turn off autoplay and instead trigger play with JS. This however seems a little bit unnecessary and creates a new dependency.

W3C doesn't seem to say if the autoplay video should automatically scroll to focus, so don't think there's a right or wrong. My preference would be to strip off the autoplay and have a user click to initiate any video - means the user always sees the video from the start, and controls bandwidth usage — Offbeatmammal
Thanks @Offbeatmammal I'm aware of the UX implications. Annoying that safari seems to force this. — slawrence10
I've been running into the same issue with a website I'm working on. I tried removing the autoplay attribute and triggering the video to play after a timeout in JS. However, as soon as the video is triggered to play, Safari jumps back down to the video as it would before. — Keenan Payne
@slawrence10 did you manage to find a solution to this issue? — Mathias W

pizzaslice pizzaslice · Accepted Answer · 2017-01-02T19:08:23

*Updated: Limit scroll length to 1500 units until 2 seconds after video starts playing...

<html>
<head>
    <script type="text/javascript">
    var scrollPosition = 0;
    var videoLoaded = false;
    function bodyOnScroll() {
    // this 1500 value might need to be tweaked less or more depending
    // on how far the scroll to your video is
    if(Math.abs(document.body.scrollTop - scrollPosition) > 1500 && !videoLoaded)
    {
    // don't scroll 
    document.body.scrollTop=scrollPosition; 
    }
    else
    {
    // reload the variable to match current position
    scrollPosition=document.body.scrollTop;
    }
    }
    function videoOnPlaying(){
    // wait 2 seconds and then disable the max scrollPosition
    // might want to tweak this too depending
    setTimeout(function () {
        videoLoaded = true;
    }, 2000);
    }
    </script>    
</head>
<body onScroll="bodyOnScroll();">
<video autostart onPlay="videoOnPlaying();"></video>

Safari browser jumps to display HTML5 autoplay video

1 Answers