JQuery Slider - OnClick 播放宽视频答案

【问题标题】：JQuery Slider - OnClick Play Wide VideoJQuery Slider - OnClick 播放宽视频
【发布时间】：2015-12-15 18:41:02
【问题描述】：

我有两个 bootsrap 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=""？

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

【问题讨论】：

标签： javascript jquery html slick.js

【解决方案1】：

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

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

但更好的控制是：

为每个img标签添加一个data-video：

<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);
})

【讨论】：

太棒了，谢谢。但是由于某种原因，当我运行它时，我得到一个“未捕获的类型错误”。这是错误消息的屏幕截图dropbox.com/s/nqvqbdb88lks8bu/error.JPG?dl=0 这是我更新的屏幕截图dropbox.com/s/3zp4awocs2vy471/jquery.JPG?dl=0
我确实添加了数据视频标签，就像dropbox.com/s/o4eqic7mdup3lo5/data-video.JPG?dl=0