Question

我有一些代码可以创建视频播放器。将脚本包装在IIFE中时，视频播放器部分不起作用，但其余代码可以正常工作。吊索中也没有任何错误。

JS

(function() {

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;
  var video_div = document.getElementsByClassName("easy-yt-bkg")[0];
  var video_url = video_div.getAttribute("data-youtube-id");

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('easy-youtube_background', {
      height: '100%',
      width: '100%',
      playerVars: {
                autoplay: 1,
                loop: 1,
                controls: 0,
                showinfo: 0,
                autohide: 1,
                modestbranding: 1,
                vq: 'hd1080'},
      videoId: video_url,
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  function onPlayerReady(event) {
    event.target.playVideo();
    player.mute();
  }

  function onPlayerStateChange(event) {
    if (event.data === YT.PlayerState.ENDED) {
       player.playVideo(); 
     }
  }

  var height_adjustment = video_div.offsetHeight
  video_div.posiiton = "relative";
  video_div.zIndex = -10;
  var content_div = document.getElementsByClassName("content")[0]
  content_div.zIndex = 1;
  content_div.position = "relative";
  var height_change = "-" + height_adjustment + "px"
  console.log(height_change);
  content_div.style.top = height_change;
})();

HTML

 <div id="easy-youtube_background" class="easy-yt-bkg" data-youtube-id="ZZ9_RJ2EPo0"></div>
<div class="content">Some cool content goes here</div>

CSS

#easy-youtube_background {
  height: 400px;
  width: 600px;
  }

  .content {
    color: red;
    position: relative;
  }

Answer 1

问题在于您永远不会调用onYouTubeIframeAPIReady()函数。

我重新排序了一些东西，使它们更具可读性，并且摆脱了你不需要重新创建这个问题的东西。

(function() {
    var player;
    var video_div = document.getElementsByClassName("easy-yt-bkg")[0];
    var video_url = video_div.getAttribute("data-youtube-id");

    function onYouTubeIframeAPIReady() {
      player = new YT.Player('easy-youtube_background', {
        height: '100%',
        width: '100%',
        playerVars: {
          autoplay: 1,
          loop: 1,
          controls: 0,
          showinfo: 0,
          autohide: 1,
          modestbranding: 1,
          vq: 'hd1080'},
        videoId: video_url,
        events: {
          'onReady': onPlayerReady,
          'onStateChange': onPlayerStateChange
        }
      });
    }

    function onPlayerReady(event) {
      event.target.playVideo();
      player.mute();
    }

    function onPlayerStateChange(event) {
      if (event.data === YT.PlayerState.ENDED) {
         player.playVideo(); 
       }
    }

    var ytScript = document.createElement('script');
    ytScript.src = "https://www.youtube.com/iframe_api";
    ytScript.onload = function() {
      YT.ready(onYouTubeIframeAPIReady);
    };
    var scriptContainer = document.getElementsByTagName('body')[0];
    scriptContainer.appendChild(ytScript);
}());

在IIFE中包装Javascript功能并不适用于视频播放器

1 个答案: