Anzeige: Keine funktioniert auf iPhone Simulator

Question

Ich arbeite derzeit an der Einbettung eines YouTube-Videos in eine Website.

Ich habe meine eigenen benutzerdefinierten Wiedergabe- und Pausetasten erstellt, von denen eine zu einer bestimmten Zeit angezeigt wird. Wenn das Video abgespielt wird, wird die Pausetaste angezeigt, und wenn das Video angehalten ist, wird die Wiedergabetaste angezeigt.

Es funktioniert wie es sollte für den Desktop, aber beim Testen auf dem iOS-Simulator werden beide Tasten angezeigt und display:none scheint nicht zu funktionieren.

Hat jemand das schon mal gesehen? Was ist die Lösung? Es scheint sehr merkwürdig zu sein. Auch wenn ich in Chrome teste und überprüfe, wie es auf dem iPhone aussieht, funktioniert es wie erwartet, aber der Simulator zeigt ein anderes Verhalten.

Bitte beachten Sie meinen Code unten. Seltsamerweise wird der gleiche Fehler in dem Code unten angezeigt, wenn Sie das Code-Snippet ausführen, aber wie bereits erwähnt, wenn ich auf Chrome testen, funktioniert es perfekt.

<style> 
 
    
 
#pause-button { 
 
    display: none; 
 
} 
 

 
</style> 
 

 
<script type="text/javascript"> 
 
    // global variable for the player 
 
    var player; 
 
    // this function gets called when API is ready to use 
 
    function onYouTubePlayerAPIReady() { 
 
    // create the global player from the video iframe 
 
    player = new YT.Player('video', { 
 
     events: { 
 
     // call this function when player is ready to use 
 
     'onReady': onPlayerReady, 
 
     // call this function when player changes state i.e. when video ends 
 
     'onStateChange': onPlayerStateChange 
 
     } 
 
    }); 
 
    } 
 

 
    function onPlayerReady(event) { 
 
    var playButton = document.getElementById("play-button"); 
 
    playButton.addEventListener("click", function() { 
 
     player.playVideo(); 
 
     playButton.style.display = "none"; 
 
     pauseButton.style.display = "block"; 
 
    }); 
 

 
    var pauseButton = document.getElementById("pause-button"); 
 
    pauseButton.addEventListener("click", function() { 
 
     player.pauseVideo(); 
 
     playButton.style.display = "block"; 
 
     pauseButton.style.display = "none"; 
 
    }); 
 
    } 
 

 
    function onPlayerStateChange(event) { 
 
    //replay when video ends  
 
    if (event.data === 0) { 
 
     player.playVideo(); 
 
    } 
 
    } 
 

 
    // Inject YouTube API script 
 
    var tag = document.createElement('script'); 
 
    tag.src = "https://www.youtube.com/player_api"; 
 
    var firstScriptTag = document.getElementsByTagName('script')[0]; 
 
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); 
 
</script> 
 

 
<!-- Make sure ?enablejsapi=1 is on URL --> 
 
<!-- &controls=0 hides controls --> 
 
<!-- &showinfo=0 hides information --> 
 
<!-- &rel=0 prevents related video been shown at the end --> 
 
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/YXsGr21GD0M?enablejsapi=1&html5=1&controls=0&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe> 
 

 
<div class="buttons"> 
 
    <!-- if we needed to change height/width we could use viewBox here --> 
 
    <svg class="button" id="play-button"> 
 
    <use xlink:href="#play-icon"> 
 
     <path id="pause-icon" data-state="playing" d="M11,10 L17,10 17,26 11,26 M20,10 L26,10 26,26 20,26" /> 
 
     </use> 
 
    </svg> 
 
    <svg class="button" id="pause-button"> 
 
    <use xlink:href="#pause-icon"> 
 
     <path id="play-icon" data-state="paused" d="M11,10 L18,13.74 18,22.28 11,26 M18,13.74 L26,18 26,18 18,22.28" /> 
 
     </use> 
 
    </svg> 
 
</div>

Answer 1

<use> Tags machen, was sie zeigen, sollen sie ihre Kinder nicht machen.

Die href (SVG2) oder (xlink:. Href (SVG 1.1) Attribut eines <use> Tag sollte über die ID des Wegs, um die Pfade zeigen

In Ihrem Fall Sie wahrscheinlich die Tags ganz entfernen konnte und haben Sie einfach Pfade, die Sie anzeigen oder ausblenden konnten