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);
})
我有两个 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);
})