Menu
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.
330
*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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
