当您在页面上滚动到 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 上进行了测试。您可以在这里查看工作示例。
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>
我知道这是一个老问题，但我找到了一个完全适合我的需求的解决方案，所以我想我会分享它。我发现你实际上可以将 &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");
}
我知道这是一个非常老的问题，但我一直在谷歌上搜索它，但没有一个答案对我有用，所以这是我最终实现的解决方案：
<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>
下面的另一种方法检查包含视频的 div 何时在视图中，然后将自动播放代码添加到 src 链接的末尾，在视图之外时将其删除。这会导致视频每次再次滚动到视图中时都会从头开始。
HTML（将 YOURVIDEOID 替换为您要显示的 YouTube 视频的 ID）：
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/YOURVIDEOID?si=2dMeeLNZ9WY62AWW&mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen id="video"></iframe>
</div>
JAVASCRIPT（还需要 Jquery）
$(document).ready(function() {
var inner = $(".video-container");
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) {
$("#video")[0].src += "&autoplay=1";} else {}
});
})