javascript - 如何在猫头鹰轮播中单击按钮时自动播放 iframe 视频
问题描述
我正在使用 owl carousel 滑块,滑块只有在我们单击按钮时才可见并自动播放,目前我需要双击播放视频,这不是 HTML 预期的(这些滑块超过 2 个,我在这里放了 2 个)
<div class="owl-carousel video-slider">
<div class="video-slide">
<img src="src/media/testimonial-image1.jpg" alt="">
<div class="item-video">
<a class="owl-video" href="https://www.youtube.com/embed/n1a3VZY0xgM"></a>
</div>
<span class="clickIframeBtn"><i class="fa fa-play-circle"></i></span>
</div>
<div class="video-slide">
<img src="src/media/testimonial-image1.jpg" alt="">
<div class="item-video">
<a class="owl-video" href="https://www.youtube.com/embed/n1a3VZY0xgM"></a>
</div>
<span class="clickIframeBtn"><i class="fa fa-play-circle"></i></span>
</div>
</div>
我只需要在图像上显示一个视频,所以我使用绝对位置来重叠图像上的视频,首先不显示视频幻灯片
.item-video {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
transition: all 0.3s ease-in-out;
z-index: 999;
width: 100%;
height: 100%;
}
.owl-carousel .owl-video-wrapper {
position: relative;
height: 100%;
background: #00000026;
}
.fa-play-circle {
position: absolute;
top: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
height: 100%;
text-align: center;
display: flex;
justify-content: center;
align-items: center;
color: #ff0000;
font-size: 72px;
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
border-radius: 5px;
}
我不擅长 jquery,我只是尝试在单击图标(按钮)后显示阻止视频 div
$(document).ready(function() {
$('.owl-carousel.video-slider').owlCarousel({
loop: true,
margin: 10,
nav: true,
dots: true,
items: 1,
autoplay: false,
video: true,
lazyLoad: true,
autoplayTimeout: 4000,
autoplayHoverPause: true,
autoplaySpeed: 1000
});
$('.clickIframeBtn').on('click', function(ev) {
$('.owl-video').show();
// $('.testimonial-iframe')[0].src += '&autoplay=1';
ev.preventDefault();
});
});
一旦点击跨度视频应该自动播放,
提前非常感谢:)
解决方案
推荐阅读
- java - 如何保存数组列表
在本地存储android? - c# - 插入mysql表
- ios - 可扩展的 UITableView 在部分之间移动行有错误的页脚问题
- javascript - 如何在 JavaScript 上以 txt 格式下载数组
- swift - Alamofire 上传进度
- java - 使用锁定的设备 Headless JS 杀死 React Native Android 应用程序:在桥被破坏后调用 JS 函数(从后台启动应用程序)
- python - 部分已知日期之间的Python差异
- r - 如何在r中的for循环中运行协方差
- java - 如何防止在tomcat中重置数组?
- r - 如何在 R 中按组填充数据框中的空白?