滚动到时自动播放 Youtube 视频

Question

滚动到时自动播放 Youtube 视频

use*_*906 5 javascript youtube video jquery

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

谢谢你的帮助

Answer 1

小智 4

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

Run Code Online (Sandbox Code Playgroud)

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

根据滚动位置触发视频自动播放

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

Run Code Online (Sandbox Code Playgroud)

归档时间：	11 年，1 月前
查看次数：	34843 次
最近记录：	5 年，2 月前