在视口中暂停和播放视频 [英] Pause and play video when in viewport

问题描述

我正在试验播放和暂停，当视频在视口内...
当我在搜索时我发现以下代码..不幸的是没有工作：

jQuery

  $（window）.scroll（function（）{
 if $（window）.scroll（100））{
 $（'＃video'）。play; 
} 
} 
   
 
 
 
 HTML 
 < video preload =autoloop =loopid =background> 
< source src =background / background1.mp4type =video / mp4> < / source> 
< source src =background / background1.webmtype =video / webm> < / source> 
< / video> 
  
我也试过下面的代码： http://serversideguy.com/2014/02/05/play-youtube-videos-on -scroll-over /  
 
 
 
但我也无法让它工作，有没有人能指出我的方向正确？
 
 
 
在进入/退出视口时播放和暂停视频甚至不切实际，用户不会被突然出现的声音吓跑？
解决方案
我同意你在你的问题中说的：用户可能不喜欢它，特别是如果他们在移动，你正在吸吮他们的所有数据计划。无论如何，这里是如何检查元素是否在视口： http://jsfiddle.net/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）; 
} 
}）; 
}）
  
而不是使用addClass，你可以使用 .get ）.play（）和 .get（0）.pause（）按Vohuman的建议
 
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.com/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?
解决方案
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.net/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

                        
这篇关于在视口中暂停和播放视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！