javascript 当用户滚动时如何暂停 youtube 嵌入
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25150423/
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
how can I pause a youtube embed when a user scrolls away
提问by new_frontenddev
I have been trying to look for help with respect getting a video to pause when a user scrolls away. I have already been able to find help for html5 videos but now I also need to know how the youtube API can be used for the same.
我一直在尝试寻求帮助，以便在用户滚动时暂停视频。我已经能够找到 html5 视频的帮助，但现在我还需要知道如何使用 youtube API。
the html structure I have that embeds the YouTube is as follows
我嵌入 YouTube 的 html 结构如下
<div class="ytube-container">
<iframe id="vplayer"
src="//www.youtube.com/embed/qKaMgJwBItM?modestbranding=1&showinfo=0&modestbranding=0&controls=1&rel=0&autoplay=1&vq=hd720"
frameborder="0"webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
I used the following for html5 - does the youtube API have a very different method to do the same?
我在 html5 中使用了以下内容 - youtube API 是否有非常不同的方法来做同样的事情？
<script>
//play when video is visible
var videos = document.getElementsByTagName("video"), fraction = 0.8;
function checkScroll() {
for(var i = 0; i < videos.length; i++) {
var video = videos[i];
var x = 0,
y = 0,
w = video.offsetWidth,
h = video.offsetHeight,
r, //right
b, //bottom
visibleX, visibleY, visible,
parent;
parent = video;
while (parent && parent !== document.body) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
r = x + w;
b = y + h;
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);
//check at least once so you don't have to wait for scrolling for the video to start
window.addEventListener('load', checkScroll, false);
checkScroll();
</script>
I am not sure I understand how to entirely use the Youtube API I was able to find a code that stops one player if the other is playing but I dont see how that can be manipulated to achieve what I need.
我不确定我是否理解如何完全使用 Youtube API 我能够找到一个代码，如果另一个播放器正在播放，它会停止一个播放器，但我不知道如何操纵它来实现我的需要。
<script>
players = new Array();
function onYouTubeIframeAPIReady() {
var temp = $("iframe.vplayer");
for (var i = 0; i < temp.length; i++) {
var t = new YT.Player($(temp[i]).attr('id'), {
events: {
'onStateChange': onPlayerStateChange
}
});
players.push(t);
}
}
onYouTubeIframeAPIReady();
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
var temp = event.target.a.src;
var tempPlayers = $("iframe.yt_players");
for (var i = 0; i < players.length; i++) {
if (players[i].a.src != temp) players[i].stopVideo();
}
}
}
回答by mpgn
You done a great job with HTML5 player and the function checkScroll().
It seem you have trouble to use it with the YouTube JS Player, well if you take the time to read the doc, you discover that the YouTube player is just an iframe.
您在 HTML5 播放器和功能方面做得很好checkScroll()。
看起来你在使用 YouTube JS 播放器时遇到了麻烦，如果你花时间阅读文档，你会发现 YouTube 播放器只是一个 iframe。
Try this live example i made : http://jsbin.com/cocatuta/15/edit?js,output
试试我做的这个活生生的例子：http: //jsbin.com/cocatuta/15/edit?js,output
So basically i just replace :
所以基本上我只是替换：
var videos = document.getElementsByTagName("video"), fraction = 0.8;
By this :
这样 ：
var videos = document.getElementsByTagName("iframe"), fraction = 0.8;
And add two function playVideoand pauseVideo.
并添加两个函数playVideo和pauseVideo。
function playVideo() {
player.playVideo();
}
function pauseVideo() {
player.pauseVideo();
}
Full code :
完整代码：
//play when video is visible
var videos = document.getElementsByTagName("iframe"), fraction = 0.8;
function checkScroll() {
for(var i = 0; i < videos.length; i++) {
var video = videos[i];
var x = 0,
y = 0,
w = video.width,
h = video.height,
r, //right
b, //bottom
visibleX, visibleY, visible,
parent;
parent = video;
while (parent && parent !== document.body) {
x += parent.offsetLeft;
y += parent.offsetTop;
parent = parent.offsetParent;
}
r = x + parseInt(w);
b = y + parseInt(h);
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) {
playVideo();
} else {
pauseVideo()
}
}
};
window.addEventListener('scroll', checkScroll, false);
window.addEventListener('resize', checkScroll, false);
//check at least once so you don't have to wait for scrolling for the video to start
window.addEventListener('load', checkScroll, false);
checkScroll();
Hope it's help ! And yes, read the doc "is even supposed to help you" (eventually)
希望有帮助！是的，阅读文档“甚至应该帮助你”（最终）
