bxsliderで複数のvimeoスライドを自動再生させようとしています。最初のスライドの動画が終わったら次の動画を自動再生させたいのですが、現在 1周目：動画１：数秒再生(最後まで再生せず) 動画２：数秒再生 2周目：動画１：最後まで再生し、動画１のみループ再生となります。これをまず 1周目：動画１：最後まで再生動画２：最後まで再生 2周目：動画１：最後まで再生動画２：最後まで再生としたいです。ご教授お願い致します。 ※この問題が解消したら次は再生途中で次の動画をクリックしたら次の動画を再生させるようにしようとしています。(現在、二つが再生されるようになるのか二つの”ドット”が黒く再生状態になってしまいます) $(function() { var video = $('.bxslider video'); var slider = $('.bxslider').bxSlider({ mode: 'fade', auto:'true', infiniteLoop: 'true', adaptiveHeight: 'true', video: 'true', controls: 'false', pager: 'false', onSlideAfter: function(elm, oIndex, nIndex){ video.get(nIndex).play(); } }); video.on("ended", function(){ var v = video.get(slider.getCurrentSlide()); v.currentTime = 0; v.pause(); slider.goToNextSlide(); }).get(0).play(); });

おしえて

bxsliderで複数のvimeoスライドを自動再生させたい

解決済

質問者：apricot1101
質問日時：2018/02/13 15:52
回答数：11件

bxsliderで複数のvimeoスライドを自動再生させようとしています。

最初のスライドの動画が終わったら次の動画を自動再生させたいのですが、
現在
1周目：動画１：数秒再生(最後まで再生せず)
　　　動画２：数秒再生
2周目：動画１：最後まで再生し、動画１のみループ再生

となります。これをまず
1周目：動画１：最後まで再生
　　　動画２：最後まで再生
2周目：動画１：最後まで再生
　　　動画２：最後まで再生
としたいです。ご教授お願い致します。

※この問題が解消したら次は再生途中で次の動画をクリックしたら次の動画を再生させるようにしようとしています。(現在、二つが再生されるようになるのか二つの”ドット”が黒く再生状態になってしまいます)

<!DOCTYPE html>
<html>
<head>
<link href="css/jquery.bxslider.css" rel="stylesheet">
</head>
<body>
<div class="bxslider">
<div><img src="images/s1.jpg" alt=""></div>
<div class="video">
　　　　　　　<iframe src="https://player.vimeo.com/video/XXXXXXXXX?autopla … width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
　　　　</div>
<div class="video">
　　　　　　　<iframe src="https://player.vimeo.com/video/XXXXXXXXX?autopla … width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
　　　　</div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1 …
<script src="js/jquery.bxslider.js"></script>
<script src="js/jquery.fitvids.js"></script>
<script>
$(function() {

var video = $('.bxslider video');

var slider = $('.bxslider').bxSlider({
mode: 'fade',
auto:'true',
infiniteLoop: 'true',
adaptiveHeight: 'true',
video: 'true',
controls: 'false',
pager: 'false',

onSlideAfter: function(elm, oIndex, nIndex){
video.get(nIndex).play();
}
});

video.on("ended", function(){
var v = video.get(slider.getCurrentSlide());
v.currentTime = 0;
v.pause();
slider.goToNextSlide();
}).get(0).play();

});
</script>

</body>
</html>

先ほどのお礼の自己レスです。
for文の条件を「options[i]」から「i < 2」へ変更したら最初のスライド動画のみ空白でその後は交互にスライド動画再生されるようになりました。
あとはloadedイベントの仕方が誤りなのかもしれません。何かアドバイスなどございましたらよろしくお願い致します。

※先ほど記載致しましたbxsliderのオプションは効いているようで、vimeoプレイヤーのwidthがレスポンシブになっていないようです。こちらも確認中です。
-------
～前省略～
for(var i=0; i < 2 ; i++) {
players[i] = new Vimeo.Player(elms[i], options[i]);
省略
});
}
players[0].loadVideo();
players[0].play();

No.4の回答に寄せられた補足コメントです。補足日時：2018/02/15 14:44
通報する
vimeoのレスポンシブの件ですが、オプションに「responsive:true」を入れたら解消致しました。
既に試していましたが、色々いじっていたので効いていなかったようです。
改めてコード整理しながら記載しましたら対応しました。お騒がせ致しました。。。

No.7の回答に寄せられた補足コメントです。補足日時：2018/02/16 10:41
通報する
別件で作業していて気が付いたのですが、
最初の音声のみ再生されている最中にブラウザのウィンドウサイズを変えると動画が表示されました。Firefox,Chromeで見てみましたがどちらもサイズを変えると(小から大、大から小のどちらも)、すぐに動画が表示されました。何故、、、引き続き格闘します。。。

No.8の回答に寄せられた補足コメントです。補足日時：2018/02/16 15:22
通報する
度々すみません。
firefoxでインスペクタの部分をみたさいの追記です。
//<div id="player_1" data-vimeo-initialized="true"></div>を見つけました。
data-vimeo-initializedが追加されていて、その下の階層を見るとiframeタグがいました。念のため。

No.9の回答に寄せられた補足コメントです。補足日時：2018/02/16 18:24
通報する

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (11件中11～11件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.1

回答者： fujillin
回答日時：2018/02/13 17:30

こんにちは

なんだかどこかで見たような・・・

と思ったら、もしかしてこれ？（お名前も違うようですけれど…）
https://oshiete.goo.ne.jp/qa/9677172.html

ご提示のHTMLだと、$('.bxslider video')はDIV要素になっているので、その後のcurrentTimeやpause()、play()などの操作ができるはずもないですし、そもそもendedイベントをdivで取得できるのかもはなはだ疑問です。
仮に、制御をするにしてもaudio要素が対象でないと意味がありませんが、iframeを使用しているようなので、クロスドメイン制限にひっかかって、audio要素にアクセスはできないのではないでしょうか？
（同一ドメインなら可能かも知れませんが、iframe内のドキュメントの構成も不明なので…）

とりあえず、他に方法がないかを考えてみるなら・・・
もしも、iframeが読み込んだら自動再生するようになっているのであれば、再生したい時にreloadさせるとか。（試していないので、ちゃんと再生されるのか不明です）
（キャッシュが効くのかもわからないので、reloadに時間がかかるかも知れません。キャッシュが効くのなら比較的速いはずと想像できます）
iframeのonloadはイベントとして取得できると思いますので、load中に見せたくない形で表示されてしまうようならば、iframeの上にマスクをかけておいて、onloadで外すとか・・・かなぁ？
再生の終了をどうやって取得するのかは・・・・残念ながら思いつけませんでした。

- 0
- 件

通報する

この回答へのお礼

早速ありがとうございます。
bxslider 、動画、自動再生などで検索していてご指摘の板も参考に致しました。videoとvimeoで混同して作業をしていました。ありがとうございます。ご指摘内容を参考に、vimeo APIを見ながら作ってみました。
まだbxsliderを入れると動作しないので、ひとまず動画二つ並べてできるところまで、一つ目の動画が終わったら次を再生、を交互にできるようにしました。途中経過ですが、こちらに書き込みします。何かアドバイス等ありましたらお願いします。

<div class="bxslider">
<div id="player_1"></div>
<div id="player_2"></div>
</div>
～省略～
<script src="https://player.vimeo.com/api/player.js"></script>
<script>
$(function() {

var options = {
id: XXXXXXXX, // Vimeo ID
autopause: true,
autoplay: true
};

var options2 = {
id: XXXXXXXXX, // Vimeo ID
autopause: true,
autoplay: false
};
var player1 = new Vimeo.Player('player_1', options);
var player2 = new Vimeo.Player('player_2', options2);
player1.setVolume(0);
player1.play();
player1.on('ended', function(data) {
player2.setVolume(0);
player2.play();
});
player2.on('ended', function(data) {
player1.setVolume(0);
player1.play();
});

});
</script>