Javascript 滚动到时自动播放 Youtube 视频
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26111919/
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
Autoplay Youtube Video When Scrolled to
提问by user3776906
Is there any way to autoplay a youtube video when you scroll to it on the page? I've tried to google this and it looks like theres some methods for the old youtube embed code. I'm looking for an updated version of this - does anyone know how to automatically play youtube videos when you scroll down a certain amount of pixels on a page?
当您在页面上滚动到 YouTube 视频时，有什么方法可以自动播放它？我试过用谷歌搜索这个，看起来旧的 youtube 嵌入代码有一些方法。我正在寻找更新版本 - 有谁知道当您在页面上向下滚动一定数量的像素时如何自动播放 youtube 视频？
Thanks for your help
谢谢你的帮助
回答by Sesha Kiran
<iframe id="ytplayer" type="text/html" width="640" height="390"
src="http://www.youtube.com/embed/M7lc1UVf-VE?autoplay=1&origin=http://example.com"
frameborder="0"/>
Use the above to play the video automatically. per your question to play it only when scrolled down, check this thread.
使用上面的自动播放视频。根据您的问题，仅在向下滚动时播放，请检查此线程。
Triggering a video autoplay based on scroll position
Here is the complete code. have tested this on firefox and chrome. You can check the sample working here.
这是完整的代码。已在 Firefox 和 chrome 上对此进行了测试。您可以在此处查看工作示例。
http://www.foftv.com/samplejs/vidscroll2.html
http://www.foftv.com/samplejs/vidscroll2.html
<html><head>
<style>
#e1, #e2, #e3, #e4, #e5, # ytplayer{
height:390px; width:640px; display: block;
opacity: 0;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
// Load the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Replace the 'ytplayer' element with an <iframe> and
// YouTube player after the API code downloads.
var player;
function onYouTubePlayerAPIReady() {
player = new YT.Player('ytplayer', {
height: '390',
width: '640',
playerVars : {
autoplay : 0
},
videoId: 'M7lc1UVf-VE'
});
}
$(window).scroll(function() {
$("iframe").each( function() {
if( $(window).scrollTop() > $(this).offset().top - 200 ) {
$(this).css('opacity',1);
player.playVideo();
} else {
$(this).css('opacity',0);
player.stopVideo();
}
});
});
</script>
</head>
<body>
<div id="e1">Some element 1</div>
<div id="e2">Some element 2</div>
<div id="e3">Some element 3</div>
<div id="ytplayer">Youtube player here</div>
<div id="e4">Some element 4</div>
<div id="e5">Some element 5</div>
</body>
</html>
回答by álex Nú?ez
I know it's a very old question, but I've been googling it and none of the answers worked for me, so this is the solution I ended up implementing:
我知道这是一个非常古老的问题，但我一直在谷歌上搜索它，但没有一个答案对我有用，所以这是我最终实施的解决方案：
<div id="video-box">
<iframe id="i_video" src="" frameborder="0" allowfullscreen></iframe>
</div>
<script>
window.onscroll = function() {
var dv = document.getElementById('video-box');
var v = document.getElementById('i_video');
if ((window.scrollY < (dv.offsetTop + dv.offsetHeight)) && ((window.scrollY + window.outerHeight) > dv.offsetTop)) {
if (v.src=='' || v.src==location.href) {
v.src='VIDEO_URL';
}
} else {
v.src='';
}
}
</script>
