Question

我有两个bootrap div行。第一行包含HTML5视频标记，我想播放视频。

第二行包含JQuery Slider，显示与需要通过索引播放的视频相对应的图像。滑块使用https://github.com/kenwheeler/slick/插件。

如果点击位置1中的图像，我想在播放器中播放video_1，依此类推。

视频的网址格式为<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>

如何使用点击幻灯片的位置/索引显示视频，以创建ID为“播放器”的视频标记的src =“”？

UPDATE 这是屏幕当前显示的截图，我想在点击每个图像时显示不同的视频。

Answer 1

准确地回答你的问题：

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

JQuery Slider - OnClick播放宽视频

1 个答案: