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 =＆＃34; all＆＃34;

如何确定Javascript的优先级

1 个答案: