はじめに
はじめまして！株式会社オークンの向坂英希と申します！
前回のプロジェクトで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を使う機会がありそうです。