YouTube（已注入）视频会结束回拨 [英] YouTube (injected) video ends callback

问题描述

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

I inject YouTube iframe to a div in document ready and bind it to click:

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

我想在视频结束时做回调，我已经阅读了

And I want to do a callback when video ends. I have read about onYouTubePlayerAPIReady, but it has to be put outside document ready.

我试图通过以下方式加载视频播放器：a）在YouTube上加载视频播放器这个建筑外部文件准备：

I have tried to load video player by this construction outside document ready:

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）

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

I prefer using first method, but how to create video ends callback? Thanks.

推荐答案

以下代码的工作示例也在 jsfiddle.net 。

A working example of the below code is also on jsfiddle.net.

一些备注：

• 使用 iframe_api ，而不是 javascript_api


• YT.Player构造函数是最小的，因为您自己构建了iframe。


• playerVars

参数enablejsapi = 1已设置。

• Uses the iframe_api, not the javascript_api
• The YT.Player constructor is minimal because you are building the iframe yourself.
• The "playerVars" are included as iframe URL parameters.
• The parameter "enablejsapi=1" is set.

<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

The 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+
            '" width="420" height="315" 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
            }
        });
    });
});

这篇关于YouTube（已注入）视频会结束回拨的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！