HTML5 and Javascript to play videos only when visible

Asked
Active3 hr before
Viewed126 times

5 Answers

html5javascript
90%

Using the isInViewport plugin and jQuery, here's my code for the task,Using jQuery, isInViewport, and Coffeescript, the complete solution for me looked like this:,This is how I managed to play a video only when the user scrolls to it. I used IsInViewport plugin. Hope you find it useful!, Taking a theorem as a definition and proving the original definition as a theorem

Using the isInViewport plugin and jQuery, here's my code for the task

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

Hi, I want to play and pause HTML5 videos based on their visibility with ScrollReveal. Kind of like how Twitter and Facebook does it for GIFs (only autoplay and loop the video when visible).,I got it mostly working but only for the first video. I think this is because I am using document.getElementById and id's should be unique in valid HTML. But I can't get it to work at all with document.getElementsByClassName (no video starts playing instead of only the first)., Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community. ,By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

var vid = document.getElementById("shots");

function playVid(el) {
   vid.play();
}

function pauseVid(el) {
   vid.pause();
}

ScrollReveal().reveal('video', {
   beforeReveal: playVid,
   beforeReset: pauseVid,
   reset: true
});
load more v
72%

turn the builder into a monitor object with build() …,and immediately start it with start(),Create an instance of a monitor builder and give it an instance of a VisSense object with our video.,We register a ‘play’ and a ‘pause’ callback …

In this simplified example we will just react when the element either becomes fully visible or goes completely off the screen becoming hidden.

var myVideo = document.getElementById('myVideo');

VisSense.VisMon.Builder(VisSense(myVideo))
   .on('fullyvisible', function() {
      myVideo.play();
   })
   .on('hidden', function() {
      myVideo.pause();
   })
   .build()
   .start();
load more v
65%

Fitting portrait videos in landscape players using the object-fit CSS property,Accessing more functionality through JavaScript,Here’s a portrait video placed in a landscape video player using the object-fit:contain CSS. The video is scaled down to fit the container. The portrait aspect ratio of the video is maintained so as to not distort the video resulting in letterboxing on the sides:,The <video> element also has methods, properties and events that can only be accessed through JavaScript. These include controlling playback speed, finding out the buffered parts of the video, reading any error states and more. You can find the full list here.

Here’s an example:

<video controls>
   <source src="vid1.webm" type='video/webm;codecs="vp8, opus"' />
   <source src="vid2.mp4" type='video/mp4;codecs="avc1.4D401E, mp4a.40.2"' />
</video>
load more v
75%

This creates a video player inside the browser like so:,These two lines remove the default browser controls from the video, and make the custom controls visible.,Asynchronous JavaScript overview,Introducing JavaScript objects overview

<video controls>
   <source src="rabbit320.mp4" type="video/mp4">
   <source src="rabbit320.webm" type="video/webm">
   <p>Your browser doesn't support HTML5 video. Here is a <a href="rabbit320.mp4">link to the video</a> instead.</p>
</video>
load more v

Other "html5-javascript" queries related to "HTML5 and Javascript to play videos only when visible"