javascript - 带有 YouTube 视频的轮播滑块
问题描述
是否可以使用 JQuery 构建 youtube 视频滑块?我想展示一些我上传的。
找到了一些答案,但使用了特定的框架,如果可能的话,我想坚持一些简单的东西。
我发现这段代码很有帮助,但我似乎无法让它工作。
$('.play-button').on('click', function () {
$(this).hide();
$(this).parent().fadeOut();
$(this).parent().siblings('.slider-video')[0].play();
});
$('.slider-video').on('play', function () {
$(this).attr('controls', '1');
});
// Additionnal code for the slider
var pos = 0,
slides = $('.slide'),
numOfSlides = slides.length;
function nextSlide(){
stopCurrentVideo();
slides.eq(pos).animate({left:'-100%'},500);
pos = pos >= numOfSlides-1 ? 0 : ++pos;
slides.eq(pos).css({left:'100%'}).animate({left:0},500);
}
function previousSlide(){
stopCurrentVideo();
slides.eq(pos).animate({left:'100%'},500);
pos = pos == 0 ? numOfSlides-1 : --pos;
slides.eq(pos).css({left:'-100%'}).animate({left:0},500);
}
function stopCurrentVideo(){
$('.slider-video:eq('+pos+')').load().removeAttr('controls')
.siblings('.overlay-content').show().find('.play-button').show();
}
$('.left').click(previousSlide);
$('.right').click(nextSlide);
解决方案
您可以使用 YouTube iFrame API 实现此目的:
https://developers.google.com/youtube/iframe_api_reference
enablejsapi=1
当您附加到 YouTube 视频嵌入的 URL时,此 API 可用。
为了访问停止视频的控件,对于每个视频,您需要访问YT.Player
. 对于每个 iFrame,我创建了一个 的实例,并将它作为一个名为 的参数YT.Player
直接附加到对象上。slide
video
(请注意,许多开发人员说您不应该将数据直接附加到 DOM 对象,但我在这里这样做是因为它可以让我更接近地匹配您的原始代码。)
YT.Player
可以通过一个必须调用的特殊函数来访问,onYouTubeIframeAPIReady
如果它在.$(document).ready
我无法将我的解决方案放在 JSFiddle 上,因为 iFrame 效果不佳,所以这是我在 GitHub 上的实现:
http://robertakarobin.github.io/jquery-video-slider https://github.com/robertakarobin/jquery-video-slider
以下是相关位:
HTML:
<div class="video-slider">
<!-- SLIDE 1 -->
<div class="slide">
<iframe class="video" src="https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2&enablejsapi=1"></iframe>
</div>
<!-- SLIDE 2 -->
<div class="slide">
<iframe class="video" src="https://www.youtube.com/embed/YE7VzlLtp-4?ecver=2&enablejsapi=1"></iframe>
</div>
<!-- END OF SLIDES -->
<div class="slide-arrow left"></div>
<div class="slide-arrow right"></div>
</div>
JavaScript:
$(document).ready(function () {
var pos = 0,
slides = $('.slide'),
numOfSlides = slides.length;
function nextSlide() {
// `[]` returns a vanilla DOM object from a jQuery object/collection
slides[pos].video.stopVideo()
slides.eq(pos).animate({ left: '-100%' }, 500);
pos = (pos >= numOfSlides - 1 ? 0 : ++pos);
slides.eq(pos).css({ left: '100%' }).animate({ left: 0 }, 500);
}
function previousSlide() {
slides[pos].video.stopVideo()
slides.eq(pos).animate({ left: '100%' }, 500);
pos = (pos == 0 ? numOfSlides - 1 : --pos);
slides.eq(pos).css({ left: '-100%' }).animate({ left: 0 }, 500);
}
$('.left').click(previousSlide);
$('.right').click(nextSlide);
})
function onYouTubeIframeAPIReady() {
$('.slide').each(function (index, slide) {
// Get the `.video` element inside each `.slide`
var iframe = $(slide).find('.video')[0]
// Create a new YT.Player from the iFrame, and store it on the `.slide` DOM object
slide.video = new YT.Player(iframe)
})
}
推荐阅读
- java - 如何仅使用命令行将环境变量传递给 gradle 包装器构建?
- docker - 区块链:Windows 10 中的 Hyper Ledger Fabric 安装
- javascript - 未处理的拒绝(错误):传递给 jsPDF.addImage 的坐标无效
- r - 如何解决“Middlechild”包安装错误
- ios - 截取部分时重新排序时 TableView 崩溃
- html - 调整浏览器和手机大小时网站无法正确缩放
- c# - 无法使用不带 cookie 的不记名令牌将用户登录到 Azure AD
- flutter - 动画容器 | 基于儿童身高的动画
- python - Python - 从图像中提取元数据的问题
- r - 计数组中的数字,但重新开始非连续日期