我想使用 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>
...然后我添加了 <script>标签位于<body>底部加载(？)API...
<script src="https://www.youtube.com/iframe_api"></script>
...最后是一个简单的演示按钮。
<button> Stop Video </button>
我希望有一种方法可以简单地调用 player.stopVideo();来自 API 的函数，并让它影响按钮单击时已嵌入的 iFrame，例如...
$('button').on('click', function () {
$('.youtube-video iframe').stopVideo();
});
...但是唉，事情似乎没那么简单!
<小时/>文档和其他答案似乎建议为播放器定义各种变量和函数，或者手动处理加载视频(而不是像本例那样动态加载)；但对于已经加载到页面上的元素来说，它似乎不必要地复杂 - 是否有我遗漏的东西或简化事情的明显方法？
详细的答案将不胜感激，因为我仍然在总体上掌握 JS。
谢谢! :)
最佳答案
因此，通过使用 New 的评论中的 fiddle ，我相信我已经找到了在我的情况下实现 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>
主要的变化来自于增加了一类.active被添加到 <section>标签来指定 YouTube 播放器 API 所定位的当前视频。 iframe 的 id 为 #youtube-video 。应该注意的是，所有 id 和类都是完全任意的。
在 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 播放器 API 事件处理程序绑定(bind)到 <button> HTML 元素:
$('button').on('click', function(){
player.stopVideo();
});
我的代码背后的目的是形成幻灯片的一部分，因此应该只有一个部分具有 .active随时上课，这可用于在不同幻灯片上选择不同的视频。
我整理了一个示例 JSFiddle here 其中包含更好的用户界面和更深入的评论，这可能对将来的人有用。
关于javascript - 从 YouTube 播放器 API 调用单个函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51690746/