滚动到时自动播放 Youtube 视频答案

【问题标题】：Autoplay Youtube Video When Scrolled to滚动到时自动播放 Youtube 视频
【发布时间】：2014-11-24 13:19:55
【问题描述】：

当您在页面上滚动到 youtube 视频时，有什么方法可以自动播放它？我试过用谷歌搜索它，看起来旧的 youtube 嵌入代码有一些方法。我正在寻找更新版本 - 有谁知道当您在页面上向下滚动一定数量的像素时如何自动播放 youtube 视频？

感谢您的帮助

【问题讨论】：

标签： javascript jquery video youtube

【解决方案1】：

我知道这是一个老问题，但我找到了一个非常适合我需要的解决方案，所以我想我会分享它。我发现您实际上可以将 &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");
}

【讨论】：

太好了，谢谢，moz
这可能对其他人有用var pattern = /autoplay/; var apexists = pattern.test(videoUrl ); if (!apexists) { jQuery('#YourIFrame').attr('src', videoUrl + "&autoplay=1"); }

【解决方案2】：

我知道这是一个非常古老的问题，但我一直在谷歌上搜索它，但没有一个答案对我有用，所以这是我最终实施的解决方案：

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

【讨论】：

【解决方案3】：

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

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

Triggering a video autoplay based on scroll position

这是完整的代码。已经在 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>

【讨论】：

感谢您的回复 - 您发布的方法是否适用于 youtube 视频？
是的。我已经尝试过 iframe 并且它有效。您可以在我的网站上尝试它，它会自动播放 youtube。 foftv.com/testyt.html
感谢您的回复 - 我能够让自动播放工作，但只希望它在用户滚动超过某个点时自动播放。我尝试了您链接的脚本，但它对我不起作用。 sn-p 中的源码你用了什么？