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

Question

bxsliderで複数のvimeoスライドを自動再生させようとしています。最初のスライドの動画が終わったら次の動画を自動再生させたいのですが、現在 1周目：動画１：数秒再生(最後まで再生せず) 　　　動画２：数秒再生 2周目：動画１：最後まで再生し、動画１のみループ再生となります。これをまず 1周目：動画１：最後まで再生　　　動画２：最後まで再生 2周目：動画１：最後まで再生　　　動画２：最後まで再生としたいです。ご教授お願い致します。 ※この問題が解消したら次は再生途中で次の動画をクリックしたら次の動画を再生させるようにしようとしています。(現在、二つが再生されるようになるのか二つの”ドット”が黒く再生状態になってしまいます)

fujillin · Accepted Answer

No9の補足へ

あらら・・・
autoplayでもダメですか・・・（できると期待してたのにぃぃ…）
補足の後半を見てみると、どのような要素が生成されているのかはあまりはっきりしなかったようですので、なんともわかりませんけれど、スクリプトからplay()でうまくいかないのと同じような原因でvimeo player側も失敗しているのかも知れませんね。

こちらにテストできる環境があれば、もう少し情報が掴めたり、試したりできると思うのですが、申し訳ありません。
時間が十分にあれば、vimeo playerのスクリプト内部を解析して把握するという方法もあるのですが、残念ながらそこまでの時間はとれませんので…

とはいえ、<iframe>利用の方法でなんとか動作するようにはなったようで、よかったです。
長時間お疲れさまでした。
長文の回答にも拘わらず、内容と意味をきちんと理解なさって対応していただいたので、少しはお役に立てたのかもしれないように思います。
（ 9割方の質問者様だと、回答の文章は斜め読みで、いただける情報も『うまくいきませんでした！』だけしか返ってこないので、何も進めない状況に陥るのですが、こちらの意図を読み取っていただき、情報も適切にいただけましたので、少々回り道をした感はありますが、なんとかここまで来ることができたのだと思います）

なんとなくではありますが、（補足にあるリサイズ時の情報を考慮すると）最初の動画が再生されないという現象は、実は、再生されてるけれどそれが画面に反映されていないというような印象をを受けます。
これに関しては、かなり奥が深そうな気がしますので、テスト環境もない状態ではとても解決できそうにない気がします。（環境があったとしても、解決できるとは限りませんし）
対処療法として、スクリプトから強制的に少しだけリサイズするようなことも考えられますが、それだとその場しのぎ的な方法になってしまいますね。

理想形ではないかもしれませんが、一応の目的は達成できたということで、この辺で一旦身を引かせていただくことにいたします。（丁度週末ですし(笑)）

どうもありがとうございました。m(__)m

fujillin · Answer

追加情報がありましたので・・・＞その下の階層を見るとiframeタグがいました。念のため。 iframeタグで表示されている文書の内容（←frameなので、独立した別文書になりますが）がわかれば、その中に

fujillin · Answer

こんにちは No8の補足に対して＞変わらず最初のスライドは音声のみ最後まで再生後、＞次のスライドに変わり、次の動画が再生されました。一つだけ質問があります。多分、2つの動画で試しているのだと思いますが、3回目以降は最初の動画が再生されているでしょうか？（こちらの予想（←なんの根拠もないけど）では、再生されていると思うのですが） No7の補足の前半ではうまくいっているので、同じことのはずなのですが・・・ひとつだけありそうなのは、やはりタイミングの問題。通常、この手の処理の場合は、①インスタンス生成→②イベント設定→③ロード開始、とするのですが、今回の場合、ライブラリが先に①、③を行ってから②の処理をせざるを得ません。普通ならロードに時間がかかるので、それでも間に合うはずですが、キャッシュなどが効いていて瞬時にロード完了となった場合、その後からイベントを設定しても発火しないということになります。それなら、先にstatusを調べられないかと探してみましたが、APIにはロード状況を取得できる属性値は用意されていないようでした。今回の事象がこれに該当するのかどうかははっきりしてはいませんが、書いているうちに、もっと素直な方法を思いつきました。（もっと早く気が付いても良かったのに、思いつくのが遅くて申し訳ありません。）それは、「最初のスタートをこちらのスクリプトでは制御せず、ライブラリに行わせる」という方法です。具体的には、スクリプト内のloadedイベント設定部分は削除してしまい、playersのインスタンス生成時のoptionにautoplayを設定しておくというものです。 No8の補足の例で言えば、　var options = [ 　　{ id: XX,responsive:true, autoplay:true }, 　　{ id: XX,responsive:true } 　]; として、最初の動画だけautoplayを指定するようにしておけばよろしいかと。（動画数が増えても同様です。）多分、これでうまくゆきそうな気がしてきましたが・・・（果たして結果はいかに？）＞vimeo playerの

fujillin · Answer

こんにちは No7の補足に対して前半のテストサンプルは予定通りの結果ということで良いのですよね？後半のものは、同じ処理をループの中に入れただけなのですが、callbackをループの中で使用する場合は、そのままでは変数iの値が保持されないので少しだけ注意が必要になります。考え方として、 1）それぞれがロードしたら再生開始 2）最初の動画だけロード後再生開始（他は何もしない） 3）最初にロードが終わった動画だけ再生開始（他は何もしない）などがあると思いますが、とりあえず今回は2）として… （3）だとスライドを移動するなどの必要も出てきますので）（例によって、インデントは全角空白です） for(var i=0; i < options.length ; i++) { 　players[i] = new Vimeo.Player(elms[i], options[i]); 　if(i==0){ 　　players[0].on('loaded', function(data){ players[0].play(); }); 　} 　players[i].on('ended', function(data){ 　　slider.goToNextSlide(); 　}); } のようにしておけば、最初の動画だけロード後に再生されると思います。（ロードイベント処理内でendedイベントを設定する必要はないので、外して別に設定しています）ついでながら、1）のケースように各動画をロード後それぞれに再生させるなら（←auto playと同じことですが）、変数iを保持しておく必要があるので、　players[i].on('loaded', (function(j){ 　　return function(){ players[j].play(); }; 　})(i)); のような記述法になると思います。（書き方はいろいろありますけれど…）ところで、No6でも少し触れましたが、以下のようなことができれば、全体的にとても簡単になると思います。こちらではテストできないのと、vimeoの仕組みもわかってはいないのですが・・・普通にvimeo playerを利用して動画を表示した際に(補足でご提示の前半などの場合)、vimeo playerの処理によって

fujillin · Answer

No5の補足に対して

＞「auto:true」を入れていないと最初のスライドが動かないので入れてみました。
気持ちはわかりますが・・・

現在最初の動画の読み込みに時間がかかっているのが原因と思いますが、仮にうまくいく時を想定すると
1）bxsliderの設定（スライドは動かない）
2）vimeo playerの設定（動画の読み込み開始）
3）動画の読み込み後、最初の動画を再生
（ここまでを直接のスクリプトで処理。3）の部分がまだ実装できていませんが）

4）最初の動画終了時にendedイベント発生
　→ イベント処理でsliderがスライド
5）sliderのSlideAfterイベントが発生
　→ 前の動画を巻き戻し、次の動画を再生
6）動画の再生終了でイベント発生（4）に戻る。以降4）5）を繰り返す
といった仕組みで動作することを考えています。

autoでスライドを動かしてしまうと、
最初の動画の再生とスライドの移動がタイミングを合わせずにほぼ同時に実行されてしまうため、見た目には、初期表示でスライド後に2番目の動画の再生開始となってしまうと思います。
さらには、最初の動画が短くてこの間に終了してしまうと、もっと面倒なことになります。
巻き戻す前にendedイベントが発生するので、2番目の再生中にスライドは次に移動・・・
実際には動画の再生がそんなに短くはないと想像しますので、先にplayers[oIndex].pause();の処理で停止するためendedイベントが発生することはまずないでしょうけれど、考え方としてあまり整合がとれているとは言えなくなってしまうと思います。

ともあれ、2週目からは最初の動画も表示されるようですので、やはり読み込み時間の問題ということと推測します。
　players[0].on('loaded', function(){ players[0].play(); } );
のようなイベント設定をplayersのインスタンス生成時に行っておけば良いのではないでしょうか？

上記のような1）～6）の設定であれば、最初の動画が読み込まれ、再生が終了するまでは、スライドは動かないはずと思います。
実際には、どの動画読み込みに時間がかかるのかは不明（通信環境とサイズに依存）なので、他の動画でも（理論的には）同様のことが発生し得ると言えます。（再生時間があるので、実際に発生することはあまりないとは思いますが）
それなので、No5でも触れましたように、各動画の読み込み終了を監視しておく必要があるように思います。

fujillin · Answer

No5です。

投稿後に見たら、補足が追加されていましたので・・・

＞vimeoプレイヤーのwidthがレスポンシブになっていないようです。
vimeoの方はよくわかっていませんが、（No1の補足のHTMLとして）普通に考えれば、親要素のdivのサイズが確定していれば、その大きさで表示してくれるのではないかと想像しますが、違うのでしょうか？

あるいは、一旦、表示した後でのリサイズ等の際にも対応して、拡大縮小したいということでしょうか？
試してみたところ、通常のHTMLの<video>要素はサイズの変更も効きますし、動画の再生中であっても、それに応じたサイズに変わるようです。

想像ですが、vimeo playerでも指定の親要素の中にvideo要素を作成して制御しているものと思いますが、その際のサイズ指定を絶対値（pxなど）で行っているのではないでしょうか？
その場合は、親要素のサイズが変化しても、再設定しない限り追従しないですよね？
今回の場合は、例えばdiv要素に対してvideo要素をheight:100%; width:100%;などのように設定しておけば、親要素のサイズに応じた表示がなされるはずですし、リサイズなどにも対応できるはずと思います。

vimeo playerの内部処理がどのようになっているのかはわかりませんが、HTMLのvideoタグにダイレクトに動画を表示させることが可能であるなら、vimeo playerを利用せずに設置することで、CSSの設定や制御も可能になるものと思います。
（このようにすると、丁度No1で参照している過去の質問と同じ状態になります）
多分、URL及びサーチ部分の設定だけで行けるようにも思いますが、セキュリティなどをどのように実装しているかわかりませんのでなんとも言えません。

また、追加の補足の中で
＞for(var i=0; i < 2 ; i++) {
（将来の？）複数化に対応しておくなら
　for(var i=0; i < options.length ; i++) {
としておくほうが、optionsの内容を追加するだけで、他は修正せずに動作すると思います。
（「2」と指定してしまうと、数が変わるたびにここも修正しなければならない）
しかし、通常はこれと
　for(var i=0; options[i]; i++) {
って、等価なはずなんですけどねぇ・・・？

＞players[0].loaded();
＞players[0].play();
の部分に関しては、メソッドが変わっているものの、No5で触れましたように「ロード後にplay()してはいない」のままのように見受けられます。

fujillin · Answer

こんにちは。　No4です。

＞全角スペースがあったり(すみません)、カンマを見直したら解消しました
全角スペースについては、お断りしなかった私のせいかもしれません。
ここの掲示板は、半角でのインデントは省かれてしまう仕組みなので、全角文字でインデントしていた次第です。
とはいえ、なんとなくの印象では、まだ目的は達成できていないものの、1歩ずつ近づいて来ているように思われますので、よかったです。

何度もお断りするようですが、こちらでは試せないので、ひたすら文章とスクリプトを眺めるだけでの回答ですので、勘違いや間違えが含まれている可能性があることを念頭にお読みください。
また、文章だけだと実際の事象を正しく把握し難いので、言わずもがなの内容をくどくどと書いてしまうかも知れませんが、お許しください。

まず、それぞれのライブラリのoption設定で仮定していることの再確認です。
◇bxslider
・スライドの循環設定
　goToNextSlide()で次のスライドが処理されるためには、循環する指定が必要かと
　→ infiniteLoop: true
・一方でデフォルトではスライドの自動再生はfalseだと思いますので、auto指定を指定していない限り、
　＞stopAuto(); を入れました
　は不要そうに思いますが、とりあえず、あっても問題はないはずです。

◇vimeo player
・bxsliderもvimeo playerもスライドの移動やvideo再生等は全てスクリプト側でコントロールする予定ですので、vimeo playerのoption設定でも（ロード時に）自動再生は行わないように設定にしておきます。

そのうえで、
＞最初のスライドが空白で、～～
この状態は時間がたっても空白のままなのでしょうか？
初期表示状態では空白で、後から表示されるようであれば、データのロード時間の関係と推測できます。
ずっと空白のままであるなら、URLの間違いなどがないか再確認してください。
（単独で表示した場合、表示できるかどうかなども確認）
ロード中にplay()メソッドなどで指示をした場合にどのような結果になるのかは、テストできないので、こちらではわかりません。（想像では、即座にendedになるか、エラーが発生してスクリプトが停止などでしょうか）
二つ目のスライドの動画は読み込めているようですので、一つ目のデータに問題がありそうな気がしますが・・・
（例えば、一つ目と二つ目を入れ替えたらどうなるのでしょうか？）

とは言え、最終形としては、「何らかのトラブルで読み込めない場合」も想定して、読み込めないスライドをスキップするとか、スライドから外してしまうなどの処理を組み込んでおく必要があるかも知れませんね。

仮に、最初のスライドの設定が正しいとしても、上記の様に動画読み込みに時間がかかる場合は、そのタイミングを計って開始をする必要があります。
（通常の画像スライダでも、画像の読み込みに時間がかかる場合があるのと同様です）
厳密に考えるなら、使用する全ての動画について、loadがcompeteかどうかを確認して再生するといった処理が必要になりそうです。
とりあえず、最初の動画に関して、読み込みの確認を行うなら、動画のloadedイベントで判定するのが簡単そうに思います。

補足にご提示のスクリプトの最後の部分に
＞players[0].loaded();
＞players[0].play();
とあるのが、その意図かも知れないと推測しますが、callback形式ではないのでどういう仕組みなのでしょうか？
当方でAPIを見る限りでは、load()メソッドは発見できませんでした（loadVideo()メソッドはありますが）。
次の行の、players[0].play()がload後の処理になっているとも思えません・・・？
https://github.com/vimeo/player.js
これによれば、loadイベントの取得は
　.on('loaded', function(data){～～});
または
　.loadVideo(～～).then(function(id){～～}).catch(function(error){～～});
のような形式になるものと思いますけれど？

なお、問題点ではありませんがちょっと気が付いたので。
前回の処理手順だとスライド移動前に動画の巻き戻しを行っているので、動画終了時に画面が変わる（=巻き戻す）のがチラリと見える可能性がありました。
動画のendedイベントでは、スライドの移動処理だけを行うようにして、スライド移動後に、前の動画を巻き戻し、次の動画を再生するという手順にした方がbetterかもしれません。

（いまさらですが、インデントは全角空白になっています(笑）
onSlideAfter:function(elm, oIndex, nIndex){ 
　slider.stopAuto(); //←autoの設定をしていなければ、不要ではないかと思います
　players[oIndex].pause(); //←動画終了時に停止するようになっていれば、これも不要ですね
　players[oIndex].setCurrentTime(0); // 前の動画を巻き戻し
　players[nIndex].play(); // 次の動画を再生
}

players[i].on('ended', function(data){
　slider.goToNextSlide();
});

あと、一息だと思いますので、頑張ってください。

fujillin · Answer

No3です

＞「onSlideAfter」のところでエラーとなりました。
実行時のエラーでしょうかね？

構文エラーになりやすいのが、オブジェクトの各要素のカンマの有無
（最後にカンマがあるとエラーになるブラウザがあります）
var slider = $(".bxslider").bxSlider({
　option1 : value1,
　option2 : value2,
　onSlideAfter : function(){ ～～ } //←ここだけカンマなし
});

あるいは、onSlideAfterの関数実行時に変数playersが参照できないとか。
関数の引数はbxsliderがセットしてくるので、それは問題ないと推測できます。
関数が確実に呼ばれているのかの確認のため、関数内の処理を例えば
　alert(nIndex);
などとしてみれば、最初にスライドが移動した後にインデックス1が表示されれば、（多分）正常なので、もしそうなら関数内の
　players[nIndex].play()
がエラーの発生源だと特定できそうですよね。

もし、そうだとすると怪しいのが、変数playersがスコープ外になっているとか…
No3では、最初に
　var players = [];
として宣言しているので、参照できると思うのですが（何か勘違いしているかなぁ…）
確かめてみるなら、今度は
　alert(players) とか alert(players.length)
などとしてみればわかると思います。

※ こちらに環境がないため、かなりの妄想で回答しています。ご容赦あれ。

fujillin · Answer

No1です

＞ご指摘の板も参考に致しました。
別の方だったのですね。
スクリプトが同じだったので・・・失礼いたしました。

＞vimeo APIを見ながら作ってみました。
あら、APIがあるのですね。・・・見てみました。
audioElementを通常のjavascritで制御するのとほぼ同等（以上？）の制御が可能なように作成されているようですので、イベントのフックをbxsliderからのイベントとうまく組み合わせれば、ご質問の内容は実現できそうに思います。
こちらではvimeoを試せる環境にないので、以下はイメージだけの内容で検証はしていませんがご参考までに。

最初に、vimeoのplayerを個別の変数にせずに配列化しておいた方が、数が増えても対応可能ですし、添字をbxsliderのページのインデックスと一致させることで、同じ制御をひとまとめにして記述できるようになると思います。
例えば、補足でご提示のスクリプトでもplayerのセッティングやendedイベントを個別に記述しているようですが、下の例のようにまとめられると思います。
（2個程度の数なら、個別に記述した方がわかりやすいかもですが…）

あとは、以下の様なイメージにまとめることで可能ではないかと思います。
（No1で引用した以前の回答と同じ仕組みです）
　playerのendedイベント時に
　 ・現在のplayerを巻き戻し
　 ・bxsliderを次へ移動
　sliderのonSlideAfterイベントで
　 ・表示中のplayerの再生開始

以下のスクリプトはまったくのイメージです。
検証していませんので、動作しない可能性が十二分にありますが、考え方はこんな感じで行けるのではないかと思います。(一応、2個に限定しない方法で記述したつもりです）
HTMLは補足でご提示のものを想定。

//vimeo optionを配列で定義
var players = [];
var options = [
{ /* option0の内容 */ }, 
{ /* option1の内容 */ }
];

//bxsliderの設定
var slider = $(".bxslider").bxSlider({
　/* 
　　bxsliderのoption設定 
　*/
　//スライド終了時のイベント処理設定
　onSlideAfter: function(elm, oIndex, nIndex){ players[nIndex].play(); }
});

//HTML要素を配列（=実体は配列でなく要素リスト）に取得
var elms = document.querySelectorAll('.bxslider > div');
//vimeo playerの設定
for(var i=0; options[i]; i++) {
　players[i] = new Vimeo.Player(elms[i], options[i]);
　//video終了時のイベント処理設定
　player[i].on('ended', function(data){
　　//dataはplayerオブジェクトみたいだけど、確信がないので使用していません
　　var p = players[slider.getCurrendSlide()];
　　p.pause();
　　p.setCurrentTime(0);
　　slider.goToNextSlide();
　});
}

//上記だけでは最初がスタートしないかもなので、必要に応じて…
　//playerのloadedイベントにする必要があるかも
　//　（videoロードに時間が必要なので）
//players[0].play();

fujillin · Answer

No1です。

見直したら間違えていましたので、訂正しておきます。

$('.bxslider video')の指定だと、該当するvideo要素が存在しないので、何も処理は行われないですね。
（videoクラスと、勝手に勘違いしてしまいました）

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

No9の補足へ

追加情報がありましたので・・・

こんにちは

こんにちは

No5の補足に対して

No5です。

こんにちは。

No3です

No1です

No1です。

似たような質問が見つかりました

このQ&Aを見た人はこんなQ&Aも見ています

関連するカテゴリからQ&Aを探す

このQ&Aを見た人がよく見るQ&A

デイリーランキングこのカテゴリの人気デイリーQ&Aランキング

マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング