javascript 在视口中暂停和播放视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26866025/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Pause and play video when in viewport
提问by Gerwin
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
jQuery
$(window).scroll(function(){
if ($(window).scroll(100)){
$('#video').play;
}
});
HTML
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/
我还尝试了以下页面上的代码：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?
在进入/退出视口时播放和暂停视频甚至实用，用户不会被突然出现的声音吓到吗？
回答by Jonas Grumann
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/
我同意您在问题中所说的话：用户可能不喜欢它，特别是如果他们在移动设备上并且您正在吸收他们所有的数据计划。无论如何，这是检查元素是否在视口中的方法：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
您可以使用.get(0).play()并.get(0).pause()按照 Vohuman 的建议使用，而不是使用 addClass
回答by ravi
$(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();
}
});
});
回答by undefined
There are several errors in your code:
您的代码中有几个错误：
$(window).scroll(100)is not comparison. You are passing an integer to thescrollmethod which is used for attachingscrolllistener. You should usescrollTop()method and use===or==for comparison.playis a method, you should use()invocation operator for calling the method. But jQuery object doesn't haveplaymethod,HTMLVideoElementobject hasplaymethod so you should at first get the DOM element object from the jQuery collection.There is no element with ID of
videoin your code, the selector should be#background.$(window).scroll(function(){ if ($(window).scrollTop() === 100) { $('#background').get(0).play(); } else { $('#background').get(0).pause(); } });
$(window).scroll(100)不是比较。您正在将一个整数传递给scroll用于附加scroll侦听器的方法。您应该使用scrollTop()方法和使用===或==进行比较。play是一种方法，您应该使用()调用运算符来调用该方法。但是 jQuery 对象没有play方法，HTMLVideoElement对象有play方法，所以你应该首先从 jQuery 集合中获取 DOM 元素对象。video您的代码中没有 ID 为的元素，选择器应该是#background.$(window).scroll(function(){ if ($(window).scrollTop() === 100) { $('#background').get(0).play(); } else { $('#background').get(0).pause(); } });
Note that scrollevent is fired many times, you should consider throttlingthe handler.
请注意，scroll事件被多次触发，您应该考虑限制处理程序。
