如何优先使用Javascript

我正在处理由其他人编写的代码，它是加载图像和YouTube视频。我理解他可以改变脚本的优先级。现在，当某人在iPhone上使用iPhone时，他们击中了图像前面的播放按钮，视频无法播放，因为该脚本尚未完成加载。如何更改下面的代码，以便如果页面或此脚本未完成加载，最终用户将看不到播放按钮？如何优先使用Javascript

顺便说一句，这个问题不会发生在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);

，但它并没有做太多。

来源

2017-04-11 Daniel

带给玩家0不透明性和在'onPlayerReady'功能添加代码将其设置为1.还提到*平台*比提及*浏览器*少得多。 iOS上的Chrome与Android或Safari有相同的行为吗？看到？ –

看起来像你的视频覆盖是你点击播放它，为什么不把它藏在CSS，然后在您的视频播放器做了'.show'的东西准备好 – Pete

这将是最好设定指针事件无法比拟的，当onPlayerReady被触发，设置target.style.pointerEvents =“所有”

来源

2017-04-11 14:58:20

所以，我会成立event.target.setVolume（0）的onPlayerReady函数？ – Daniel

有趣的是，有人告诉我，这个曾与改变的JavaScript的优先做的，但现在看来，这与我所没有的经验指针的事件做。 – Daniel

@Daniel在CSS设置指针事件没有将禁止任何事件侦听器通过（如点击），这样，直到你设置firstScriptTag.style.pointerEvents =“所有”的用户不能上的播放按钮点击。这样做会使它工作，但不会产生最好的用户体验 - 它会混淆用户为什么当他们第一次点击播放按钮时不能播放。它至少会解决这个问题，尽管 –

如何优先使用Javascript

回答

相关问题