Question

我有一个YouTube视频，该视频在网页标题的后面播放。我使用以下JavaScript代码加载它。您也可以在我的主页上{@ {3}}

上查看它。

if (window.matchMedia("(max-device-width: 700px)").matches) {
    // Show picture instead of video for mobile
    var bannerPic = document.createElement("img");
    bannerPic.id = "bannerPic";
    bannerPic.src = "https://i.imgur.com/nnw4EIO.png";
    document.getElementById("bannerVideoDiv").appendChild(bannerPic);

  } else {
    var videoDiv = document.createElement("div");
    videoDiv.id = "player";
    document.getElementById("bannerVideoDiv").appendChild(videoDiv);

    var tag = document.createElement('script');
    tag.src = "https://www.youtube.com/iframe_api";
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    var player;
    function onYouTubeIframeAPIReady() {
      player = new YT.Player('player', {
          videoId: 'TfMv2WlYxAA',
          playerVars: {
              modestbranding: 0,
              autoplay: 1,
              controls: 0,
              showinfo: 0,
              wmode: 'transparent',
              branding: 0,
              rel: 0,
              autohide: 0,
              origin: window.location.origin,
              mute: 1
          },
          events: {
              'onReady': onPlayerReady,
              'onStateChange': onPlayerStateChange
          }
        });
      }
      function onPlayerReady(event) {
          event.target.playVideo();
          player.mute();
      }
      function onPlayerStateChange(event) {
          if (event.data === YT.PlayerState.ENDED) {
              player.playVideo(); 
              player.mute();
          }
      }
  }

此代码显示用于移动设备的图像，而对于常规设备，它将使视频静音，因此chrome可以自动播放视频并循环播放视频，而无需每次重新加载。不幸的是，它仍然被uBlock Origin（可能还有其他adblocker）阻止。更糟糕的是，adblocker不仅会阻止youtube视频，还会阻止整个div，因此我页面的标题（覆盖在顶部）甚至都不会显示。

有没有办法使视频不受广告拦截器的拦截？如果确实确实阻止了所有自动播放的视频（甚至是静音的视频），那么检测广告拦截器的最佳方法是什么，以便我可以在后台显示图像（就像在移动设备上一样）？

静音的背景youtube视频已被uBlock Origin阻止。有没有办法绕过这个？

0 个答案: