javascript - 如何确定 Javascript 的优先级

Question

我正在处理别人编写的这段代码，它用于加载图像和 YouTube 视频。我的理解是我可以更改脚本的优先级。现在，似乎当有人用 iPhone 访问这个网站时，他们点击了图像前面的播放按钮，视频没有播放，因为脚本没有完成加载。我如何更改下面的代码，以便在页面或此脚本未完成加载时，最终用户看不到播放按钮？

顺便说一下，这个问题不会发生在 Android 设备上，所以我不确定这条信息是否可以作为线索。

我希望这是有道理的，因为我仍在努力思考它。

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

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

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player1;
var player2;

function onYouTubeIframeAPIReady() {
  player1 = new YT.Player('player', {
    height: '390',
    width: '640',
    playerVars: {
      'controls': 0,
      'rel': 0
    },
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
  jQuery('.video-overlay').click(function() {
    event.target.setVolume(100);
    event.target.setPlaybackQuality('hd1080');
    setTimeout(function() {
      jQuery('.video-overlay').css('transform', 'scale(0)');
      jQuery('.homepage-tagline').hide();
    }, 300);
    event.target.playVideo();
  });
}

// 5. The API calls this function when the player's state changes.
//    The function indicates that when playing a video (state=1),
//    the player should play for six seconds and then stop.
var done = false;

function onPlayerStateChange(event) {
  jQuery('.video-overlay').click(function() {
    event.target.setPlaybackQuality('hd1080');
    jQuery('.video-overlay').hide();
    jQuery('.slider-overlay').hide();
    event.target.playVideo();
  });
}

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

我尝试添加这段代码:

jQuery('.video-overlay').css('opacity', 0);

但效果不大。

Answer 1

最好将指针事件设置为无，并在触发 onPlayerReady 时设置 target.style.pointerEvents = "all"