bxSliderで動画をスライドごとに再生

Question

下記のように「bxSlider」でスライド毎に動画（複数）を再生しようとしていますが、１番めのスライド（10秒程のmp4動画)は再生されますが、２番めからは再生がスタートしません。スライド毎に、動画スタートし、ストップしたら、次のスライドに行くようにしたいのです。ご教授をお願いします。現在のjavascript

fujillin · Accepted Answer

ANo3です。

少し長くしたのビデオ（25秒程度）でも試してみましたが、こちらの環境では最後が見える事象は再現しませんでした。（もっと長くないとダメなのかも）

全部のスライドを表示した状態でテストしてみたところ、（当然ではありますが）終了したビデオは最後の状態で停止して、次のビデオが始まります。
2周目はこの状態から始まりますので、playメソッド実行時に、何らかの時間がかかって即座に動画が開始しない場合には最終画像が表示されていることになりそうです。
多分、これがご指摘の原因と推測します。

・・・ということで、ビデオ終了時に巻き戻しておけば（仮に何らかの時間がかかっても）最終画像が表示されることはなく、最初の画像が少し続くということになると思います。
ビデオ終了時に巻き戻し処理を追加して、以下ではいかがでしょうか？
（念のため、pauseも追加しています）

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

var slider = $(".bxslider").bxSlider({
infiniteLoop: 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();

fujillin · Answer

ANo1、2です。

＞２順目は１順目の動画の最後の映像が残っていて、
＞それが消えてから、始まります。
こちらでテストした状況では、endedイベント発生で動画が終了しているので、2回目も最初からスタートしていました。
それなので、無くても行けるものと思って省略してしまいましたが、再生位置を明示的に指定しておくようにすれば、動画の最後が表示されることはなくなるものと推測します。
私がテストしたのは数秒以下の短い動画でしたので、読み込み時間の関係などから違いが出ているのかもしれませんね。(ほとんど知らないも同然なので、よくわかっておりません)

具体的には、ご質問のスクリプトにもある
　currentTime = 0
のセットを行っておけば宜しいかと。
今、テストできる環境にないのでわかりませんが、再生直前がよいのか、終了イベント時がよいのかは、ご自身で試してみてください。

fujillin · Answer

ANo1です。

時間がとれたので、簡単に試してみました。
以下でどうでしょうか？（fx52、IE11で動作確認済）
vieo要素の数を増減してもそのままで動作するはずです。

※ インデントを全角空白にしてありますので、ご注意

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

var slider = $(".bxslider").bxSlider({
　infiniteLoop: true,
　controls: false,
　pager: false,
　onSlideAfter: function(elm, oIndex, nIndex){
　　video.get(nIndex).play();
　}
});

video.on("ended", function(){
　slider.goToNextSlide();
}).get(0).play();

fujillin · Answer

こんにちは

video要素は扱ったことがないし試していないので、考え方だけですが…

＞２番めからは再生がスタートしません。
ご提示のスクリプトでは最初に、
＞var $video = $('#video').get(0);
としているので、$videoは最初のvideo要素だけを意味することになります。
従って、2番目以降のvideo要素を制御する記述がないので、動作しないものと想像します。
多分、これがご質問の事象の一番の原因と思われます。

一方で、HTMLの記述が
＞<video id="video"　～～
となっていますが、idは重複できないはずですので、文法違反になっていませんか。
また、ご提示のケースではvideo要素は皆同質な扱いなので、個別にidを振る必要もなく、セレクタを"div.bxslider video"などとしておくことで、video要素のリストが取得できるはずです。

上記を修正すれば動作するものと思いますが、ついでながら…

全体の制御に、sliderのstartAuto()、stopAuto()などの記述がありますが、タイミングはvideoに依存するので、sliderのautoPlayは必要ないのではないでしょうか？
sliderの送りは全てスクリプトから制御すると考えれば、以下のように整理できそうです。

1）sliderの初期設定（autoplayは使用しない）
2）slider.onSlideAfterイベントに、
　　表示中のvideo要素をスタートする処理を設定
3）video要素のendedイベントに、
　　slideを送る（nextSlide）の処理を設定
　（全video要素にまとめて設定しておく必要があります）

上記の準備をしておいて、最初のvideoをスタートしてあげれば、3）と2）のイベントが交互に発生するので、自動的に順に再生されるはずと思います。

bxSliderで動画をスライドごとに再生

ANo3です。

ANo1、2です。

ANo1です。

こんにちは

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

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

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

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

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

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