vimeo APIとjQueryを使用してvimeoの再生・停止・初期化を操作する方法

この記事は4年前に書かれました。不適当な記述を含む場合がありますので、参考程度に留めてください。

どうもこんにちは。Toshikuraです。今回のTipsは【Vimeo APIとjQueryを使用してVimeo動画の再生・停止・初期化を操作する方法】です。地味に使う機会がありますのでメモしておきます。

実装方法 DEMO

事前読み込み froogaloop2.jsはこちらから
<script src="js/froogaloop2.min.js"></script>
<script src="js/jquery.js"></script>
HTML
<div id="video">
<ul id="btns">
<li><a id="btn_play" href="#">PLAY</a></li>
<li><a id="btn_pause" href="#">PAUSE</a></li>
<li><a id="btn_unload" href="#">UNLOAD</a></li>
</ul>
<iframe id="player" src="//player.vimeo.com/video/123456?api=1&amp;player_id=vimeoplayer&amp;loop=1" width="100%" height="500px" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

HTMLの記述で気をつけるべき点は埋め込み用iframeのURL末尾にapi=1&player_id=vimeoplayerを付与し、iframeに対して任意のIDを記述するところです。この形式例は以下のようになります。
 

<iframe id="player" src="//player.vimeo.com/video/123456?api=1&amp;player_id=vimeoplayer&amp;ループ等のプロパティ"></iframe>

JS
$(function() {
var player;
player = $f(document.getElementById(‘player’));
$(‘#btn_play’).on(‘click’,function() {
//再生
player.api(‘play’);
return false;
});
$(‘#btn_pause’).on(‘click’,function() {
//停止
player.api(‘pause’);
return false;
});
$(‘#btn_unload’).on(‘click’,function() {
//初期化
player.api(‘unload’);
return false;
});
});

以上になります。

参照:vimeo JavaScript API