Is there a way to prevent an HTML5 video from pausing or stopping when scrolling?

At the top of my page, there's a HTML5 video banner with the autoplay and loop attributes. However, when I start scrolling down, the video stops and doesn't resume when I scroll back up. I want the video to keep playing regardless of the user's scrolling actions.

I've checked the W3C spec but couldn't find any solution in the listed attributes. Is there an alternative method to disable this functionality?

The HTML and CSS are straightforward, so I'm considering using JavaScript to resolve this issue:

HTML:

<video preload="none" autoplay loop>
  <source src="/media/test.mp4" type="video/mp4">
</video>

CSS:

video {
  width: 100%;
  height: auto;
}

Any guidance on this problem would be greatly appreciated.

javascriptjquerycsshtmlvideo

Answer №1

If you want to implement a jQuery plugin to check if an element is in the viewport, you can try using the isInViewport plugin in the following way:

$('video').each(function(){
    if ($(this).is(":in-viewport")) {
        $(this)[0].play();
    } else {
        $(this)[0].pause();
    }
})

Answer №2

Everything is running smoothly on my end. If you need to adjust your viewport, simply modify the value of fraction = 0.5; in the provided code snippet.

var videos = document.getElementsByTagName("video"),
fraction = 0.5;
function checkScroll() {

    for(var i = 0; i < videos.length; i++) {

        var video = videos[i];

        var x = video.offsetLeft, y = video.offsetTop, w = video.offsetWidth, h = video.offsetHeight, r = x + w, //right
            b = y + h, //bottom
            visibleX, visibleY, visible;

            visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
            visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));

            visible = visibleX * visibleY / (w * h);

            if (visible > fraction) {
                video.play();
            } else {
                video.pause();
            }

    }

}

window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
div {padding-top:300px; width:320px;}

video {
   
    padding-bottom:300px;    
   
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>

<video id="video1" preload="auto"  loop="loop">
  <source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">>
  bgvideo
</video>
    


</div>

Answer №3

To prevent this, simply add the attribute data-keepplaying.

<video preload="none" autoplay loop>
  <source src="/media/test.mp4" type="video/mp4">
</video>

Answer №4

implementing fullpage.js

<video autoplay muted loop data-keepplaying>
   <source src="myvide.mp4" type="video/mp4">
</video>

functions correctly

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The ng-include directive is having trouble finding the partial HTML files

I've been working on setting up a basic tabset with each tab pulling content from a separate partial view with its own controller. To test everything out, I created three dummy HTML files with simple text only. However, I'm having trouble getting ...

javascripthtmlangularjsasp.net-mvcangularjs-ng-include

Tips for Drawing Lines and Preserving Them When a Condition is Met

I am currently utilizing Node.Js in an attempt to outline objects within an image based on certain conditions being met. My goal is to draw lines around specific portions of the image received from an API response. Whenever the response includes the keywor ...

javascriptnode.jscanvas

How can I send an item to a dialog in a different VueJS component?

Having multiple smaller components instead of one big component is the goal for my project. Currently, I have a component with a <v-data-table> that displays various items. Each row includes a button that, when clicked, opens a <v-dialog> showi ...

javascriptvue.jsdialog

Calculate the total with the applied filters

My goal is to sum the data from the Number table after applying lookup filters. The current issue is that the sum remains fixed for all values and doesn't take into account the filter. Here's the JavaScript function I'm using to search and ...

javascripthtml

Are elements in React Native PanResponder capable of being clicked?

While I have movable panresponders, I also require the ability to click on one for an onPress event. Is it achievable? At present, they are <View> elements. If I attempt to switch them to <TouchableOpacity> or a similar element, it results in ...

javascriptiosreactjsreact-nativeanimated

There was an issue in the v-on handler that resulted in an error: "TypeError: The property '$createElement' cannot be read because it is undefined."

I am encountering an issue with some basic input/output code. The task at hand is to receive input in Newick format and use it to create a tree. However, I am struggling to even receive the input correctly. Below is the HTML code snippet I am using: ...

htmlvue.js

The AJAX post does not properly redirect to the desired action

JavaScript: $("#containerr").on('click', '#select', function() { data = {}; val = { "name": 'John', "id": 10, } data.user = JSON.stringify(val); da ...

phpjqueryajaxcodeigniterpost

An issue occurred while trying to use the next() method with passport.authenticate('local') function

My current middleware setup involves the use of passport.js for user authentication before moving on to the next middleware: exports.authenticate = (req, res, next) => { passport.authenticate('local', (err, user, info) => { console.l ...

javascriptexpresspassport.js

Top way to include an HTML and javascript file in an Ext.Panel within Sencha Touch

My main goal is to efficiently include external HTML files and display them on an Ext.Panel in Sencha touch 2.3 by creating a wrapper module for the HTML file that can be instantiated using xtype, with an external Javascript file for event handling. Updat ...

javascripthtmlextjssencha-touchsencha-touch-2

Customize dropdown item colors in React using a color picker

I am currently utilizing a react color picker to create a personalized 16 color gradient. The process involves selecting a color from a dropdown menu and then using the color picker to make adjustments. This action updates an array that dictates the stylin ...

javascripthtmlcssreactjsreact-native

Tips for populating several input fields using an ajax callback

I have a functioning code below that needs to update input fields with values retrieved from an ajax call. I am unsure about the ajax success function that would allow me to callback php variables ($first, $last, etc.) to populate those input fields. Your ...

javascriptphpjqueryajax

Centering text both vertically and horizontally over an image using CSS

I've been attempting to center the div banner_title both vertically and horizontally within another div in this way... .box { text-align: center; } .banner_title { font-size: 32px; position: absolute; top: 50%; width: 100%; } .banner_titl ...

htmlcss

Modifying various states within React using the useState() hook

Curiosity strikes me - what actually happens when I modify more than one state in a handler function? Will they be updated simultaneously, or will the changes occur sequentially? const [x, setX] = useState(0) const [y, setY] = useState(0) const handlerFu ...

javascriptreactjsreact-hooks

Tips for creating a breakpoint in Sass specifically for a 414px iPhone screen size

For my latest project, I am utilizing sass and looking to incorporate a sass breakpoint or media query. My goal is to have the code execute only if the screen size is 414px or less. Below is my existing code: @include media-breakpoint-down(sm) { .sub-men ...

javascriptphphtmlmysqlcss

Organize information by time intervals using JavaScript

I am currently facing an issue where I need to dynamically sort data from the server based on different fields. While sorting is working flawlessly for all fields, I am encountering a problem with the time slot field. The challenge lies in sorting the data ...

javascriptangulartypescript

Establishing MQTT Connection in Ionic 3

I am facing a challenge with implementing Publish-Subscribe methods in my Ionic 3 application. After consulting the information on this page, I attempted to link MQTT with my Ionic 3 application. Can anyone guide me on how to successfully connect MQTT wi ...

javascriptangulartypescriptionic3mqtt

Monitor the incoming POST request

Is there a way to monitor incoming post requests in a form? I have the following form: <form method='post'> <input type='text' name'test' /> <input type='submit' name'submit' /> </for ...

phphtmlforms

Exploring the versatility of combining CSS classes with MUI 5 SX prop

Is there a way to use multiple CSS classes with the MUI 5 SX prop? I've defined a base class for my Box components and now I want to add a second class specifically for styling the text inside the Box. When I try to apply both classes like sx={styles. ...

javascriptreactjsmaterial-ui

Is there a way to enable data-add-back-btn using jQuery script?

Currently, I am utilizing jQuery 1.9.1 and jQuery Mobile 1.3.1 to define multiple pages within my project setup: <div id="q1" data-role="page" data-add-back-btn="false" data-back-btn-text="Home"> <div data-role="header" data-position="fixed" ...

javascriptjqueryhtmljquery-mobile

Is there a way to emphasize a particular day on the calendar obtained from the URL?

I have implemented FullCalendar functionality to enable users to select a specific date, retrieve data from a database, and then reload the page with that data. The page is updated with the selected date in the URL. However, when the page reloads, althoug ...

javascriptcssfullcalendar