禁止点击视频轮播中的播放按钮
Disable clicking on the play button in video carousel
![在此处输入图片描述][1]目前我可以点击轮播中的任何视频,它会出现在 iframe 中,我只是在其中获取视频的 src。我想知道是否有办法阻止用户在轮播中播放视频,但仅在视频位于 iframe 内时播放。
<div class="row">
<div class="main">
<iframe width="600" height="480" id="mainvideo" src="https://www.youtube.com/embed/DU6UV2GPzIk?" style="margin: 30px auto 10px;float: none;display: block;" src="" frameBorder="0" allowfullscreen=""></iframe>
<div id="owl-demo" class="owl-carousel">
<div class="article-video red" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/DU6UV2GPzIk?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/2ZfqGr7HbEo?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/053yP1wQR_s?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/B-QIFAy6LPI?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/4_ZRUC0g1ic?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/YU6AU-khKuo?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/Bkz5wyb_6j8?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/f1kx4Bce6nI?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/1HTq4F_js2g?"></a></div>
</div>
</div>
这是我用来更改 IFrame 中的视频的 Jquery 代码。
$(document).ready(function(){
$(".article-video").click(function(e) {
e.preventDefault();
var href= $(this).find('a').attr('href');
var target = $('.article-video').index($(this));
$("#mainvideo").attr("src", href);
})
});
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items:4,
margin:20,
loop:true,
video:true,
lazyLoad:true,
dots:false,
responsive:{
0:{
items:1
},
678:{
items:3
},
1000:{
items:4
}
},
nav:true,
navText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
]
});
});
$(document).ready(function(){
$(".article-video").click(function(e) {
e.preventDefault();
var href= $(this).find('a').attr('href');
var target = $('.article-video').index($(this));
$("#mainvideo").attr("src", href);
})
});
<link rel="stylesheet" href="http://www.jackpotjoy.com/promo/responsive_templates/Test/assets/css/demo.css">
<link rel="stylesheet" href="http://www.jackpotjoy.com/promo/responsive_templates/Test/owlcarousel/owl.carousel.css">
<link rel="stylesheet" href="http://www.jackpotjoy.com/promo/responsive_templates/Test/owlcarousel/owl.theme.css">
<div class="row">
<div class="main">
<iframe width="600" height="480" id="mainvideo" src="https://www.youtube.com/embed/DU6UV2GPzIk?" style="margin: 30px auto 10px;float: none;display: block;" src="" frameBorder="0" allowfullscreen=""></iframe>
<div id="owl-demo" class="owl-carousel">
<div class="article-video red" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/DU6UV2GPzIk?controls=0"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/2ZfqGr7HbEo?controls=0"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/053yP1wQR_s?controls=0"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/B-QIFAy6LPI?controls=0"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/4_ZRUC0g1ic?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/YU6AU-khKuo?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/Bkz5wyb_6j8?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/f1kx4Bce6nI?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/1HTq4F_js2g?"></a></div>
</div>
</div>
</div>
<script src="http://www.jackpotjoy.com/promo/responsive_templates/Test/assets/js/jquery-1.11.0.min.js"></script>
<script src="http://www.jackpotjoy.com/promo/responsive_templates/Test/owlcarousel/owl.carousel.js"></script>
试试这个!
$('.owl-video-play-icon').remove();
jsfiddle 在这里:http://jsfiddle.net/lharby/31muLtex/4/
(我试图禁用 .owl-video-play-icon 上的点击事件,但它没有用,大概它稍后会被 youtube js 触发,这确实意味着可以是另一种解决方案,但这确实会阻止视频在缩略图中播放)。
![在此处输入图片描述][1]目前我可以点击轮播中的任何视频,它会出现在 iframe 中,我只是在其中获取视频的 src。我想知道是否有办法阻止用户在轮播中播放视频,但仅在视频位于 iframe 内时播放。
<div class="row">
<div class="main">
<iframe width="600" height="480" id="mainvideo" src="https://www.youtube.com/embed/DU6UV2GPzIk?" style="margin: 30px auto 10px;float: none;display: block;" src="" frameBorder="0" allowfullscreen=""></iframe>
<div id="owl-demo" class="owl-carousel">
<div class="article-video red" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/DU6UV2GPzIk?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/2ZfqGr7HbEo?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/053yP1wQR_s?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/B-QIFAy6LPI?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/4_ZRUC0g1ic?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/YU6AU-khKuo?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/Bkz5wyb_6j8?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/f1kx4Bce6nI?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/1HTq4F_js2g?"></a></div>
</div>
</div>
这是我用来更改 IFrame 中的视频的 Jquery 代码。
$(document).ready(function(){
$(".article-video").click(function(e) {
e.preventDefault();
var href= $(this).find('a').attr('href');
var target = $('.article-video').index($(this));
$("#mainvideo").attr("src", href);
})
});
$(document).ready(function() {
var owl = $('.owl-carousel');
owl.owlCarousel({
items:4,
margin:20,
loop:true,
video:true,
lazyLoad:true,
dots:false,
responsive:{
0:{
items:1
},
678:{
items:3
},
1000:{
items:4
}
},
nav:true,
navText: [
"<i class='icon-chevron-left icon-white'><</i>",
"<i class='icon-chevron-right icon-white'>></i>"
]
});
});
$(document).ready(function(){
$(".article-video").click(function(e) {
e.preventDefault();
var href= $(this).find('a').attr('href');
var target = $('.article-video').index($(this));
$("#mainvideo").attr("src", href);
})
});
<link rel="stylesheet" href="http://www.jackpotjoy.com/promo/responsive_templates/Test/assets/css/demo.css">
<link rel="stylesheet" href="http://www.jackpotjoy.com/promo/responsive_templates/Test/owlcarousel/owl.carousel.css">
<link rel="stylesheet" href="http://www.jackpotjoy.com/promo/responsive_templates/Test/owlcarousel/owl.theme.css">
<div class="row">
<div class="main">
<iframe width="600" height="480" id="mainvideo" src="https://www.youtube.com/embed/DU6UV2GPzIk?" style="margin: 30px auto 10px;float: none;display: block;" src="" frameBorder="0" allowfullscreen=""></iframe>
<div id="owl-demo" class="owl-carousel">
<div class="article-video red" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/DU6UV2GPzIk?controls=0"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/2ZfqGr7HbEo?controls=0"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/053yP1wQR_s?controls=0"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/B-QIFAy6LPI?controls=0"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/4_ZRUC0g1ic?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/YU6AU-khKuo?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/Bkz5wyb_6j8?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/f1kx4Bce6nI?"></a></div>
<div class="article-video" data-merge="2"><a class="owl-video" href="https://www.youtube.com/embed/1HTq4F_js2g?"></a></div>
</div>
</div>
</div>
<script src="http://www.jackpotjoy.com/promo/responsive_templates/Test/assets/js/jquery-1.11.0.min.js"></script>
<script src="http://www.jackpotjoy.com/promo/responsive_templates/Test/owlcarousel/owl.carousel.js"></script>
试试这个!
$('.owl-video-play-icon').remove();
jsfiddle 在这里:http://jsfiddle.net/lharby/31muLtex/4/
(我试图禁用 .owl-video-play-icon 上的点击事件,但它没有用,大概它稍后会被 youtube js 触发,这确实意味着可以是另一种解决方案,但这确实会阻止视频在缩略图中播放)。