滚动到时自动播放Youtube视频-Java 学习之路

当您在页面上滚动视频时，有没有办法自动播放YouTube视频？我试图谷歌这个看起来像旧的youtube嵌入代码的一些方法 . 我正在寻找这个的更新版本 - 有人知道如何在页面上向下滚动一定数量的像素时自动播放YouTube视频吗？

谢谢你的帮助

2 回答

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

回复于 2024-05-01T09:10:18+08:00

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

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

回复于 2024-05-01T09:10:18+08:00

滚动到时自动播放Youtube视频

2 回答

相关问题