从 YouTube Player API 调用单个函数？答案

【问题标题】：Calling a single function from the YouTube Player API?从 YouTube Player API 调用单个函数？
【发布时间】：2018-08-05 01:24:50
【问题描述】：

我想使用YouTube Player API 调用一个函数，该函数将停止在单击按钮时播放嵌入的 YT 视频（使用 JS 和 jQuery 在页面上动态加载）。

诚然，我对使用 API 进行 Web 开发非常陌生，尽管阅读了其他几个答案（例如 here、here 和 here），但我仍然对不同JS组件的必要性。

我有一个代码块，该代码块多次动态附加到 HTML 页面，每个条目的 YouTube URL 基于单独的 JSON 文件而更改。添加的代码如下...

<li>
  <section class="youtube-video">
    <iframe src="'theLoadedURL'?enablejsapi=1&rel=0" frameborder="0" allowfullscreen="1">
    </iframe>
  </section>
</li>

...然后我在<body> 的底部添加了<script> 标记，用于加载（？）API...

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

...最后是一个简单的演示按钮。

<button> Stop Video </button>

我希望有一种方法可以简单地从 API 调用 player.stopVideo(); 函数并让它影响按钮单击时已经嵌入的 iFrame，类似于...

$('button').on('click', function () {
    $('.youtube-video iframe').stopVideo();
});

...但是，唉，这似乎没有那么简单！

文档和其他答案似乎建议为播放器定义各种变量和函数，或者手动处理加载视频（而不是像本例那样动态加载）；但是对于页面上已经加载的元素来说，它似乎不必要地复杂 - 是否有我遗漏的东西或简化事情的明显方法？

非常感谢您提供详细的答案，因为我通常仍在掌握 JS。

谢谢！ :)

【问题讨论】：

您能否提供您拥有的 youtube 播放器源代码，以便我查看您是如何设置播放器属性的？谢谢。
是stopVideo 某种jquery 的东西吗？如果没有，$('.youtube-video iframe')[0].stopVideo(); 可能会起作用
嗨@NewToJS，这可能表明我缺乏理解，但这段代码会是什么样子？到目前为止，我编写的唯一代码是插入包含 iframe 的 html <li> 块，我正在努力解决如何设置播放器属性以及包含/定义/设置等需要什么？跨度>
@Jaromanda X ，stopVideo() 函数来自 YouTube API 文档，其中被列为 player.stopVideo();
也许这个例子会有所帮助JsFiddle Demo

标签： javascript jquery html youtube youtube-api

【解决方案1】：

因此，通过玩弄来自 cmets 的 New 的小提琴，我相信我已经找到了在我的情况下实现 Youtube Player API 的最简单方法。

首先，它需要对 HTML <li> 代码块进行少量编辑，实际上，它会动态加载到我的页面上：

<li>
    <section class="active">
        <iframe id="youtube-video" src="https://www.youtube.com/embed/y1yFiotx3qk?
        rel=0&modestbranding=1&showinfo=0&enablejsapi=1" frameborder="0"
        allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </section>
</li>

主要变化来自于在<section> 标签中添加了一个.active 类，以指定YouTube Player API 定位的当前视频。然后 iframe 的 id 为#youtube-video。需要注意的是，所有的 ids 和 classes 都是完全任意的。

在 HTML 的底部 <body> 我添加了 API 脚本...

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

...但是，发现将其置于同一位置的所有其他<script> 标记之上很重要。

在此之后，我设置了我的 JS 文件（使用 jQuery）如下：

$(document).ready(function () {

    // Creates arbitrary global 'player' variable to be defined later
    var player;

    function onYouTubeIframeAPIReady() {

        setTimeout(function() { //Using this as seemed to come across occasional bugs in Chrome

            console.log('API Loaded!')

            // Selects first <li> tag iframe contained in a section with the class of '.active'
            var $selectedVideo = $('.active #youtube-video')[0];

            // Uses the previous variable to define the youtube player
            player = new YT.Player($selectedVideo);

        }, 100);

    }

    // Calls the Function
    onYouTubeIframeAPIReady();

});

最后，同样在$(document).ready() 函数中，我能够将相关的YouTube Player API 事件处理程序绑定到<button> HTML 元素：

$('button').on('click', function(){
    player.stopVideo();
});

我的代码背后的意图是构成幻灯片的一部分，因此任何时候都应该只有一个部分具有.active 类，这可用于在不同的幻灯片上选择不同的视频。

我整理了一个示例 JSFiddle here，其中包含更好的 UI 和更深入的 cmets，将来可能对某人有用。

【讨论】：