为什么我的 YouTube Iframe API 视频会关闭？答案

【问题标题】：Why my YouTube Iframe API video turns off?为什么我的 YouTube Iframe API 视频会关闭？
【发布时间】：2021-01-01 08:30:32
【问题描述】：

YouTube Iframe API 有问题。我有一个 Slick 滑块，其中包含来自 YouTube 的图片和视频。一张幻灯片 - 一个视频或一张图片。 Slick 有点并且是可拖动的。我正在尝试编写一个功能：视频在幻灯片处于活动状态时开始播放。无需单击“播放”按钮 - 它会在我自动打开幻灯片时开始。 我的问题是我的视频开始播放了，是的。但它也会在一秒钟后关闭。而且它不会在幻灯片切换时自动播放。谁能告诉我我做错了什么？提前致谢。

<div class="video-banner" id="{{ yt }}" data-ytid="{{ yt }}"></div>

(function($){
      window.onYouTubeIframeAPIReady = function() {
        $('.video-banner').each(function() {
          yt_id = $(this).data("ytid");
          playerInfo.push({ "id": yt_id, 'videoId': yt_id, 'slick_id': $(this).closest('.slick-slide').data('slick-index') });
        });
  
        for (var i = 0; i < playerInfo.length; i++) {
          var curplayer = createPlayer(playerInfo[i]);
          players[i] = curplayer;
        }
      }

      function getParameterByName(name, url) {
        if (!url) url = window.location.href;
        name = name.replace(/[\[\]]/g, '\\$&');
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url);
        if (!results) return null;
        if (!results[2]) return '';
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
      }
  
      function createPlayer(playerInfo) {
        return new YT.Player(playerInfo.id, {
          videoId: playerInfo.videoId,
          host: 'https://www.youtube.com',
          width: '100%',
          height: 500,
          playerVars: {
            autoplay: 0,
          },
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          },
        });
      }
      
      function onPlayerReady(event) {
        if (window.location.href.indexOf("?yt=") > -1) {
          if (getParameterByName('yt') == event.target.getVideoData().video_id) {
            event.target.playVideo();
          }
        }
      }
  
      $(slider).on('afterChange', function(event, slick, currentSlide, nextSlide) {
        for (var i = 0; i < playerInfo.length; i++) {
          if (playerInfo[i].slick_id == currentSlide) {
            if (typeof players[i].playVideo === "function")
              players[i].playVideo();
          }
        }
      });
    
    });
}(jQuery))

【问题讨论】：

标签： javascript jquery youtube-api youtube-iframe-api

【解决方案1】：

问题是视频没有静音。浏览器有时会在没有静音的情况下阻止 iframe。另一方面：我在 Chrome 上工作，请参阅：YouTube-iFrame-API doesn't work on Chrome v.72。

【讨论】：