Question

问题：我尝试在用户滚动时自动播放YouTube视频，并在用户滚动时停止播放。

约束：JavaScript Web开发的新手。

尝试：离开https://jsfiddle.net/kmsdev/gsfkL6xL/我复制粘贴线以使其生效。我熟悉C ++和Java，所以我至少可以阅读代码的要点。看来我的代码是正确的，但我可能没有在我的HTML5中正确调用它？

英雄部分：

<section class="video_background">
    <div class="video_foreground">
        <iframe id="playerA" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
    </div>
</section>

JS科：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript" src="assets/js/scroll.js"></script>

JS：

$(function() {
  $('a[href*="#"]:not([href="#"])').click(function() {
    if (location.pathname.replace(/^\//,'') == this.pathname.replace(/^\//,'') && location.hostname == this.hostname) {
      var target = $(this.hash);
      target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
      if (target.length) {
        $('html, body').animate({
          scrollTop: target.offset().top
        }, 1000);
        return false;
      }
    }
  });
});

我在https://jsfiddle.net/kmsdev/gsfkL6xL/之上有这个，但这不重要。

Answer 1

这是一个工作示例，其中包括所有css / js。我看不到你用你的PlayYTVideos源版本做了什么，但你可能忘了做window.onload。

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="//code.jquery.com/jquery-2.1.4.js"></script>
    <link rel="stylesheet" type="text/css" href="/css/result-light.css">
    <script type="text/javascript" src="https://www.youtube.com/iframe_api"></script>
    <style type="text/css">
        iframe {
            width: 200px;
            height: 200px;
            margin: 500px 0;
        }
    </style>
    
    <script type='text/javascript'>//<![CDATA[
    window.onload=function(){
        var LoadVideo = function(player_id){
            var Program = {

                Init: function(){
                    this.NewPlayer();
                    this.EventHandler();
                },

                NewPlayer: function(){
                    var _this = this;
                    this.Player = new YT.Player(player_id, {});
                    _this.Player.$element = $('#' + player_id);
                },

                Play: function(){
                    if( this.Player.getPlayerState() === 1 ) return;
                    this.Player.playVideo();
                },

                Pause: function(){
                    if( this.Player.getPlayerState() === 2 ) return;
                    this.Player.pauseVideo();
                },

                ScrollControl: function(){
                    if( Utils.IsElementInViewport(this.Player.$element[0]) ) this.Play();
                    else this.Pause();
                },

                EventHandler: function(){
                    var _this = this;
                    $(window).on('scroll', function(){
                        _this.ScrollControl();
                    });
                }
            };
            var Utils = {
                /** @author http://stackoverflow.com/a/7557433/1684970 */
                IsElementInViewport: function(el){
                    if (typeof jQuery === "function" && el instanceof jQuery) el = el[0];
                    var rect = el.getBoundingClientRect();
                    return (
                            rect.top >= 0 &&
                            rect.left >= 0 &&
                            rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
                            rect.right <= (window.innerWidth || document.documentElement.clientWidth)
                    );
                }
            };
            return Program.Init();
        };
        LoadVideo('playerA');
        LoadVideo('playerB');
        LoadVideo('playerC');
    }//]]>

    </script>
    
</head>
<body>
<iframe id="playerA" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
<iframe id="playerB" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
<iframe id="playerC" frameborder="0" title="YouTube video player" type="text/html" src="https://www.youtube.com/embed/u1zgFlCw8Aw?enablejsapi=1"></iframe>
</body>
</html>

滚动

1 个答案: