在我的网站上有一个包含许多视频的页面。当 iframe 视频在视口中完全可见时，视频应自动播放。当视频移动到视口上方时，视频应该暂停，就像我们在 Facebook 中看到的那样。
Note:我在用着iframe， 但不是html5视频元素。
虽然 SO 不是请求代码的地方，但由于挑战以及其他需要这个想法的人，我会回答这个问题。
所以，我正在使用jquery.inview https://github.com/protonet/jquery.inview用于检测 iframe 何时位于视口中的插件。
另外，我正在使用youtube api https://developers.google.com/youtube/v3/code_samples/javascript控制视频的 iframe。
解释每一行的工作原理并不容易，因此请阅读代码，如果您有疑问，请发表评论。
这是完整的代码（它是not出于安全原因在该网站上工作，以便您可以看到实时情况http://output.jsbin.com/soqezo http://output.jsbin.com/soqezo)
// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var players = [];
function onYouTubePlayerAPIReady() {
$('iframe').each(function() {
var ifr = $(this),
player = new YT.Player(ifr[0].id);
ifr.data('player', player);
players.push(player);
});
initInView();
}
function pausePlayers() {
for (var i in players) {
players[i] && players[i].pauseVideo && players[i].pauseVideo();
}
}
function initInView() {
$('div').each(function() {
$(this).on('inview', function(event, isInView) {
if (isInView) {
// element is now visible in the viewport
pausePlayers();
var player = $(this).find('iframe').data('player');
if (player) {
player.playVideo && player.playVideo();
}
} else {
// element has gone out of viewport
//$(this).find('iframe').data('player').pauseVideo();
}
});
});
}
html, body, div {
height:100%;
}
div {
width:100%;
height:100%;
background:red;
margin-bottom:100px;
}
iframe {
width:100%;
height:100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.inview/0.2/jquery.inview.min.js"></script>
<div>
<iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video1"></iframe>
</div>
<div>
<iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video2"></iframe>
</div>
<div>
<iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video3"></iframe>
</div>
<div>
<iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video4"></iframe>
</div>
<div>
<iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video5"></iframe>
</div>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
