Spielen Sie ein Video mit der YoutubeAPI ab

Question

Ich habe ein Video, das ich mit der YouTubeAPI (iframe) abspiele.Anstelle des Videos wird ein Bild angezeigt, bis auf das Steuerelement geklickt wird, um das Video zu starten.Das Bild wird mit dem Video ausgetauscht und das Video wird abgespielt.Wenn das Video endet, wird der Vorgang umgekehrt.Das Problem besteht darin, dass ich das Video mithilfe meiner benutzerdefinierten Steuerung ein zweites Mal neu starten kann.Hier ist mein Code...

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

    <div class="video" id="vid">
        <a class="video-control" href="#"></a>
        <img id="video-front" src="<?= get_field('video_image') ?>" class="img-responsive" alt="">
        <div class="video-container">
            <iframe id="player" type="text/html"
src="http://www.youtube.com/embed/G5M721A0b_Q?enablejsapi=1&amp;rel=0&amp;autoplay=1"
frameborder="0"></iframe>
        </div>
    </div>
<script>
(function($){

//move vid control
vidControlHeight();



$('.video-control').css('left', '-' + wControl + 'px');

$('.video-control').on('click', function(event){
        event.preventDefault();

            $('#video-front').hide();
            $('.video-container').show();

            onYouTubeIframeAPIReady();

})

})(jQuery);

function vidControlHeight(){
var hBox        = $('#vid').height() / 2,
    hControl    = $('.video-control').height() / 2,
    boxPosition = hBox - hControl;
    wControl    = $('.video-control').width() / 2;


$('.video-control').css({'left':'-' + wControl + 'px', 'top': boxPosition + 'px'});
}
var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

   function onPlayerReady(event) {
    event.target.playVideo();
  }

  function onPlayerStateChange(event) {

    if(event.data == YT.PlayerState.ENDED){
        $('#video-front').show();
        $('.video-container').hide();

    }

  }
</script>

Wie kann ich dafür sorgen, dass das Video ein zweites, drittes oder viertes Mal abgespielt wird?

Answer 1

Obwohl es das Spiel anruft, setzte sich das Video nicht zurück zum Beggen.Ich musste einstellen

generasacodicetagpre.

in der auf platcherstatechange () -Funktion.

generasacodicetagpre.

https://developers.google.com/youtube/js_api_reference#Einko

Answer 2

Sie können eine hinzufügen loop Parameter:

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        },
        loop: 1
    });
}

https://developers.google.com/youtube/player_parameters#loop

Oder Sie könnten Ihren Check-in durchführen onPlayerStateChange wenn der Status ist 0 Wenn das Video zu Ende ist, rufen Sie einfach an event.target.playVideo();