YouTube 和 Vimeo 视频的播放和暂停按钮（通过它们的 API）

有时您只需要通过页面上的某些用户交互来开始播放视频，而不仅仅是直接点击该视频本身。也许您自己的“播放视频”按钮位于您的页面上，并且您希望在点击该按钮时开始播放该视频。那是 JavaScript 的领域。如果该视频是 YouTube 或 Vimeo 视频，我们需要使用它们提供的 API。没问题。

对于这些示例，我们假设您已经选择了一个视频，并且您将把它放在页面上的一个

对于 YouTube

1. 确保 iframe src URL 的末尾有 ?enablejsapi=1

像这样

<iframe src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1" frameborder="0" allowfullscreen id="video"></iframe>

我还将一个 id 属性放在 iframe 上，以便通过 JavaScript 轻松快速地定位它。

2. 加载 YouTube 播放器 API

您可以直接在 <script> 中链接到它，但他们所有的文档都显示了以 异步风格 加载它，这对于第三方脚本来说总是好的，所以让我们这样做

// Inject YouTube API script
var tag = document.createElement('script');
tag.src = "//www.youtube.com/player_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

3. 创建一个名为 onYouTubePlayerAPIReady 的全局函数

这是 回调函数，YouTube API 在准备就绪时会调用它。它需要命名为这个。

function onYouTubePlayerAPIReady() {

}

您很可能在页面上对 JavaScript 有一些 结构，因此一般情况下，我建议让此函数调用组织系统中的另一个函数，并立即走上正轨。但对于本教程，让我们保持它的“汤汁感”。

4. 创建播放器对象

这是能够控制该视频的对象。我们将使用 HTML 中该 iframe 上的 id 属性来创建它。

var player;

function onYouTubePlayerAPIReady() {
  // create the global player from the specific iframe (#video)
  player = new YT.Player('video', {
    events: {
      // call this function when player is ready to use
      'onReady': onPlayerReady
    }
  });
}

另一个回调！

5. 创建“播放器就绪”回调并绑定事件

我们在创建播放器对象时为该函数命名。它会自动将事件对象传递给它，其中 event.target 是播放器，但由于我们已经为此有一个全局变量，所以让我们只使用它。

这里，我们将一个简单的点击事件绑定到页面上 id 为 #play-button 的元素（任何您想要的自定义按钮）并调用播放器对象的 playVideo 方法。

function onPlayerReady(event) {
  
  // bind events
  var playButton = document.getElementById("play-button");
  playButton.addEventListener("click", function() {
    player.playVideo();
  });
  
  var pauseButton = document.getElementById("pause-button");
  pauseButton.addEventListener("click", function() {
    player.pauseVideo();
  });
  
}

现在一起

就这样！这是一个演示

查看 CodePen 上的 Chris Coyier 的笔 YouTube 播放按钮 (@chriscoyier)。

我在里面使用了一些 SVG 模板 来创建按钮，只是为了好玩。

对于 Vimeo

1. 确保 iframe src URL 的末尾有 ?api=1

<iframe src="//player.vimeo.com/video/80312270?api=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen id="video"></iframe>

我还将一个 id 属性放在 iframe 上，以便通过 JavaScript 轻松快速地定位它。

2. 加载“froogaloop” JS 库

Vimeo 播放器 API 实际上是通过将命令直接发送到 iframe 的 postMessage 来工作的。您不需要 froogaloop 库 来执行此操作，但 postMessage 本身有一些复杂性，而这个库（由 Vimeo 本身创建）使它变得更加容易。此外，它只有 1.8kb，所以我建议使用它。

<script src="froogaloop.min.js"></script>

3. 创建播放器对象

var iframe = document.getElementById('video');

// $f == Froogaloop
var player = $f(iframe);

我们通过添加的 id 属性来定位 iframe。然后我们使用特殊的 froogaloop $f 来创建播放器。

4. 绑定事件

现在我们只需要调用该播放器对象上的方法来播放和暂停视频，所以让我们在点击播放和暂停按钮时调用它们。

var playButton = document.getElementById("play-button");
playButton.addEventListener("click", function() {
  player.api("play");
});

var pauseButton = document.getElementById("pause-button");
pauseButton.addEventListener("click", function() {
  player.api("pause");
});

现在一起

就这样！这是一个演示

查看 CodePen 上的 Chris Coyier 的笔 Vimeo 视频的暂停/播放按钮 (@chriscoyier)。

---

您可以使用这两种服务的 API 做更多的事情。这很有趣，直接开始吧！

• Vimeo API
• YouTube API