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

플레이를 호출하고 있지만 비디오는 Begggining으로 비디오를 다시 설정하지 않았습니다.나는

를 설정해야했다

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