Wie eine Warnung, wenn ein YouTube-Video beendet (keine automatische Wiedergabe)

Question

Ich bin mit dem Youtube-API zu erzeugen, um ein Video mit dem folgende Beispiel generieren:

HTML:

<div id="player"></div> 

Javascript:

<script src="http://www.youtube.com/player_api"></script> 

<script> 

    // create youtube player 
    var player; 
    function onYouTubePlayerAPIReady() { 
     player = new YT.Player('player', { 
      height: '390', 
      width: '640', 
      videoId: '0Bmhjf0rKe8', 
      events: { 
      onReady: onPlayerReady, 
      onStateChange: onPlayerStateChange 
      } 
     }); 
    } 

    // autoplay video 
    function onPlayerReady(event) { 
    } 

    // when video ends 
    function onPlayerStateChange(event) {   
     if(event.data === 0) {   
      alert('done'); 
     } 
    } 

</script> 

Dieser Code über die folgende Frage zugrunde:

How to detect when a youtube video finishes playing?

Der einzige Unterschied ist, dass ich die "onPlayerReady" -Funktion gelöscht habe, da ich nicht möchte, dass dieses Video automatisch abgespielt wird. So würde ich dieses Video wie einen externen Link gespielt werde mit dem folgenden Javascript verwenden:

$(document).ready(function() { 

    $('#play-video').on('click', function(ev) { 

    $("#player")[0].src += "&autoplay=1"; 
    ev.preventDefault(); 

    }); 

}); 

Und den folgenden HTML-Code:

<a id="play-video" href="#">Play Video</a> 

Wenn er ausgeführt wird, das Video abgespielt wird, wenn der Link angeklickt wird . Am Ende des Videos sollte jedoch eine Warnung angezeigt werden, die darauf hinweist, dass das Video beendet wurde.

Diese Warnung wird NUR angezeigt, wenn das Video über die standardmäßige Youtube-Wiedergabetaste in der Mitte des Videos abgespielt wird. Wenn sie jedoch über den Link "Play-Video" abgespielt wird, wird der Alarm nicht angezeigt.

Irgendwelche Ideen von was ich könnte fehlen?

Danke!

Answer 1

Um zu überprüfen, ob das Video fertig abgespielt wurde, können Sie dies tun.

player.addEventListener("onStateChange", function(state){ 
    if(state === 0){ 
     // video has finished playing 
    } 
}); 

Answer 2

Hey, etwas Sie tun können, ist eingebaute api playVideo() Methode Ruf-Player auf Ihrem Play-Video-Link. Siehe Youtube API guide.

Was ich geändert habe, ist Ihr Play Video Link Klick-Listener zu diesem und es gibt mir das erwartete Ergebnis, wie Sie benötigen würden.

$('#play-video').on('click', function(ev) { 
     if(player){ 
      player.playVideo(); 
     } 
     ev.preventDefault(); 
}); 

finden Sie Demo für den gleichen https://codepen.io/samarthsinha/pen/ZKBBqM

Answer 3

bereits.

$(document).ready(function() { 
    $('#play-video').on('click', function(ev) { 
    $("#player")[0].src += "&autoplay=1"; 
    onYouTubePlayerAPIReady(); 
    ev.preventDefault(); 
    }); 
});