Safari browser jumps to display HTML5 autoplay video

Question

Safari browser jumps to display HTML5 autoplay video

1.5k views Asked by slawrence10 At 22 December 2016 at 16:17

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.

Original Q&A

There are 1 answers

**pizzaslice** · Answer 1 · 2017-01-02 19: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>

TechQA.

Safari browser jumps to display HTML5 autoplay video

There are 1 answers

Related Questions in HTML

Related Questions in VIDEO

Related Questions in SAFARI

Related Questions in AUTOPLAY

Popular Questions

Popular Tags

Trending Questions