主页 › 前端编程 › 【JS】实现Video页面自动有声播放

admin 发表于 2023-9-16 13:56:20

【JS】实现Video页面自动有声播放

$(function () {
    var myVideo = $("video");
    var isScrolling = false;

    function throttle(func, delay) {
      return function () {
            if (!isScrolling) {
                func();
                isScrolling = true;
                setTimeout(function () {
                  isScrolling = false;
                }, delay);
            }
      };
    }

    function VideoPlay() {
      myVideo.play().catch(error => {
            return;//程序员的倔强，阻止浏览器调试错误。
      });
      var wt = $(window).scrollTop();
      var vt = $("video").offset().top;
      var vh = $("video").height();
      vt = vt - vh;
      var vb = vt + vh;
      if (wt < vt || wt > vb) {
            myVideo.requestPictureInPicture().catch(error => {
                return;//截获错误，防止浏览器调试一堆错误显示
            });
      } else {
            document.exitPictureInPicture().catch(error => {
                return;
            });
      }
    }
    //用scroll代替人工互动。
    $(window).on("scroll", throttle(VideoPlay, 300));
});

查看完整版本: 【JS】实现Video页面自动有声播放