Menu
Is there anyway to autoplay a HTML5 video only when the user has the video (or a certain percentage of the video) in the browser viewport?
977
Your browser does not support HTML5 video. To show a video in HTML, use the <video> element: Your browser does not support the video tag. The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes.
HTML5 defines DOM methods, properties, and events for the <video> element. This allows you to load, play, and pause videos, as well as setting duration and volume.
To show a video in HTML, use the <video> element: Your browser does not support the video tag. The controls attribute adds video controls, like play, pause, and volume. It is a good idea to always include width and height attributes.
Start by adding a script tag underneath the video file. Since we only have a small amount of JavaScript for this technique, we'll just add it as an inline script, but you can use an external file if you prefer.
Let's say our browser window W currently scrolled to y-position scrollTop and scrollBottom
Our video will NOT be played when its position is at V1 or V2 as below snapshot.
$(document).ready(function() { // Get media - with autoplay disabled (audio or video) var media = $('video').not("[autoplay='autoplay']"); var tolerancePixel = 40; function checkMedia(){ // Get current browser top and bottom var scrollTop = $(window).scrollTop() + tolerancePixel; var scrollBottom = $(window).scrollTop() + $(window).height() - tolerancePixel; media.each(function(index, el) { var yTopMedia = $(this).offset().top; var yBottomMedia = $(this).height() + yTopMedia; if(scrollTop < yBottomMedia && scrollBottom > yTopMedia){ //view explaination in `In brief` section above $(this).get(0).play(); } else { $(this).get(0).pause(); } }); //} } $(document).on('scroll', checkMedia); }); 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
