bxsliderを使った動画スライダーで再生できません
bxsliderを使って動画のスライダーを作り
リロードした際にランダムで動画が再生されるようにしたいのですが、
動画が再生されず、困っています。
サムネイルを押すと動画は再生されます。
該当のソースコード
HMTL
1<div id="top_visual"> 2<ul class="bxslider_pc"> 3<li><a href="test.html"> 4 <video class="video" width="660px"> 5 <source src="movie/movie_01.mp4" type="video/mp4" /></video></a></li> 6<li><a href="test.html"> 7 <video class="video" width="660px"> 8 <source src="movie/movie_02.mp4" type="video/mp4" /></video></a></li> 9<li><a href="test.html"> 10 <video class="video" width="660px"> 11 <source src="movie/movie_03.mp4" type="video/mp4" /></video></a></li> 12<li><a href="test.html"> 13 <video class="video" width="660px"> 14 <source src="movie/movie_04.mp4" type="video/mp4" /></video></a></li> 15</ul> 16<!--サムネイル--> 17<div class="control_wrap"> 18<div id="bx-pager" class="bxslider_pc_02"> 19 <a data-slide-index="0" href=""> 20 <img src="../img/top/slider_thumb_01.jpg" alt="" /> 21 <p>ああああああ</p> 22 </a> 23 <a data-slide-index="1" href=""> 24 <img src="../img/top/slider_thumb_02.jpg" alt="" /> 25 <p>いいいいいい</p> 26 </a> 27 <a data-slide-index="2" href=""> 28 <img src="../img/top/slider_thumb_03.jpg" alt="" /> 29 <p>うううううう</p> 30 </a> 31 <a data-slide-index="3" href=""> 32 <img src="../img/top/slider_thumb_04.jpg" alt="" /> 33 <p>ええええええ</p> 34 </a> 35</div> 36</div> 37<!--// サムネイル--> 38</div>
JS
1$(function(){ 2 var video = $(".bxslider_pc video"); 3 var slider = $(".bxslider_pc").bxSlider({ 4 // infiniteLoop: true, 5 pagerCustom: '#bx-pager', 6 controls: false, 7 randomStart: true, 8 onSliderLoad: function(currentIndex,index){ 9 slider.goToNextSlide(); 10 video.get(0).play(); 11 }, 12 onSlideAfter: function(elm, oIndex, nIndex){ 13 video.get(nIndex).play(); 14 } 15 16}); 17 18video.on("ended", function(){ 19 slider.goToNextSlide(); 20 }).get(0).play(); 21}); 22
知識が浅く、説明もわかりにくい部分があるかと思いますが
どなたかご教授頂ければと思います。
よろしくお願いいたします。
あなたの回答
tips
プレビュー