jQuery:任意のIDからサムネと動画を抽出・複数設置する方法 – Vimeo API
iframeを使わず、Vimeo APIを用いて任意のID(Vimeo の動画ID)から動画とサムネイルを抽出します。
実装したいこと
今回実装したいことを箇条書きで。
- 動画の複数設置
- 個別のサムネイルの取得
- 独自の再生ボタンでの動画制御
- CSMへの組み込みを想定(任意のIDを入力するだけで、動画とサムネを抽出)
動画を複数設置すること自体は、iframe
を使用して簡単に行えますが、今回の場合は「CMSの入力画面でIDを入力するだけで動画とサムネを抽出できるようにしたい」という経緯があり、実装方法を模索する必要がありました。
メジャーなYoutubeであれば、参考記事がたくさんあるのですが、今回はVimeoということで記事がなかなか見つからなかったこともあったので、備忘録も兼ねて今回行なったことをメモしておきます(jQueryなどを正しく理解しきれていない部分があるので、冗長的なところもあるかと思います。基本的には自己責任で自由にカスタマイズしてください!)。
実装方法
HTML
<div class="video">
<div class="is-mov mov" data-vimeo-id="★動画のID"></div>
<button class="is-play btn-play"><img src="動画にサムネイルが登録されていない場合に表示させる画像" alt="" class="is-thumb-img thumb-img" /></button>
<input type="hidden" name="vimeo-id" value="★動画のID" class="is-thumb-id">
</div>
button
の中にあるimg
には、サムネイルが設定されていない場合の代替として、ダミーのサムネイルを仕込んでおきます。サムネイルが設定されている場合は、画像のsrc
が、設定されたサムネイルのURLに書き換わります。
また動画のID(★)を入力する部分が2箇所あります。ここには管理画面から入力されたIDが出力されるイメージです。
jQuery
<script src="//player.vimeo.com/api/player.js"></script>
<script>
$(function() {
$('.video').each(function() {
var $this = $(this);
// サムネイル表示
var vimeoId = $this.find('.is-thumb-id').val();
$.getJSON(
'https://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId,
null,
function(data) {
$this.find('.is-thumb-img').attr("src", data.thumbnail_url);
}
);
// 再生ボタン連携
var vimeoMov = $this.find('.is-mov');
var player = new Vimeo.Player(vimeoMov);
var vimeoPlayBtn = $this.find('.is-play');
vimeoPlayBtn.on('click', function() {
player.play();
});
// 再生ボタンの表示非表示
player.on('play', function() {
vimeoPlayBtn.fadeOut();
});
player.on('ended', function() {
vimeoPlayBtn.fadeIn();
});
});
});
</script>
まずvimeo API
を呼び出します。
<script src="//player.vimeo.com/api/player.js"></script>
.video
の要素に対して、each
で繰り返し処理を行なっています。正直、今まで難しそうでeach
を使ったことが無かったのですが、汎用性があるので使ってみると、とても便利なんだなと思いました(語彙力)。
$('.video').each(function() { 要素が入る });
$(this)
を便宜上、変数にしています。
この場合のthis
は、.vide
のこと。これがけっこう今回のキモかと思っています。現在処理をしている要素だけが対象となるので、関係のない動画が再生してしまうということがなくなります。
var $this = $(this);
サムネイル表示については、input
のvalue
の動画IDを用いて、動画のサムネイルを取得し、img
のsrc
へ出力しています。
var vimeoId = $this.find('.is-thumb-id').val();
$.getJSON(
'https://vimeo.com/api/oembed.json?url=https://vimeo.com/' + vimeoId,
null,
function(data) {
$this.find('.is-thumb-img').attr("src", data.thumbnail_url);
}
);
続いて、再生ボタンと動画の連携は次の部分です。
var vimeoMov = $this.find('.is-mov');
var player = new Vimeo.Player(vimeoMov);
var vimeoPlayBtn = $this.find('.is-play');
vimeoPlayBtn.on('click', function() {
player.play();
});
サムネイル取得と同様に、thisを用いることで、現在処理をしている.videoの中の要素にだけ処理が行われるようにしています。
player.on('play', function() {
vimeoPlayBtn.fadeOut();
});
player.on('ended', function() {
vimeoPlayBtn.fadeIn();
});
play
(再生時)とended
(終了時)の再生ボタンの表示・非表示を指定しています。そのほかにも、pause
(一時停止)などさまざまなメソッドが用意されています。
↓ サムネイルの取得・表示やeach
での繰り返し処理の参考。
↓ 再生ボタンと動画の連携などの参考。
CSS
CSSは基本お好みで。
.video {
background: #000;
width: 100%;
padding-top: 56.25%;
overflow: hidden;
position: relative;
}
.video iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
.video .btn-play {
border: none;
width: 100%;
height: 100%;
z-index: 15;
position: absolute;
top: 0;
left: 0;
}
.video .btn-play:before {
content: '';
background: url(再生ボタン画像URL) no-repeat center / 61px rgba(0, 0, 0, .4);
display: block;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 16;
-webkit-transition: all .3s;
transition: all .3s;
}
.video .btn-play:hover:before {
background-color: rgba(0, 0, 0, .3);
}
.video .thumb-img {
width: 100%;
height: auto;
position: absolute;
top: 0;
left: 0;
}
ポイントとしては、今回、レスポンシブ対応ということで親となる.video
には、ウィンドウ幅が可変されても16:9
を保てるようにpadding-top: 56.25%
を付与しています。それに伴い、子要素はすべてposition: absolute;
を指定しています。
再生ボタン(.btn-play
には、サムネイルが入るので、再生マークについてはbefore
で指定。この辺はケースバイケースかなと思います。