加载 YouTube iframe 播放器 API - JavaScript

如果你想在你的网页中嵌入 YouTube 视频，你可以使用官方提供的API。本文将向您展示如何通过 JavaScript 加载 YouTube iframe 播放器。

步骤

1. 注册你的应用程序并获取 API 密钥

在开始之前，你需要拥有一个 Google 帐号，并且注册一个新的应用程序来获取 API 密钥。

1. 访问 Google Developers Console 并使用你的 Google 帐号登录。

2. 点击“创建项目”按钮，并为你的应用程序设置名称。

3. 使用左侧的导航栏，找到“APIs和服务”，并点击“库”。

4. 在搜索框中输入“YouTube iframe player API”，然后点击“搜索”。点击“启用”按钮来启用 API。

5. 点击左侧导航栏上的“凭据”选项，然后点击“创建凭据”按钮。

6. 选择“API 密钥”选项，然后根据提示进行操作。记得选择你的应用程序类型“浏览器”或“服务器”，并且设置允许访问的域名。

7. 保存 API 密钥，这将会是以后在代码中使用的值。

8. 引用 API

在你的 HTML 文件中添加以下代码片段，用于引用 YouTube iframe 播放器 API。

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

3. 创建播放器

在 JavaScript 中创建一个新的 iframe 播放器实例。你需要提供以下参数：

• videoId - 要播放的视频的 ID。
• playerVars - 播放器配置的选项，例如视频的开始时间。

<div id="player"></div>

// 当API已准备好时调用onYouTubeIframeAPIReady()函数。
function onYouTubeIframeAPIReady() {
  var player;
  player = new YT.Player('player', {
    videoId: 'VIDEO_ID',
    playerVars: {
      'autoplay': 1,
      'controls': 0,
      'showinfo': 0
    }
  });
}

4. 控制播放器

你可以使用以下方法控制播放器：

• playVideo() - 播放视频。
• pauseVideo() - 暂停视频。
• stopVideo() - 停止视频。

function playVideo() {
  player.playVideo();
}

function pauseVideo() {
  player.pauseVideo();
}

function stopVideo() {
  player.stopVideo();
}

结论

本文向您展示了如何加载 YouTube iframe 播放器 API 并使用 JavaScript 控制播放器。要深入了解更多，请查看官方文档。