Youtube API nicht bereit manchmal

Ich versuche, ein Youtube-Vid mit ihrer API einzuschließen. Aber manchmal (. Wirklich zufällig Meistens funktioniert es) Ich erhalte eine Fehlermeldung, wenn ich meine Play-Button klicken:Youtube API nicht bereit manchmal

Cannot read property 'playVideo' of undefined

Dies ist, wie ich die API enthalten:

var player; 
 

 
function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('video-intro', { 
 
     width: 100, 
 
     height: 100, 
 
     videoId: '<id>', 
 
     playerVars: { 
 
      color: 'white', 
 
      controls: 0, 
 
      showinfo: 0 
 
     } 
 
    }); 
 
} 
 

 
$(document).ready(function() { 
 
    $('#play-intro').click(function() { 
 
     player.playVideo(); 
 
     $('#video-intro').addClass('showvid'); 
 
    }); 
 
});

#video-intro { 
 
    display: none; 
 
    &.showvid { 
 
    display: block; 
 
    } 
 
}

<head> 
 
    <script src="https://www.youtube.com/iframe_api"></script> 
 
</head> 
 

 
<body> 
 
    <div id="video-intro"></div> 
 
    <a id="play-intro">Play</a> 
 
</body>

Quelle

2017-07-03 Cake

Sie müssen Ereignisse aufrufen, um den Player zu starten. Und vor dem Laden können Sie kein Video abspielen. deshalb bekommst du einen undefinierten Fehler. Ich habe jetzt Ereignisse und Funktionen hinzugefügt. Besseres Beispiel finden Sie hier enter link description here

var player; 
 

 
function onYouTubeIframeAPIReady() { 
 
    player = new YT.Player('video-intro', { 
 
     width: 100, 
 
     height: 100, 
 
     videoId: 'TZbUi0FP5AM', //T7Kmc7T-pjY (old, short) 
 
     playerVars: { 
 
      color: 'white', 
 
      controls: 0, 
 
      showinfo: 0 
 
     }, 
 
     events: { 
 
      'onReady': onPlayerReady, 
 
      'onStateChange': onPlayerStateChange 
 
      } 
 
    }); 
 
    
 
} 
 
function onPlayerReady(event) { 
 
     event.target.playVideo(); 
 
     } 
 
var done = false; 
 
function onPlayerStateChange(event) { 
 
    if (event.data == YT.PlayerState.PLAYING && !done) { 
 
     setTimeout(stopVideo, 6000); 
 
      done = true; 
 
     } 
 
} 
 
function stopVideo() { 
 
     player.stopVideo(); 
 
}  
 
     
 
     
 
     
 
$(document).ready(function() { 
 
    $('#play-intro').click(function() { 
 
     onYouTubeIframeAPIReady(); 
 
     
 
     $('#video-intro').addClass('showvid'); 
 
    }); 
 
});

#video-intro { 
 
    display: none; 
 
    &.showvid { 
 
    display: block; 
 
    } 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<head> 
 
    <script src="https://www.youtube.com/iframe_api"></script> 
 
</head> 
 

 
<body> 
 
    <div id="video-intro"></div> 
 
    <a id="play-intro">Play</a> 
 
</body>

Quelle

2017-07-03 11:38:30

Hmm, aber jetzt mein Video schon im Hintergrund zu spielen beginnt (Ich höre den Ton für 6 Sekunden). Ich möchte nur, dass ich spiele, wenn ich den Knopf drücke. Außerdem funktioniert meine Taste zum Schließen/Anhalten nicht mehr. Meine Schließen-Taste ruft folgende Funktionen auf: player.pauseVideo(); player.seekTo (0) ;. Aber es gibt Fehler, dass StopVideo und PauseVideo nicht existieren. – Cake

Sie meinen, Sie wollen Player Paly/Pause-Taste oder Sie benötigen externe Taste zu spielen? @Cake –

überprüfen Sie dieses Beispiel http://jsfiddle.net/BeUFb/326/ @Cake –

Leider ist es nicht funktioniert in SO Snippet gefunden. Versuchen Sie, das Element zuerst zu zeigen (Ihr CSS funktioniert nicht) und rufen Sie dann player.playVideo() an, andernfalls wird es einen Fehler geben, wie in Ihrer Frage gezeigt.

die folgenden CSS Verwenden Sie Ihre Iframe zu zeigen,

#video-intro { 
    display: none; 
} 
#video-intro.showvid { 
    display: block !important; 
}

HTML:

<div id="video-intro"></div> 
<a id="play-intro">Play</a> 
<script src="https://www.youtube.com/iframe_api"></script> 
<script> 
    var player; 

    function onYouTubeIframeAPIReady() { 
    player = new YT.Player('video-intro', { 
     width: 100, 
     height: 100, 
     videoId: 'TZbUi0FP5AM', //T7Kmc7T-pjY (old, short) 
     playerVars: { 
     color: 'white', 
     controls: 0, 
     showinfo: 0 
     } 
    }); 
    } 
    document.getElementById("play-intro").addEventListener("click", function() { 
    document.getElementById('video-intro').className = 'showvid'; 
    player.playVideo(); 
    }); 
</script>

Fiddle

Quelle

2017-07-03 12:00:20

Youtube API nicht bereit manchmal

Antwort

Verwandte Themen