ishikawaVimeoのPlayer APIを使ってプレーヤーを操作する
VimeoのPlayer APIについて少し調べる機会がありましたので、使い方などをまとめてみます。
■目次
1. 基本的な埋め込み
まずは、HTMLにPlayer APIを読み込む記述を追加します。
今回はjQueryで記述するので、合わせてjQueryも読み込んでおきます。
■HTML
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> <script src="https://player.vimeo.com/api/player.js"></script>
次にプレーヤーを操作する記述を追加していきますが、VimeoのPlayer APIを使用する方法がいくつかありますので、それぞれ紹介していきます。
1-1. HTMLにプレーヤーのタグを埋め込んでおく方法
HTML内にプレーヤーのタグ(iframe)を直接埋め込んで、そのプレーヤーをそのままPlayer APIで操作します。
今回はJavaScriptで指定しやすいように、iframeにid="sample"を追加しておきます。
■HTML
<iframe id="sample" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
プレーヤーを操作するための記述を追加します。
今回はプレーヤー再生時にconsoleを表示するようにしてみます。
■JavaScript
$(function() {
var player = new Vimeo.Player($('#sample'));
// プレーヤー再生時にconsole表示
player.on('play', function() {
console.log('再生');
});
});
これでプレーヤー再生時にconsoleが表示されるようになりました。
サンプルページ
ちなみに今回はjQueryで記述するようにしていますが、jQueryを使わなくても記述可能です。
jQueryを使わない場合は以下のようになります。
■JavaScript
var player = new Vimeo.Player('sample');
// プレーヤー再生時にconsole表示
player.on('play', function() {
console.log('再生');
});
1-2. JavaScriptで指定して埋め込む方法
HTML内にidを指定した空のdivを配置して、そのdiv内にJavaScriptでプレーヤーのタグ(iframe)を埋め込みます。
■HTML
<div id="sample"></div>
■JavaScript
$(function() {
// プレーヤーのオプション設定
var options = {
id: 76979871, // VimeoのID
width: 640 // プレーヤーの幅
};
var player = new Vimeo.Player($('#sample'), options);
// プレーヤー再生時にconsole表示
player.on('play', function() {
console.log('再生');
});
});
上記ではVimeoのIDで動画を指定しましたが、VimeoのURLでも指定することができます。
■JavaScript
$(function() {
// プレーヤーのオプション設定
var options = {
url: 'https://vimeo.com/76979871' // VimeoのURL
};
var player = new Vimeo.Player($('#sample'), options);
// プレーヤー再生時にconsole表示
player.on('play', function() {
console.log('再生');
});
});
1-3. data属性を指定して埋め込む方法
Vimeoを埋め込む空divにdata属性を追加して、プレーヤーのタグ(iframe)を埋め込みます。
■HTML
<div id="sample" data-vimeo-id="76979871"></div>
■JavaScript
$(function() {
var player = new Vimeo.Player($('#sample'));
// プレーヤー再生時にconsole表示
player.on('play', function() {
console.log('再生');
});
});
JavaScriptで指定して埋め込んだ時と同じように、IDではなくURLで指定することもできます。
■HTML
<div id="sample" data-vimeo-url="https://vimeo.com/76979871" data-vimeo-width="640"></div>
2. メソッド
2-1. プレーヤーの操作
再生や一時停止、シークバーの移動、音量調整などを操作してみます。
■HTML
<div id="sample"></div> <button id="play">再生</button> <button id="pause">一時停止</button> <button id="prev">10秒前へ</button> <button id="next">10秒先へ</button> <button id="volup">音量アップ</button> <button id="voldown">音量ダウン</button> <button id="mute">ミュート</button>
今回はplay()のメソッド以外では省略していますが、各メソッドでエラーが発生していないかを調べる場合、catch()を使用します。
■JavaScript
$(function() {
// プレーヤーのオプション設定
var options = {
id: 76979871 // VimeoのID
};
var player = new Vimeo.Player($('#sample'), options);
// 再生
$('#play').on('click', function() {
player.play().then(function() {
console.log('再生');
}).catch(function(error) {
console.log(error);
});
});
// 一時停止
$('#pause').on('click', function() {
player.pause().then(function() {
console.log('一時停止');
});
});
// 10秒前へ
$('#prev').on('click', function() {
// 現在の秒数を取得
player.getCurrentTime().then(function(seconds) {
console.log('現在の秒数:', seconds);
// 10秒前に戻す
player.setCurrentTime(seconds - 10).then(function(seconds) {
console.log('変更後の秒数:', seconds);
});
});
});
// 10秒先へ
$('#next').on('click', function() {
// 現在の秒数を取得
player.getCurrentTime().then(function(seconds) {
console.log('現在の秒数:', seconds);
// 10秒先に進める
player.setCurrentTime(seconds + 10).then(function(seconds) {
console.log('変更後の秒数:', seconds);
});
});
});
// 音量アップ
$('#volup').on('click', function() {
// 現在の音量を取得
player.getVolume().then(function(volume) {
console.log('現在の音量:', volume);
// 音量を0.1アップする
player.setVolume(volume + 0.1).then(function(volume) {
console.log('変更後の音量:', volume);
});
});
});
// 音量ダウン
$('#voldown').on('click', function() {
// 現在の音量を取得
player.getVolume().then(function(volume) {
console.log('現在の音量:', volume);
// 音量を0.1ダウンする
player.setVolume(volume - 0.1).then(function(volume) {
console.log('変更後の音量:', volume);
});
});
});
// ミュート
$('#mute').on('click', function() {
player.setVolume(0);
});
});
2-2. 動画情報の取得
動画の長さやタイトルなどの情報を取得して、consoleに表示してみます。
■HTML
<div id="sample"></div>
■JavaScript
$(function() {
// プレーヤーのオプション設定
var options = {
id: 76979871 // VimeoのID
};
var player = new Vimeo.Player($('#sample'), options);
// 動画の長さ
player.getDuration().then(function(duration) {
console.log('動画の長さ;', duration);
});
// 動画のタイトル
player.getVideoTitle().then(function(title) {
console.log('動画のタイトル;', title);
});
// 動画のID
player.getVideoId().then(function(id) {
console.log('動画のID;', id);
});
// 動画のURL
player.getVideoUrl().then(function(url) {
console.log('動画のURL;', url);
});
// 動画の字幕情報
player.getTextTracks().then(function(tracks) {
console.log('動画の字幕情報', tracks);
});
});
3. イベント
プレーヤー読み込み時や再生時に発火するイベントを試してみます。
■JavaScript
$(function() {
// プレーヤーのオプション設定
var options = {
id: 76979871 // VimeoのID
};
var player = new Vimeo.Player($('#sample'), options);
// 読み込み
player.on('loaded', function(data) {
console.log('読み込み', data);
});
// 再生した時
player.on('play', function(data) {
console.log('再生', data);
});
// 一時停止した時
player.on('pause', function(data) {
console.log('一時停止', data);
});
// 最後まで再生した時
player.on('ended', function(data) {
console.log('再生終了', data);
});
// シークした時
player.on('seeked', function(data) {
console.log('シーク', data);
});
});
4. オプション
オプションでは自動再生やループ、プレーヤーの表示の設定などが行えます。
■JavaScript
$(function() {
// プレーヤーのオプション設定
var options = {
id: 76979871, // VimeoのID
autoplay: true, // 自動再生
loop: true, // ループ
color: 'ff0000', // プレーヤーのカラー
byline: false, // 投稿者部分の表示
portrait: false, // 左上のVimeoのマークの表示
title: false // タイトルの表示
};
var player = new Vimeo.Player($('#sample'), options);
});
data属性で指定することもできます。
■HTML
<div id="sample" data-vimeo-id="76979871" data-vimeo-autoplay="true" data-vimeo-loop="true" data-vimeo-color="ff0000" data-vimeo-byline="false" data-vimeo-portrait="false" data-vimeo-title="false"></div>
■JavaScript
$(function() {
var player = new Vimeo.Player($('#sample'));
});
5. 複数配置した場合
Vimeoのプレーヤーを複数配置した場合、デフォルトで同時再生を防止するようになっています。
■HTML
<div id="sample"></div> <div id="sample2"></div>
■JavaScript
$(function() {
// プレーヤーのオプション設定
var options = {
id: 76979871 // VimeoのID
};
var options2 = {
id: 59777392 // VimeoのID
};
var player = new Vimeo.Player($('#sample'), options);
var player2 = new Vimeo.Player($('#sample2'), options2);
});
同時再生するかどうかは、オプションのautopauseで設定できます。
autopauseをfalseにすることで、同時再生するようになります。
■JavaScript
$(function() {
// プレーヤーのオプション設定
var options = {
id: 76979871, // VimeoのID
autopause: false // 同時再生するかどうか
};
var options2 = {
id: 59777392, // VimeoのID
autopause: false // 同時再生するかどうか
};
var player = new Vimeo.Player($('#sample'), options);
var player2 = new Vimeo.Player($('#sample2'), options2);
});
他にも色々な設定ができますので、詳しくは公式のドキュメントをご確認ください。
【参考サイト】
