はじめに

はじめまして！株式会社オークンの向坂英希と申します！
前回のプロジェクトでVimeoのAPIを触ったので、情報を共有していきたいと思います。

結論

Vue.jsでVimeo動画のフレームを自作することは可能です。
さらに、Vimeoが多くのAPIを提供しているので、動画の細かい設定や制御にも対応できます。

モジュールのインストール

npm install @vimeo/player

動画の表示

表示する動画のプレイヤーインスタンスを作成し、動画を表示する。

手順１　動画を表示する要素の指定

<template>
 <div id='vimeo'/>
</template>

手順２　プレーヤーインスタンスの作成

インスタンスを作成する関数のパラメータに下記を指定する。
第１パラメータ: 動画を表示する要素のid
第２パラメータ: 動画の埋め込みオプション
*埋め込みオプションに関しては、下記を参考にする。
https://developer.vimeo.com/player/sdk/embed

ちなみに、キーボードでの動作を制御する埋め込みオプションが最近追加されました。
キーボードの制御可否をVimeonに問い合わせた直後に追加されたので、結構ユーザの要望を反映してくれるかも？

import Player from '@vimeo/player'
export default {
  data () {
    return {
      player: undefined, // 作成したインスタンスを格納する
      // 動画の埋め込みオプション
      options: {
        id: undefined, // vimeoのURLまたはvimeoのID
      },
    }
  },
  mounted () {
    this.player = new Player('vimeo', this.options)
  }
}

以上で動画を表示することができる。

動画の制御

上記の方法で追加したプレイヤーインスタンスに対して、VimeoのSDKを用いて動画の制御ができます。

ざっとできることは下記になります。

プレイバックコントロール
プレイバック時のイベント取得
プレイバック情報の取得
プレイヤーインスタンスの制御

詳しくは下記を参考する
https://developer.vimeo.com/player/sdk/reference

主なプレイバックコントロール

再生

this.player.play()

停止

this.player.pause()

###再生速度

this.player.setPlaybackRate(rate) // rateは0.5から2で指定が可能

指定秒数からの再生

this.player.setCurrentTime(seconds) // 秒数の指定が可能

主なプレイバック時のイベント

再生

this.player.on('play', () => {
 // 再生時に発火する処理の記述
})

停止

this.player.on('pause', () => {
 // 停止時に発火する処理の記述
})

シーク（動画の再生時間を変更する時）

this.player.on('seeked', () => {
 // シーク時に発火する処理の記述
})

再生中

this.player.on('timeupdate', () => {
 // 再生中に発火する処理の記述
})

プレイバック情報

現在の再生秒数

this.player.getCurrentTime()

プレイヤーインスタンス

動画の切り替え

this.player.loadVideo(id | url) // vimeoのURLまたはvimeoのID

プレイヤーインスタンスの削除

this.player.destroy()

this.loadVideo()で動画は切り替えられるが、埋め込みオプションを選択することが出来ない。
埋め込みオプションも変更する際、一度プレイヤーインスタンスを削除して、再度作成する必要がある。
開発者の用途に応じて、使い分けることが可能である。

感想

今回初めてVimeoを使用して、サービスを作成しましたが、Vimeoの便利さに驚きました。
多様なAPIを提供していることもですが、下記の特徴もVimeoの大きな魅了でした。

商用利用ができる
セキュリティ強化や転載防止が可能
用途に合わせたプラン設定
Youtubeは商業目的とした使用は禁止されているので、これからもVimeoを使う機会がありそうです。