So priorisieren Sie Javascript

Question

Ich habe mit diesem Code von jemand anderem geschrieben und es ist ein Bild und ein YouTube Video zu laden. Ich verstehe sein, dass ich die Priorität des Skripts ändern kann. Momentan scheint es so, als würde jemand, der mit einem iPhone auf diese Website geht und die Play-Taste vor dem Bild drückt, das Video nicht abspielen, weil das Script nicht fertig geladen ist. Wie kann ich den folgenden Code ändern, sodass der Endbenutzer keine Schaltfläche zum Abspielen sehen kann, wenn die Seite oder das Skript nicht vollständig geladen wurde?

Übrigens, dieses Problem passiert nicht auf einem Android-Gerät, so dass ich nicht sicher bin, ob diese Information als Anhaltspunkt dienen wird.

Ich hoffe, das macht Sinn, weil ich immer noch versuche, meinen Kopf darum zu wickeln.

// 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(); 
} 

Ich habe versucht, dieses Stück Code hinzufügen:

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

aber es viel nicht tun.

Answer 1

Es wäre am besten, die Zeiger-Ereignisse keine zu setzen und wenn onPlayerReady abgefeuert wird, stellen Sie die target.style.pointerEvents = „all“