埋め込みVimeo動画をJavaScriptで操作するサンプルコード

埋め込みVimeo動画をJavaScriptで操作するサンプルコードについて説明します。

2019-12-24

Koki

2 分で読めます

この記事では、埋め込みVimeo動画をJavaScriptで操作するサンプコードについて説明します。

この記事の内容です。

対象読者
環境
前提条件
JavaScriptでVimeo動画を操作する
サンプルコード
参考にさせていただいたページ

対象読者

JavaScriptで埋め込みVimeo動画を操作したい方

環境

JavaScript (ES2015)

前提条件

なし

JavaScriptでVimeo動画を操作する

HTMLファイルに埋め込み用Vimeo動画を読み込む

最初に、埋め込み用Vimeo動画をiframeを使用して読み込みます。
この記事では、サンプルのVimeo動画を使用しています。

<html>
  <head>
    <script type="module" src="./javascript/index.js"></script>
  </head>
  <body>
    <!-- Specific your video URL on src attribute. -->
    <iframe
      id="sample-player"
      src="https://player.vimeo.com/video/76979871"
      width="640"
      height="360"
      frameborder="0"
      webkitallowfullscreen
      mozallowfullscreen
      allowfullscreen
      allow="autoplay"
    ></iframe>
    <div>
      <button id="play-button">play</button>
      <button id="pause-button">pause</button>
      <button id="play-pause-button">play and pause</button>
    </div>
  </body>
</html>

各HTML用のJavaScriptファイルを作成する

もし、各HTML用にJavaScriptファイルを作成しない方なら、この内容は読み飛ばしてください。

次に、各HTML用にJavaScriptファイルを作成し、埋め込みVimeo動画を操作するためのJavaScriptファイルを読み込みます。
ここで読み込んでいるJavaScriptファイルについては、次の章で説明します。

import * as vimeo from './vimeo-api-practice.js';

window.onload = () => {
  let playerInformation = new vimeo.PlayerInformation(
    'player',
    {
      playButtonId: 'play-button',
      pauseButtonId: 'pause-button',
      playPauseButtonId: 'play-pause-button'
    }
  );
  vimeo.settingPlayer(playerInformation);
}

Vimeoビデオを操作する機能のJavaScriptファイルを作成する

最後に、Vimeoビデオを操作する機能のJavaScriptファイルを作成します。

最初に、Vimeo APIを読み込みます。「何故このファイルでAPIを読み込むのか？」については、本ファイルを独立した機能として扱えるようにしたかったからです。
次に、動画プレーヤーのidと操作するボタンの各idを呼び出し元から受け取り、それらのDOM要素にイベントを設定します。
この章では動画再生と一時停止のみしか行っていませんが、他の操作も行えます。もし他の操作を行いたい場合は、公式リファレンスを参考にしてください。

本記事のコードはGitHubで公開していますので、必要な方はご自由にお使いください。

let tag = document.createElement('script');
tag.src = 'https://player.vimeo.com/api/player.js';
document.getElementsByTagName('head')[0].appendChild(tag);

export function settingPlayer(playerInformation) {
  let iframe = document.getElementById(playerInformation.playerId);
  let player = new Vimeo.Player(iframe);
  // Setting play the video by play button.
  document.getElementById(playerInformation.playButtonId)
          .addEventListener("click", event => { player.play(); });
  // Setting pause the video by play button.
  document.getElementById(playerInformation.pauseButtonId)
          .addEventListener("click", event => { player.pause(); });
  // Setting play and pause the video by play button.
  // When the video is playing, pause it. And when the video is pausing, play it.
  document.getElementById(playerInformation.playPauseButtonId)
          .addEventListener("click", event => {
            player.getPaused().then(paused => {
            paused ? player.play() : player.pause();
          });
  });
}

export class PlayerInformation {
  constructor(playerId, buttonIds) {
    this.playerId = playerId;
    if (buttonIds.playButtonId) this.playButtonId = buttonIds.playButtonId;
    if (buttonIds.pauseButtonId) this.pauseButtonId = buttonIds.pauseButtonId;
    if (buttonIds.playPauseButtonId) this.playPauseButtonId = buttonIds.playPauseButtonId;
  }
}