在 JavaScript 中暂停 YouTube iFrame API [英] Pausing YouTube iFrame API in JavaScript
问题描述
我在幻灯片中嵌入了一个 Youtube 视频,当用户单击 img
缩略图时,我想暂停该视频:
I have a Youtube video embedded in a slideshow that I would like to pause when the user clicks on an img
thumbnail:
<li><iframe width="430" height="241" src="http://www.youtube.com/watch?v=XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="my-video"></iframe></li>
我已经了解了 Youtube API,但我对如何开始感到困惑.
I've been over the Youtube API but I'm confused how to get things started.
当我将 ?enablejsapi
附加到 YouTube video id
的末尾时,API JS 是否会自动加载?
Does the API JS load automatically when I append ?enablejsapi
to the end of the YouTube video id
?
这是我的 JS:
var player1 = document.getElementById('my-video');
$('img').click(function () {
player1.pauseVideo();
})
这是我根据下面马特的回答所做的,对于任何想知道的人:
Here's what I did based on Matt's answer below, for anyone wondering:
<li><iframe width="430" height="241" src="http://www.youtube.com/embed/XjUz8IT0CYg?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-1"></iframe></li>
<li><iframe width="430" height="241" src="http://www.youtube.com/embed/HVhSasnVjMQ?enablejsapi=1&theme=light&showinfo=0" frameborder="0" allowfullscreen id="player-2"></iframe></li>
然后是我的 JS:
var tag = document.createElement('script');
tag.src = "//www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// Create YouTube player(s) after the API code downloads.
var player1;
var player2;
function onYouTubeIframeAPIReady() {
player1 = new YT.Player('player-1');
player2 = new YT.Player('player-2');
}
然后在document.ready
:
$(document).ready(function () {
$(".slideshow-1 img").click(function () {
player1.stopVideo();
});
$(".slideshow-2 img").click(function () {
player2.stopVideo();
});
}
推荐答案
在嵌入字符串中附加 ?enablejsapi
不会自动包含 API 代码.它只向 API 注册该特定嵌入.
Appending ?enablejsapi
in the embed string does not automatically include the API code. It only registers that particular embed with the API.
您想在此处阅读第一个示例:https://developers.google.com/youtube/iframe_api_reference
You want to read the first example here: https://developers.google.com/youtube/iframe_api_reference
- 异步代码段下载并执行 YT iframe API
onYouTubeIframeAPIReady()
在 API 就绪时触发- 创建一个新的
YT.Player
对象 - 您的代码现在可以在播放器对象上调用
pauseVideo()
- The asynchronous code snippet downloads and executes the YT iframe API
onYouTubeIframeAPIReady()
is fired when the API is ready- Create a new
YT.Player
object - Your code can now call
pauseVideo()
on your player object
您很可能希望在 onYouTubeIframeAPIReady()
被触发之前禁用 img 上的任何事件.
You will most likely want to disable any events on your img until onYouTubeIframeAPIReady()
has been fired.
这篇关于在 JavaScript 中暂停 YouTube iFrame API的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!