JQuery滑塊 - OnClick播放寬屏視頻

我有兩個靴子div行。第一行包含我想播放視頻的HTML5視頻標籤。JQuery滑塊 - OnClick播放寬屏視頻

第二行包含對應於需要可以通過索引來播放的視頻的JQuery滑塊表示的圖像。該滑塊正在使用一個https://github.com/kenwheeler/slick/插件。

如果在位置1的圖像被點擊時，我想在播放器中播放VIDEO_1，等等。

視頻的URL將在此格式<source src="videos/video_1.mp4"

這裏是我的標記

<body style="background-color: #0094ff"> 
     <div class="container">    
      <div class="row"> 
       <div class="col-md-8 col-md-offset-2"> 
        <video width="640" height="360" controls id="player"> 
         <source src="videos\video_1.mp4" type="video/mp4"> 
         Your browser does not support the video tag. 
        </video> 
       </div> 
      </div> 
      <div class="row"> 
       <div class="col-md-12 slider"> 
       <div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest1.jpg" alt="Image I"/></div> 
       <div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest2.jpg" alt="Image 2"/></div> 
       <div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest3.jpg" alt="Image 3"/></div> 
       <div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest4.jpg" alt="Image 4"/></div> 
       <div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest5.jpg" alt="Image 5"/></div> 
       <div class="col-md-5 col-xs-3"><img id="image_1" src="images\guest6.jpg" alt="Image 6"/></div> 
       </div> 
      </div> 
     </div> 

      <script type="text/javascript" src="//code.jquery.com/jquery-1.11.0.min.js"></script> 
      <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> 
      <script type="text/javascript" src="//cdn.jsdelivr.net/jquery.slick/1.5.9/slick.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() { 
       $('.slider').slick({ 
        infinite: true, 
        slidesToShow: 3, 
        slidesToScroll: 3 
       }); 

      }) 

      $('.slider').on('click', '.slick-slide', function() { 
       alert("Slide clicked"); 
       //how can I show the video with the position of the clicked slide? 
      }) 
    </script> 
    </body>

我怎樣才能顯示一個使用點擊滑塊的位置/索引創建SRC視頻= 「」播放器「的視頻標籤的」「？

UPDATE 下面是當前屏幕顯示的屏幕截圖，我想在單擊每個圖像時顯示不同的視頻。

來源

2015-12-15 Val Okafor

要回答你的問題正是這樣做：

$('.slider').on('click', '.slick-slide', function() { 
    var index = $('.slider').slick('slickCurrentSlide'); 
    $('#player source').attr('src', 'videos/video_'+index+'.mp4'); 
})

但更好的控制將是：

添加一個數據視頻給img標籤：

<div class="col-md-5 col-xs-3"> 
    <img id="image_1" src="images\guest1.jpg" data-video="videos\video_1.mp4" alt="Image I" /> 
</div>

你可以然後換出的視頻，像這樣：

$('.slider').on('click', 'img', function() { 
    var data = $(this).data(); // Grab data from IMG 
    $('#player source').attr('src', data.video); 
})

來源

2015-12-15 19:37:34

Fantanstic，謝謝。然而由於某種原因，當我運行它時，我得到一個「未捕獲類型錯誤」。以下是錯誤消息的截圖https://www.dropbox.com/s/nqvqbdb88lks8bu/error.JPG?dl=0以下是我作出的更新截圖https://www.dropbox.com /s/3zp4awocs2vy471/jquery.JPG?dl=0 –

而且我也添加數據的視頻標籤，像這樣https://www.dropbox.com/s/o4eqic7mdup3lo5/data-video.JPG?dl=0 –

我更新onClick現在應該會更好 –

JQuery滑塊 - OnClick播放寬屏視頻

回答

相關問題