お世話になります。
動画サービスvimeoのAPIを使って再生と停止を制御したいのですが、動画が複数ある場合で躓いてしまいました。
下記で制御はできるものの、各動画のIDが上手くoptionsに入らないのでしょうか、1つしか制御できないという状態です。
これはそもそもvimeo側に起因するのか(複数には非対応とか?)、それともやはりjQueryが悪いのでしょうか。
事情にお詳しい方がいらしたら下記のコードについてアドバイス頂けましたら幸いです。
jsfiddle:
https://jsfiddle.net/jbL0u6k2/3/
code:
html
1<script src="https://player.vimeo.com/api/player.js"></script> 2 3<iframe class="sample" src="https://player.vimeo.com/video/286740784" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 4 5<iframe class="sample" src="https://player.vimeo.com/video/288559456" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> 6 7<button id="play">再生</button> 8<button id="pause">一時停止</button> 9
jQuery
1$(function() { 2 3 $('iframe').each(function() { 4 5 // VimeoのIDを全て配列に入れておく 6 var vimeo_ids = []; 7 var vimeo_id = $(this).attr('src').match('[0-9]{9}'); 8 vimeo_ids.push(vimeo_id); 9 10 // 配列のIDを制御のためのoptionsへ代入 11 var options = { 12 id: vimeo_ids, 13 }; 14 15 // opptionsについて再生と停止を制御 16 var player = new Vimeo.Player($('.sample'), options); 17 $('#play').on('click', function() { 18 player.play().then(function() { 19 console.log('再生'); 20 }).catch(function(error) { 21 console.log(error); 22 }); 23 }); 24 $('#pause').on('click', function() { 25 player.pause().then(function() { 26 console.log('一時停止'); 27 }); 28 }); 29 30 }); 31 32});
あなたの回答
tips
プレビュー