个人中心
gpt4 book ai didi

javascript - 如何在滚动时播放和暂停网页中的 Youtube 视频(使用 javascript 或 jquery)？

转载 作者：行者123 更新时间：2023-12-03 04:09:43 24 4
gpt4 key购买 nike

我的意思是说，加载页面时不应播放视频。当视频播放器进入窗口屏幕焦点时，它应该播放；当使用滚动功能在屏幕上不可见时，它应该暂停。我不希望在单独的选项卡上播放视频。 

        <html>
            <head>
                <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

            </head> 
            <body>
                <p>
                    This is some text
                </p>


                <div style="margin-top:1000px;margin-bottom:1000px;">
                <iframe width="445" height="245" src="https://www.youtube.com/embed/LA5XtlyVILo?rel=0&enablejsapi=1&version=3&playerapiid=ytplayer" frameborder="0" allowfullscreen></iframe>
               </div>

                <script type="text/javascript">
                   var videos = document.getElementsByTagName("iframe"), fraction = 0.8;

                    function checkScroll() {

                      for(var i = 0; i < videos.length; i++) {
                        var video = videos[i];

                        var x = 0,
                            y = 0,
                            w = video.width,
                            h = video.height,
                            r, //right
                            b, //bottom 
                            visibleX, visibleY, visible,
                            parent;


                        parent = video;
                        while (parent && parent !== document.body) {
                          x += parent.offsetLeft;
                          y += parent.offsetTop;
                          parent = parent.offsetParent;

                        }

                        r = x + parseInt(w);
                        b = y + parseInt(h);


                        visibleX = Math.max(0, Math.min(w, window.pageXOffset + window.innerWidth - x, r - window.pageXOffset));
                        visibleY = Math.max(0, Math.min(h, window.pageYOffset + window.innerHeight - y, b - window.pageYOffset));


                        visible = visibleX * visibleY / (w * h);

                        if (visible > fraction) {           

                          playVideo();
                        } else if(visible < fraction) {
                          pauseVideo();                  


                        }


                      }

                    };

                    window.addEventListener('scroll', checkScroll, false);
                    window.addEventListener('resize', checkScroll, false);

                    //check at least once so you don't have to wait for scrolling for the video to start
                    window.addEventListener('load', checkScroll, false);

                    checkScroll();

                    function playVideo() {
                      player.playVideo();
                    }

                    function pauseVideo() {
                      player.pauseVideo();
                    }
                </script>
            </body>
        </html>

最佳答案

根据海报反馈进行更新

在 stackoverflow 上搜索以扩展我自己的问题解决方案后，I found the answer to your question in another stackoverflow question.

Here's a fiddle slightly modified fiddle based on the original post 

 /*Credit to original author http://stackoverflow.com/a/7557433/1684970 */

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 = {
  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');

原始答案

由于您没有指定视频是否在 iframe 中或其他内容中，因此我假设它只是嵌入的，并为用户提供在 YouTube 选项中播放/暂停/打开的选项。

第一部分是检测元素当前是否位于视口(viewport)中，因此可见。 and then the click event if visible/not-visible. 

$(window).scroll(function() {
    var top_of_element = $("#element").offset().top;
    var bottom_of_element = $("#element").offset().top + $("#element").outerHeight();
    var bottom_of_screen = $(window).scrollTop() + $(window).height();
    var top_of_screen = $(window).scrollTop();

    if((bottom_of_screen > top_of_element) && (top_of_screen < bottom_of_element)){
        // The element is visible, trigger play click event
        $("#element").playVideo()
    }
    else {
        // The element is not visible, trigger pause click event
        $("#element").pauseVideo()
    }
});

关于javascript - 如何在滚动时播放和暂停网页中的 Youtube 视频(使用 javascript 或 jquery)？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44381043/

24 4 0
文章推荐： azure - 使用 pyspark 将多个 csv 文件合并到 Azure Blob 存储中的一个 csv 文件
文章推荐： csv - Dart:如何将 CSV 数据映射到模型列表？
文章推荐： 基于 Azure Kubernetes token 的 ML Web 服务身份验证
文章推荐： java - 从Libs文件夹更改Gradle Compile .jar路径
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com