javascript - Pause and play video when in viewport - Stack Overflow

admin管理员组

文章数量:1291393

I was experimenting with play and pause when a video is within the viewport... when I was searching around I found the following code.. which unfortunately didn't work:

jQuery

    $(window).scroll(function(){
        if ($(window).scroll(100)){
            $('#video').play;
        }
    });

HTML

    <video preload="auto" loop="loop" id="background">
        <source src="background/background1.mp4" type="video/mp4"> </source>
        <source src="background/background1.webm" type="video/webm"> </source>
    </video>

I've also tried the code on the following page: /

but I couldn't get it to work either, is there anyone who could point me in the right direction?

Is it even practical to play and pause video's when in / out of the viewport, wouldn't users be startled by sounds suddenly appearing?

I was experimenting with play and pause when a video is within the viewport... when I was searching around I found the following code.. which unfortunately didn't work:

jQuery

    $(window).scroll(function(){
        if ($(window).scroll(100)){
            $('#video').play;
        }
    });

HTML

    <video preload="auto" loop="loop" id="background">
        <source src="background/background1.mp4" type="video/mp4"> </source>
        <source src="background/background1.webm" type="video/webm"> </source>
    </video>

I've also tried the code on the following page: http://serversideguy./2014/02/05/play-youtube-videos-on-scroll-over/

but I couldn't get it to work either, is there anyone who could point me in the right direction?

Is it even practical to play and pause video's when in / out of the viewport, wouldn't users be startled by sounds suddenly appearing?

• javascript
• jquery
• css
• video
• viewport

Share Improve this question Follow asked Nov 11, 2014 at 13:27 GerwinGerwin 1,61255 gold badges2525 silver badges5252 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 4

I agree with what you said in your question: users might not like it, especially if they're on mobile and you're sucking all their data plan. Anyway, here's how to check if an element is in the viewport: http://jsfiddle/pwhjk232/

$(document).ready(function() {
    var inner = $(".inner");
    var elementPosTop = inner.position().top;
    var viewportHeight = $(window).height();
    $(window).on('scroll', function() {
        var scrollPos = $(window).scrollTop();
        var elementFromTop = elementPosTop - scrollPos;

        if (elementFromTop > 0 && elementFromTop < elementPosTop + viewportHeight) {
            inner.addClass("active");
        } else {
            inner.removeClass("active");
        }
    });
})

Instead of using addClass you could use .get(0).play() and .get(0).pause() as suggested by Vohuman

$(window).scroll(function(e)
  {
    var offsetRange = $(window).height() / 3,
        offsetTop = $(window).scrollTop() + offsetRange + $("#header").outerHeight(true),
        offsetBottom = offsetTop + offsetRange;

    $(".video").each(function () { 
      var y1 = $(this).offset().top;
      var y2 = offsetTop;
      if (y1 + $(this).outerHeight(true) < y2 || y1 > offsetBottom) {
        this.pause(); 
      } else {
        this.play();
      }
    });
});

There are several errors in your code:

1. $(window).scroll(100) is not parison. You are passing an integer to the scroll method which is used for attaching scroll listener. You should use scrollTop() method and use === or == for parison.

2. play is a method, you should use () invocation operator for calling the method. But jQuery object doesn't have play method, HTMLVideoElement object has play method so you should at first get the DOM element object from the jQuery collection.

3. There is no element with ID of video in your code, the selector should be #background.

   $(window).scroll(function(){
       if ($(window).scrollTop() === 100) {
           $('#background').get(0).play();
       } else {
           $('#background').get(0).pause();
       }
   });
   

Note that scroll event is fired many times, you should consider throttling the handler.

本文标签： javascriptPause and play video when in viewportStack Overflow