YouTube（注入）视频结束回调

Posted 2023-02-24

【中文标题】YouTube（注入）视频结束回调

【英文标题】：YouTube (injected) video ends callback

【发布时间】：2012-08-19 21:18:58

【问题描述】：

我将 YouTube iframe 注入准备好的文档中的 div 并将其绑定到点击：

jQuery(document).ready(function($) 
    jQuery('.video-thumb').click(function()
        ...
        $('#player').html('<iframe   src="http://www.youtube.com/embed/' + $(this).attr('videoid') + '?rel=0&wmode=transparent" frameborder="0" allowfullscreen></iframe>');
        ...
    
 

我想在视频结束时进行回调。我已经阅读了有关onYouTubePlayerAPIReady 的信息，但它必须放在准备好的文档之外。

我已尝试通过此构建外部文档来加载视频播放器：

var player;
function onYouTubePlayerAPIReady() 
    player = new YT.Player('player', 
      height: '421',
      width: '761',
      videoId: '',
      playerVars:  autoplay: 1, autohide: 1, showinfo: 0 ,
      events: 
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      
    );

但我遇到了一些问题：

showinfo:0 没用，最后还有其他视频缩略图 我不知道如何更改视频 ID（并重新启动视频？） 比第一种方法（注入 iframe）更多的脚本错误

我更喜欢使用第一种方法，但是如何创建视频结束回调？谢谢。

【问题讨论】：

为什么要通过 jQuery 加载 iframe？为什么不直接使用 API 使用 videoId: 'XXXXXX' 选项加载它？

您的问题标题具有误导性...您清楚地知道如何检测视频何时从其他 SO 问题结束。***.com/a/11726088/65387

@Asherlc videoId 是 onYouTubePlayerAPIReady() 的选项，必须将其放在文档之外。我需要在元素点击时加载视频。有没有办法改变 videoId 并重新启动播放器？我试过了，但没有运气。

【参考方案1】：

下面代码的一个工作示例也在jsfiddle.net上。

一些注意事项：

使用iframe_api，而不是javascript_api YT.Player 构造函数很小，因为您自己构建 iframe。 “playerVars”作为 iframe URL 参数包含在内。 设置了参数“enablejsapi=1”。

示例标记

<script src="http://www.youtube.com/iframe_api"></script>

<a style="display: block;" class="video-thumb" id="HuGbuEv_3AU" href="#">
    Megadeth: Back In The Day
</a>  
<a style="display: block;" class="video-thumb" id="jac80JB04NQ" href="#">
    Judas Priest: Metal Gods
</a> 
<a style="display: block;" class="video-thumb" id="_r0n9Dv6XnY" href="#">
    Baltimora: Tarzan Boy
</a>   

<div id="container"></div>
<div id="log">--Logging enabled--</div>

JavaScript

function log(msg) 
    jQuery('#log').prepend(msg + '<br/>');


function onPlayerStateChange(event) 
    switch(event.data) 
        case YT.PlayerState.ENDED:
            log('Video has ended.');
            break;
        case YT.PlayerState.PLAYING:
            log('Video is playing.');
            break;
        case YT.PlayerState.PAUSED:
            log('Video is paused.');
            break;
        case YT.PlayerState.BUFFERING:
            log('Video is buffering.');
            break;
        case YT.PlayerState.CUED:
            log('Video is cued.');
            break;
        default:
            log('Unrecognized state.');
            break;
    


jQuery(document).ready(function($) 
    $('.video-thumb').click(function() 

        var vidId = $(this).attr('id');
        $('#container').html('<iframe id="player_'+vidId+
            '"   src="http://www.youtube.com/embed/'+
            vidId+'?enablejsapi=1&autoplay=1&autohide=1&showinfo=0" '+
            'frameborder="0" allowfullscreen></iframe>');

        new YT.Player('player_'+vidId, 
            events: 
                'onStateChange': onPlayerStateChange
            
        );
    );
);

【讨论】：

很好，我想我也会在我的项目中使用这个例子 :-) 谢谢你的发帖。

嘿..你知道vimeo这样的事情吗？