Javascript 滚动到时自动播放Youtube视频

当你在页面上滚动到youtube视频时，有没有办法自动播放它？我试着在谷歌上搜索这个，看起来有一些方法可以用于旧的youtube嵌入代码。我正在寻找一个更新版本的这个-有人知道如何自动播放youtube视频时，你滚动了一定数量的像素在一个页面上

感谢您的帮助

<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"/>

使用以上选项可自动播放视频。根据您的问题，仅在向下滚动时播放，请检查此线程

这是完整的代码。我们已经在firefox和chrome上进行了测试。你可以检查一下这里的样品

#e1、e2、e3、e4、e5、ytplayer{
高度：390px；宽度：640px；显示：块；
不透明度：0；
}
//异步加载IFrame播放器API代码。
var tag=document.createElement（'script'）；
tag.src=”https://www.youtube.com/player_api";
var firstScriptTag=document.getElementsByTagName（'script'）[0]；
firstScriptTag.parentNode.insertBefore（标记，firstScriptTag）；
//用and替换“ytplayer”元素
//YouTube播放器的API代码下载后。
var播放器；
函数onYouTubePlayerAPIReady（）{
player=新的YT.player（'ytplayer'{
高度：“390”，
宽度：“640”，
playerVars：{
自动播放：0
},
videoId:'M7lc1UVf VE'
});
}
$（窗口）。滚动（函数（）{
$（“iframe”）。每个（函数（）{
if（$（窗口）.scrollTop（）>$（此）.offset（）.top-200）{
$（this.css（'opacity'，1）；
player.playVideo（）；
}否则{
$（this.css（'opacity'，0）；
player.stopVideo（）；
}
}); 
});
某些要素1
某些元素2
某些要素3
这里是Youtube播放器
某些元素4
某些元素5

我知道这是一个非常古老的问题，但我一直在谷歌上搜索，没有一个答案对我有效，因此这是我最终实现的解决方案：

<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>

window.onscroll=函数（）{
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））{
如果（v.src=''| | v.src==location.href）{
v、 src='VIDEO_URL'；
}
}否则{
v、 src=''；
}
}

我知道这是一个老问题，但我找到了一个完全符合我需要的解决方案，所以我想我会分享它。我发现实际上可以将&autoplay=1附加到iframe src，它会自动播放视频

$(window).scroll(function() {
 
//will trigger when your element comes into viewport
    var hT = $('#YourElement').offset().top,
    hH = $('#YourElement').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();



if (wS > (hT+hH-wH)){
    //appends &autoplay=1 to iFrame src, making it autoplay
    var videoUrl = $('#YourIFrame').attr('src');
    $('#YourIFrame').attr('src', videoUrl + "&autoplay=1");
}

---

感谢您的回复-您发布的方法是否适用于youtube视频？是的。我试过Iframe，它很有效。你可以在我的网站上试试，它会自动播放youtube。感谢您的回复-我能够让自动播放工作，但只希望在用户滚动超过某个点时自动播放。我尝试了你链接的脚本，但对我无效。代码段中的源代码使用了什么？很好，谢谢，这可能对其他人有用

var pattern=/autoplay/；var apexists=pattern.test（videoUrl）；if（！apexists）{jQuery（'#YourIFrame'）.attr（'src'，videoUrl+“&autoplay=1”）；}

$(window).scroll(function() {
 
//will trigger when your element comes into viewport
    var hT = $('#YourElement').offset().top,
    hH = $('#YourElement').outerHeight(),
    wH = $(window).height(),
    wS = $(this).scrollTop();



if (wS > (hT+hH-wH)){
    //appends &autoplay=1 to iFrame src, making it autoplay
    var videoUrl = $('#YourIFrame').attr('src');
    $('#YourIFrame').attr('src', videoUrl + "&autoplay=1");
}