JQuery 滑块 - OnClick 播放宽屏视频

JQuery Slider - OnClick Play Wide Video

我有两个 bootsrap div 行。第一行包含一个 HTML5 视频标签,我想在其中播放视频。

第二行包含 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>

如何使用单击的幻灯片的 position/index 显示视频以创建 ID 为 "player" 的视频标签的 src=""?

更新 这是当前屏幕的屏幕截图,我想在单击每个图像时显示不同的视频。

要准确回答您的问题,请执行以下操作:

$('.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);
})