Example codes about operating an embedded Vimeo video by JavaScript.

December 24, 2019

Koki

3-Minute Read

This article explains the example codes of operating the embedded Vimeo video by JavaScript.

The following lists are the table of contents about this article.

Target audience
Environment
Preconditions
Operating an embedded Vimeo video by JavaScript
Example code
Reference articles

Target audience

Those who want to operating the Vimeo video by JavaScript.

Environment

JavaScript (ES2015)

Preconditions

Nothing.

Operating an embedded Vimeo video by JavaScript

Loading the embedded Vimeo video to a HTML file

First, load the embedded Vimeo video to a HTML file by iframe.
In this article case, using a sample Vimeo video.

<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>

Create a JavaScript file for each HTML file

If you do not create a JavaScript file each HTML file, ignore this chapter, please.
Next, create a JavaScript file for each HTML file, and loading a function of operation any embedded Vimeo videos.
What about “vimeo-api-practice.js” I will explain on next chapter.

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);
}

Create a JavaScript to operating the Vimeo video.

Finally, create a JavaScript file to operating an embedded Vimeo video.

First, load the Vimeo API in this file so that we can use this file as a common part.
Next, recieve player id and button ids from caller by arguments, then setting any events.
This chapter explains only play and pause, but you can do other operations. When you would like to do another operations, please read the official references.

If you would like to use the following codes, please check my GitHub repository.

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;
  }
}