Воспроизведите видео с помощью YoutubeAPI.

Question

У меня есть видео, которое я воспроизвожу с помощью YouTubeAPI (iframe).Изображение будет находиться на месте видео до тех пор, пока не будет нажат элемент управления для запуска видео.Изображение заменяется видео, и видео воспроизводится.Когда видео заканчивается, процесс обратный.Проблема в том, что я могу перезапустить видео во второй раз, используя свой собственный элемент управления.Вот мой код...

<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>

Как сделать так, чтобы видео воспроизводилось второй, третий, четвертый раз?

Answer 1

Несмотря на то, что он звонил в игру, видео не устанавливало себя обратно к началу.Я должен был установить

player.seekTo(0);

.

в функции 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 / P >.

Answer 2

Вы можете добавить loop параметр:

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

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

Или вы можете проверить свой onPlayerStateChange если статус 0 вот когда видео закончилось и просто позвони event.target.playVideo();