Relire une vidéo à l'aide de YoutubeAPI

Question

J'ai une vidéo que je joue à l'aide de YouTubeAPI ( iframe ).Une image remplace la vidéo jusqu'à ce que l'on clique sur le contrôle pour démarrer la vidéo.L'image est échangée avec la vidéo et la vidéo est lue.À la fin de la vidéo, le processus est inversé.Le problème est que je peux redémarrer la vidéo une seconde fois en utilisant mon contrôle personnalisé.Voici mon 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>

Comment puis-je faire en sorte que la vidéo soit relue une deuxième, une troisième, une quatrième fois ?

Answer 1

Bien qu'il appelait jouer, la vidéo ne se posait pas à la bengage.Je devais régler

player.seekTo(0);

dans la fonction Onplayerstatechange ().

function onPlayerStateChange(event) {

    if(event.data == YT.PlayerState.ENDED){

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

    }

  }

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

Answer 2

Vous pouvez ajouter un loop paramètre:

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

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

Ou vous pouvez enregistrer votre onPlayerStateChange si le statut est 0 c'est à ce moment-là que la vidéo est terminée et il suffit d'appeler event.target.playVideo();