Повторное воспроизведение видео с использованием 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

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();