VimeoのPlayer APIの使い方まとめ

2016.08.07

JavaScript

API
Vimeo

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。

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

【参考サイト】

vimeo/player.js: Interact with and control an embedded Vimeo Player.

keigo2453 より:

2020/06/19 10:06

お世話になります。
Vimeoのプレーヤで動画を再生すると、回線速度が低い時に、バッファリングが起き、動画がときどき、止まってしまい、見ている側にとってストレスになります。

YouTubeでは、回線速度が低くても、そのようになりません（極端に低速な場合を除く）。

Vimeoのプレーヤで、なんとかして、バッファリングが起きないように、バッファサイズの変更など、何か対策をできませんでしょうか？

返信

cly7796.net より:

2020/07/22 01:52

keigo2453さん
コメントありがとうございます。
VimeoでもYouTubeと同じく、閲覧ユーザーのネット環境などによって画質変更が自動で行われるようです。
https://vimeo.zendesk.com/hc/ja/articles/224968848

返信

日	月	火	水	木	金	土
	1	2	3	4	5	6
7	8	9	10	11	12	13
14	15	16	17	18	19	20
21	22	23	24	25	26	27
28	29	30

VimeoのPlayer APIの使い方まとめ

注意点

基本的な使い方

HTML

JavaScript

HTML

JavaScript

HTML

JavaScript

HTML

JavaScript

メソッド

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

HTML

JavaScript

動画操作

HTML

JavaScript

動画設定

HTML

JavaScript

動画情報

HTML

JavaScript

イベント

オプション

HTML

JavaScript

2件のコメント

cly7796.net へ返信するコメントをキャンセル

Category

Tag

Recent

VimeoのPlayer APIの使い方まとめ

注意点

基本的な使い方

HTML

JavaScript

HTML

JavaScript

HTML

JavaScript

HTML

JavaScript

メソッド

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

HTML

JavaScript

動画操作

HTML

JavaScript

動画設定

HTML

JavaScript

動画情報

HTML

JavaScript

イベント

オプション

HTML

JavaScript

関連記事

プレイリストからYouTubeの埋め込みを行う

SSL未対応の環境でClipboard APIが使用できない

YouTubeの埋め込み動画を自動再生する

Fullscreen APIを使ってみる

Auth0でTwitterを使ってログインする

2件のコメント

cly7796.net へ返信する コメントをキャンセル

Category

Tag

Recent

cly7796.net へ返信するコメントをキャンセル