草庐IT

javascript - YouTube(注入(inject))视频结束回调

coder 2024-05-06 原文

我将 YouTube iframe 注入(inject)文档准备好的 div 并将其绑定(bind)到点击:

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>');
        ...
    }
 }

我想在视频结束时进行回调。我读过 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(并重新初始化视频？)
  • 比第一种方法(注入(inject) iframe)更多的脚本错误

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

最佳答案

以下代码的工作示例也在 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+
            '" 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
            }
        });
    });
});

关于javascript - YouTube(注入(inject))视频结束回调，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12107202/

javascriptYouTube3934iframejquerycallbackyoutube-api

有关javascript - YouTube(注入(inject))视频结束回调的更多相关文章

  1. ruby - 如何在 Rails 4 中使用表单对象之前的验证回调？ - 2

    我有一个服务模型/表及其注册表。在表单中，我几乎拥有服务的所有字段，但我想在验证服务对象之前自动设置其中一些值。示例:--服务Controller#创建Action:defcreate@service=Service.new@service_form=ServiceFormObject.new(@service)@service_form.validate(params[:service_form_object])and@service_form.saverespond_with(@service_form,location:admin_services_path)end在验证@ser

  2. ruby - 有人可以帮助解释类创建的 post_initialize 回调吗 (Sandi Metz) - 2

    我正在阅读SandiMetz的POODR，并且遇到了一个我不太了解的编码原则。这是代码:classBicycleattr_reader:size,:chain,:tire_sizedefinitialize(args={})@size=args[:size]||1@chain=args[:chain]||2@tire_size=args[:tire_size]||3post_initialize(args)endendclassMountainBike此代码将为其各自的属性输出1,2,3,4,5。我不明白的是查找方法。当一辆山地自行车被实例化时，因为它没有自己的initialize方法

  3. 动漫制作技巧如何制作动漫视频 - 2

    动漫制作技巧是很多新人想了解的问题，今天小编就来解答与大家分享一下动漫制作流程，为了帮助有兴趣的同学理解，大多数人会选择动漫培训机构，那么今天小编就带大家来看看动漫制作要掌握哪些技巧？一、动漫作品首先完成草图设计和原型制作。设计草图要有目的、有对象、有步骤、要形象、要简单、符合实际。设计图要一致性，以保证制作的顺利进行。二、原型制作是根据设计图纸和制作材料，可以是手绘也可以是3d软件创建。在此步骤中，要注意的问题是色彩和平面布局。三、动漫制作制作完成后，加工成型。完成不同的表现形式后，就要对设计稿进行加工处理，使加工的难易度降低，并得到一些基本准确的概念，以便于后续的大样、准确的尺寸制定。四、

  4. python ffmpeg 使用 pyav 转换 一组图像 到 视频 - 2

    2022/8/4更新支持加入水印水印必须包含透明图像，并且水印图像大小要等于原图像的大小pythonconvert_image_to_video.py-f30-mwatermark.pngim_dirout.mkv2022/6/21更新让命令行参数更加易用新的命令行使用方法pythonconvert_image_to_video.py-f30im_dirout.mkvFFMPEG命令行转换一组JPG图像到视频时，是将这组图像视为MJPG流。我需要转换一组PNG图像到视频，FFMPEG就不认了。pyav内置了ffmpeg库，不需要系统带有ffmpeg工具因此我使用ffmpeg的python包装p

  5. TimeSformer：抛弃CNN的Transformer视频理解框架 - 2

    Transformers开始在视频识别领域的“猪突猛进”，各种改进和魔改层出不穷。由此作者将开启VideoTransformer系列的讲解，本篇主要介绍了FBAI团队的TimeSformer，这也是第一篇使用纯Transformer结构在视频识别上的文章。如果觉得有用，就请点赞、收藏、关注！paper:https://arxiv.org/abs/2102.05095code(offical):https://github.com/facebookresearch/TimeSformeraccept:ICML2021author:FacebookAI一、前言Transformers(VIT)在图

  6. ruby - 这个 ruby​​ 注入(inject)魔术是如何工作的？ - 2

    我今天看到了一个ruby​​代码片段。[1,2,3,4,5,6,7].inject(:+)=>28[1,2,3,4,5,6,7].inject(:*)=>5040这里的注入(inject)和之前看到的完全不一样，比如[1,2,3,4,5,6,7].inject{|sum,x|sum+x}请解释一下它是如何工作的？ 最佳答案 没有魔法，符号(方法)只是可能的参数之一。这是来自文档:#enum.inject(initial,sym)=>obj#enum.inject(sym)=>obj#enum.inject(initial){|mem

  7. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

    我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

  8. ruby - 了解在 Ruby 中与 lambda 一起使用的 inject 行为 - 2

    我经常将预配置的lambda插入可枚举的方法中，例如“map”、“select”等。但是“注入(inject)”的行为似乎有所不同。例如与mult4=lambda{|item|item*4}然后(5..10).map&mult4给我[20,24,28,32,36,40]但是，如果我制作一个2参数lambda用于像这样的注入(inject)，multL=lambda{|product,n|product*n}我想说(5..10).inject(2)&multL因为“inject”有一个可选的单个初始值参数，但这给了我......irb(main):027:0>(5..10).inject

  9. ruby-on-rails - 将保存回调添加到单个 ActiveRecord 实例，可以吗？ - 2

    是否可以为单个ActiveRecord实例添加回调？作为进一步的限制，这是继续使用库，所以我无法控制该类(除了对其进行猴子修补)。这或多或少是我想做的:defdo_something_creazymessage=Message.newmessage.on_save_call:do_even_more_crazy_stuffenddefdo_even_more_crazy_stuff(message)puts"Message#{message}hasbeensaved!Hallelujah!"end 最佳答案 你可以通过在创建对象后立

  10. ruby - 如果满足给定条件，则结束 ruby​​ 程序 - 2

    基本上，我只是试图在满足特定条件时停止程序运行其余行。unlessraw_information.firstputs"Noresultswerereturnedforthatquery"breakend然而，在程序运行之前我得到了这个错误:Invalidbreakcompileerror(SyntaxError)执行此操作的正确方法是什么？ 最佳答案 abort("Noresultswerereturnedforthatquery")unlesscondition或unlessconditionabort("Noresultswer

随机推荐