サイト制作に関するメモ書き

HOME > JavaScript > VimeoのPlayer APIの使い方まとめ

VimeoのPlayer APIの使い方まとめ

VimeoのPlayer APIを公式のドキュメントを見ながら色々と触ってみたので、使い方をまとめてみます。

注意点

対応ブラウザは公式のドキュメント内に記載がありますが、IE9以上とChrome,Firefox,Safari,Operaでサポートされているようです。
また、スマートフォンでは一部メソッドなどが対応していないようなので注意してください。
 

基本的な使い方

Player APIのライブラリを読み込みます。

<script src="https://player.vimeo.com/api/player.js"></script>

VimeoをHTML内に埋め込みます。
その際、id=”sample”を指定しておきます。

HTML

<iframe id="sample" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

JavaScriptで再生時にconsoleを出すようにしてみます。

JavaScript

// 操作の準備
var player = new Vimeo.Player('sample');

// 再生時の処理
player.on('play', function() {
	console.log('再生中');
});

基本的な使い方のデモページ

上記デモではnew Vimeo.Player();をidで指定していますが、jQueryを使うこともできます。

HTML

<iframe id="sample" src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

JavaScript

$(function() {
	// 操作の準備
	var player = new Vimeo.Player($('#sample'));

	// 再生時の処理
	player.on('play', function() {
		console.log('再生中');
	});
});

基本的な使い方のデモページ2

HTMLにVimeoを埋め込まずに、空divを配置してJavaScriptから埋め込むこともできます。

HTML

<div id="sample"></div>

JavaScript

// 埋め込む動画のオプション
var options = {
	id: 59777392, // Vimeo ID
	width: 640 // 動画の横幅
};

// 操作の準備
var player = new Vimeo.Player('sample', options);

// 再生時の処理
player.on('play', function() {
	console.log('再生中');
});

基本的な使い方のデモページ3

空divにdata属性でVimeo IDを指定する方法や、URLを指定する方法もあります。

HTML

<div data-vimeo-id="76979871" data-vimeo-width="640" id="sample"></div>
<div data-vimeo-url="https://vimeo.com/59777392" id="sample2"></div>

JavaScript

// 操作の準備
var sample = new Vimeo.Player('sample');
var sample2 = new Vimeo.Player('sample2');

// 再生時の処理
sample.on('play', function() {
	console.log('1番目を再生中');
});
sample2.on('play', function() {
	console.log('2番目を再生中');
});

基本的な使い方のデモページ4
 

メソッド

用意されているメソッドを一通り試してみます。

動画読み込み・イベントリスナー

HTML

<div id="sample"></div>
<button id="on">on</button>
<button id="off">off</button>
<button id="loadVideo">loadVideo</button>
<button id="unload">unload</button>

JavaScript

// 埋め込む動画のオプション
var options = {
	id: 59777392 // Vimeo ID
};

// 操作の準備
var player = new Vimeo.Player('sample', options);

// ready
player.ready().then(function() {
	console.log('準備完了');
});

// on
var on = document.getElementById('on');
on.addEventListener('click', function() {
	player.on('play', function(data) {
		console.log('on メソッド');
		console.log(data);
	});
}, false);

// off
var off = document.getElementById('off');
off.addEventListener('click', function() {
	player.off('play');
}, false);

// loadVideo
var loadVideo = document.getElementById('loadVideo');
loadVideo.addEventListener('click', function() {
	player.loadVideo(76979871).then(function(id) {
		console.log(id);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// unload
var unload = document.getElementById('unload');
unload.addEventListener('click', function() {
	player.unload().then(function() {
		console.log('unload');
	}).catch(function(error) {
		console.log(error);
	});
}, false);

動画読み込み・イベントリスナーのメソッドのデモページ

ready() プレーヤーのiframeが初期化されたときに発火。
on(event, callback) eventにイベントリスナーを追加。
設定できるイベントについてはこちら。
off(event[, callback]) eventのイベントリスナーを削除。
callbacklが指定されていない場合、追加されているすべてのイベントリスナーを削除。
loadVideo(Vimeo ID) プレーヤーに新しく動画を読み込む。
unload() プレーヤーを初期状態に戻す。

動画操作

HTML

<div id="sample"></div>
<button id="play">play</button>
<button id="pause">pause</button>
<button id="getCurrentTime">getCurrentTime</button>
<button id="setCurrentTime">setCurrentTime(10s)</button>
<button id="getVolume">getVolume</button>
<button id="setVolume">setVolume</button>
<button id="getEnded">getEnded</button>
<button id="getPaused">getPaused</button>
<button id="enableTextTrack">enableTextTrack</button>
<button id="disableTextTrack">disableTextTrack</button>
<button id="getTextTracks">getTextTracks</button>

JavaScript

// 埋め込む動画のオプション
var options = {
	id: 59777392 // Vimeo ID
};

// 操作の準備
var player = new Vimeo.Player('sample', options);

// play
var play = document.getElementById('play');
play.addEventListener('click', function() {
	player.play().then(function() {
		console.log('再生中');
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// pause
var pause = document.getElementById('pause');
pause.addEventListener('click', function() {
	player.pause().then(function() {
		console.log('停止中');
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// getCurrentTime
var getCurrentTime = document.getElementById('getCurrentTime');
getCurrentTime.addEventListener('click', function() {
	player.getCurrentTime().then(function(s) {
		console.log(s);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// setCurrentTime
var setCurrentTime = document.getElementById('setCurrentTime');
setCurrentTime.addEventListener('click', function() {
	player.setCurrentTime(10).then(function(s) {
		console.log(s);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// getVolume
var getVolume = document.getElementById('getVolume');
getVolume.addEventListener('click', function() {
	player.getVolume().then(function(vol) {
		console.log(vol);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// setVolume
var setVolume = document.getElementById('setVolume');
setVolume.addEventListener('click', function() {
	player.setVolume(0.5).then(function(volume) {
		console.log(volume);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// getEnded
var getEnded = document.getElementById('getEnded');
getEnded.addEventListener('click', function() {
	player.getEnded().then(function(ended) {
		console.log(ended);
	}).catch(function(error) {
		// an error occurred
	});
}, false);

// getPaused
var getPaused = document.getElementById('getPaused');
getPaused.addEventListener('click', function() {
	player.getPaused().then(function(paused) {
		console.log(paused);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// enableTextTrack
var enableTextTrack = document.getElementById('enableTextTrack');
enableTextTrack.addEventListener('click', function() {
	player.enableTextTrack('en').then(function(track) {
		console.log(track);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// disableTextTrack
var disableTextTrack = document.getElementById('disableTextTrack');
disableTextTrack.addEventListener('click', function() {
	player.disableTextTrack().then(function(id) {
		console.log('disableTextTrack');
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// getTextTracks
var getTextTracks = document.getElementById('getTextTracks');
getTextTracks.addEventListener('click', function() {
	player.getTextTracks().then(function(track) {
		console.log(track);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

動画操作のメソッドのデモページ

play() 動画を再生。
pause() 動画を一時停止。
getCurrentTime() 現在の再生位置を秒単位で取得。
setCurrentTime(seconds) 秒単位で再生位置を指定。
getVolume() プレーヤーのボリュームを取得。
setVolume(volume) 0~1の範囲でプレーヤーのボリュームを指定。
getEnded() 動画の再生終了状態を取得。
getPaused() 動画の一時停止状態を取得。
enableTextTrack(language) 指定したlanguageで字幕を有効にする。
disableTextTrack() 字幕を無効にする。
getTextTracks() 動画に設定されている字幕の情報を取得。

動画設定

HTML

<div data-vimeo-id="59777392" id="sample"></div>
<div class="righttop">
	<p>同時再生用サンプル</p>
	<div data-vimeo-id="76979871" data-vimeo-width="200" id="sample2"></div>
</div>
<button id="getAutopause">getAutopause</button>
<button id="setAutopause">setAutopause</button>
<button id="getColor">getColor</button>
<button id="setColor">setColor</button>
<button id="getLoop">getLoop</button>
<button id="setLoop">setLoop</button>

JavaScript

// 操作の準備
var player = new Vimeo.Player('sample');
var player2 = new Vimeo.Player('sample2');

// getAutopause
var getAutopause = document.getElementById('getAutopause');
getAutopause.addEventListener('click', function() {
	player.getAutopause().then(function(autopause) {
		console.log(autopause);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// setAutopause
var setAutopause = document.getElementById('setAutopause');
setAutopause.addEventListener('click', function() {
	player.setAutopause(false).then(function(autopause) {
		console.log(autopause);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// getColor
var getColor = document.getElementById('getColor');
getColor.addEventListener('click', function() {
	player.getColor().then(function(color) {
		console.log(color);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// setColor
var setColor = document.getElementById('setColor');
setColor.addEventListener('click', function() {
	player.setColor('ff0000').then(function() {
		console.log('色変更');
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// getLoop
var getLoop = document.getElementById('getLoop');
getLoop.addEventListener('click', function() {
	player.getLoop().then(function(loop) {
		console.log(loop);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// setLoop
var setLoop = document.getElementById('setLoop');
setLoop.addEventListener('click', function() {
	player.setLoop(true).then(function(loop) {
		console.log(loop);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

動画設定のメソッドのデモページ

getAutopause() autopause(ほかのプレーヤーを再生したときに、このプレーヤーを一時停止にするかどうか)の設定を取得。
setAutopause(boolean) autopauseを設定。
getColor() プレーヤーのカラーを取得。
setColor(color) プレーヤーのカラーを設定。
getLoop() ループの設定を取得。
setLoop(boolean) ループを設定。

動画情報

HTML

<button id="getDuration">getDuration</button>
<button id="getVideoEmbedCode">getVideoEmbedCode</button>
<button id="getVideoId">getVideoId</button>
<button id="getVideoTitle">getVideoTitle</button>
<button id="getVideoWidth">getVideoWidth</button>
<button id="getVideoHeight">getVideoHeight</button>
<button id="getVideoUrl">getVideoUrl</button>

JavaScript

// 埋め込む動画のオプション
var options = {
	id: 59777392 // Vimeo ID
};

// 操作の準備
var player = new Vimeo.Player('sample', options);

// getDuration
var getDuration = document.getElementById('getDuration');
getDuration.addEventListener('click', function() {
	player.getDuration().then(function(s) {
		console.log(s);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// getVideoEmbedCode
var getVideoEmbedCode = document.getElementById('getVideoEmbedCode');
getVideoEmbedCode.addEventListener('click', function() {
	player.getVideoEmbedCode().then(function(embedCode) {
		console.log(embedCode);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// getVideoId
var getVideoId = document.getElementById('getVideoId');
getVideoId.addEventListener('click', function() {
	player.getVideoId().then(function(id) {
		console.log(id);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// getVideoTitle
var getVideoTitle = document.getElementById('getVideoTitle');
getVideoTitle.addEventListener('click', function() {
	player.getVideoTitle().then(function(title) {
		console.log(title);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// getVideoWidth
var getVideoWidth = document.getElementById('getVideoWidth');
getVideoWidth.addEventListener('click', function() {
	player.getVideoWidth().then(function(width) {
		console.log(width);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// getVideoHeight
var getVideoHeight = document.getElementById('getVideoHeight');
getVideoHeight.addEventListener('click', function() {
	player.getVideoHeight().then(function(height) {
		console.log(height);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

// getVideoUrl
var getVideoUrl = document.getElementById('getVideoUrl');
getVideoUrl.addEventListener('click', function() {
	player.getVideoUrl().then(function(url) {
		console.log(url);
	}).catch(function(error) {
		console.log(error);
	});
}, false);

動画情報のメソッドのデモページ

getDuration() 動画の長さを秒単位で取得。
getVideoEmbedCode() 動画の埋め込みコードを取得。
getVideoId() Vimeo IDを取得。
getVideoTitle() 動画のタイトルを取得。
getVideoWidth() 動画のネイティブの幅を取得。
getVideoHeight() 動画のネイティブの高さを取得。
getVideoUrl() vimeo.comのURLを取得。

 

イベント

メソッドの項目で紹介したon()やoff()を使用して設定します。

下記のデモはイベント発火時にconsoleを出すようにしています。
詳細は各デモのコードをご確認ください。

play 動画を再生したときに発火。
playのデモページ
pause 動画を一時停止したときに発火。
pauseのデモページ
ended 動画が最後まで再生したときに発火。
endedのデモページ
timeupdate 動画再生時やシークバー移動時など、動画の再生位置が変更されたときに発火。
基本的に250ミリ秒ごとに発火するが、ブラウザによって異なる可能性がある。
timeupdateのデモページ
progress 動画が読み込まれているときに発火。
progressのデモページ
seeked プレーヤーが特定の時間にシークされたときに発火。
seekedのデモページ
texttrackchange 字幕の設定が変更されたときに発火。
texttrackchangeのデモページ
cuechange 字幕が切り替わったときに発火。
cuechangeのデモページ
volumechange ボリュームが変更されたときに発火。
volumechangeのデモページ
error プレーヤーで何らかのエラーが発生したときに発火。
errorのデモページ
loaded 新しい動画が読み込まれたときに発火。
loadedのデモページ

 

オプション

今回はJavaScriptに記述していますが、data属性を使ってHTML側に記述することもできるようです。

HTML

<div id="sample"></div>
<div id="sample2"></div>
<div id="sample3"></div>

JavaScript

// 埋め込む動画のオプション
var options = {
	id: 59777392, // Vimeo ID
	width: 1400, // 動画の幅の指定
	height: 800, // 動画の高さの指定
	autopause: false, // ほかのプレーヤーを再生したときに、このプレーヤーを一時停止にするかどうか設定
	autoplay: true, // 自動再生するかどうか設定
	loop: true // ループするかどうか設定
};
var options2 = {
	url: 'https://vimeo.com/76979871', // Vimeo URL
	maxwidth: 1400, // 動画の幅の指定(動画のネイティブの幅は超えない)
	maxheight: 800, // 動画の高さの指定(動画のネイティブの幅は超えない)
	color: 'ff0000', // プレーヤーのカラーを設定
	byline: false, // 投稿者の部分を表示するかどうか設定
	portrait: false, // 左上のVimeoのマークを表示するかどうか設定
	title: false // タイトルを表示するかどうか設定
};
var options3 = {
	url: 'https://vimeo.com/59777392', // Vimeo URL
	width: 800, // maxwidthより優先される
	height: 400, // maxheightより優先される
	maxwidth: 400,
	maxheight: 300
};

// 操作の準備
var player = new Vimeo.Player('sample', options);
var player2 = new Vimeo.Player('sample2', options2);
var player3 = new Vimeo.Player('sample3', options3);

オプションのデモページ

id Vimeo IDを指定。
idかurlどちらか必須。
url VimeoのURLを指定。
idかurlどちらか必須。
width 動画の幅を指定。
maxwidthと一緒に指定されている場合はwidth優先。
height 動画の高さを指定。
maxheightと一緒に指定されている場合はheight優先。
maxwidth 動画の幅を指定。
動画のネイティブの幅以上に指定されている場合、ネイティブの幅で指定される。
widthと一緒に指定されている場合はheight優先。
maxheight 動画の高さを指定。
動画のネイティブの高さ以上に指定されている場合、ネイティブの高さで指定される。
heightと一緒に指定されている場合はheight優先。
autopause ほかのプレーヤーを再生したときに、このプレーヤーを一時停止にするかどうか設定。
初期値はtrue。
autoplay 自動再生するかどうか設定。
初期値はfalse。
loop ループするかどうか設定。
初期値はfalse。
color プレーヤーのカラーを設定。
初期値は00adef。
byline 投稿者の部分を表示するかどうか設定。
初期値はtrue。
portrait 左上のVimeoのマークを表示するかどうか設定。
初期値はtrue。
title タイトルを表示するかどうか設定。
初期値はtrue。

使い方について詳しくは公式のドキュメントをご確認ください。
 

【参考サイト】

 

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

▲PAGE TOP