質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

1回答

684閲覧

video、imgタグを含めたスライドショーで、動画のみ最後まで再生させたい

kwskanna

総合スコア6

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2021/06/22 11:46

bxSliderを使ったスライドショーを作成しています。
スライドのひとつに動画を含めたもので、動画は最後まで再生させ、画像は3秒で切り替えたいです。
恥ずかしながらjavascript初心者でして、どのような記述が必要か、ご教示いただけませんでしょうか。

html

1<div id="slider"> 2 <div class="photo"><img src="images/hero-slide00.jpg" alt=""></div> 3 <div class="photo"><img src="images/hero-slide01.jpg" alt=""></div> 4 <div class="photo"><img src="images/hero-slide02.jpg" alt=""></div> 5 <div class="video"><video src="images/top01.mp4"></video></div> 6 </div>

javascript

1 var video = $("#slider video"); 2 var photo = $(".photo"); 3 4 var slider = $("#slider").bxSlider({ 5 infiniteLoop: true, 6 controls: false, 7 pager: false, 8 onSlideAfter: function(elm, oIndex, nIndex){ 9 video.get(nIndex).play(); 10 } 11 }); 12 13 photo.on('setTimeout', function() { 14 slider.goToNextSlide(); 15 },3000); 16 17 video.on("ended", function(){ 18 slider.goToNextSlide(); 19 }).get(0).play();

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

このような感じでしょうか。

html

1<div id="slider"> 2 <div class="photo"><img src="images/hero-slide00.jpg" alt=""></div> 3 <div class="photo"><img src="images/hero-slide01.jpg" alt=""></div> 4 <div class="photo"><img src="images/hero-slide02.jpg" alt=""></div> 5 <div class="video"><video src="images/top01.mp4" muted></video></div><!-- 自動再生にはmuted属性が必要 --> 6</div> 7 8 9<script> 10 var timerId = 1; 11 var slider = $("#slider").bxSlider({ 12 infiniteLoop: true, 13 controls: false, 14 pager: false, 15 onSliderLoad: after, 16 onSlideAfter: after, 17 }); 18 19 function after(nIndex1, x, nIndex2){ 20 var index = nIndex2 || nIndex1; 21 var video = $('#slider > div').eq(index+1).find('video')[0]; 22 var sec = 3; 23 if(video){ //videoなら 24 video.play(); 25 sec = video.duration; 26 } 27 clearTimeout(timerId);//swipeで移動した回は自動移動削除 28 timerId = setTimeout(function(){ 29 slider.goToNextSlide(); 30 }, sec * 1000); 31 } 32</script>

投稿2021/08/02 05:31

webgoto

総合スコア1293

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問