使用 Youtube API 重播视频

Posted 2023-02-24

【中文标题】使用 Youtube API 重播视频

【英文标题】：Replay a video using YoutubeAPI

【发布时间】：2013-12-01 11:49:19

【问题描述】：

我有一个正在使用 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" >
        <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>

如何让视频重播第二次、第三次、第四次？

【问题讨论】：

你看过文档了吗？ developers.google.com/youtube/v3/docs

当然可以，但看不到如何重启

【参考方案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

【参考方案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();