【发布时间】：2018-04-03 19:09:35
【问题描述】：
我在轮播中有几个视频，输入的项目如下：
<div id="owl4" class="owl-carousel owl-theme">
<div class="owl-item-container video-aspect-16-9" data-aspect="1.7777778">
<a class="owl-video" href="https://www.youtube.com/watch?v=1Dhn6yCygS8"></a>
<div class="owl-text-container">
<h2>This video is 19:9</h2>
<a class="owl-image-link" href="#">
<p>Some text.</p>
</a>
</div>
</div>
<div class="owl-item-container video-aspect-4-3" data-aspect="1.333333">
<a class="owl-video" href="https://www.youtube.com/watch?v=S03UOkb9zU4"></a>
<div class="owl-text-container">
<a class="owl-image-link" href="#">
<h2>This video is 4/3.</h2>
<p>Some text.</p>
</a>
</div>
</div>
</div>
脚本是这样的：
$(document).ready(function(){
$('#owl4').owlCarousel({
items:1,
margin:0,
dots:true,
video:true,
onPlayVideo: videoSize
});
function videoSize(event){
var video = $(document).find(".owl-video-frame");
console.log(video);
}
});
旋转木马有效。但我试图让 jQuery 找到 div 和 .owl-video-frame 类，当点击视频播放符号时 Owl Carousel 2 添加。
通过上面的代码，我可以让 iQuery 找到 .owl-video-wrapper，它是 .owl-video-frame 的父级，也是由 Owl Carousel 添加的。如果我这样做并且console.log 我可以在.owl-video-wrapper 孩子的列表中看到.owl-video-frame。但我仍然无法让 jQuery 找到包含 youtube 视频的 .owl-video-frame 或 iframe。
如果我使用event 而不是document，我也会遇到同样的问题。
我做错了什么？
编辑
我可以定位当前正在播放的视频，因为 jQuery 会找到.owl-item.active。但是，问题是 jQuery 在.owl-video-wrapper 之后找不到任何东西，所以我无法“到达”.owl-video-frame。
EDIT2
这是在第一个视频上单击播放按钮后的完整代码，并且额外的 divs 和 iframe 已由 Owl Carousel 添加：
<head>
<meta charset="utf-8">
<meta content="IE=edge" http-equiv="X-UA-Compatible">
<meta content="width=device-width, initial-scale=1" name="viewport">
<title>Owl Slider</title>
<link href="scripts/owl.carousel.css" rel="stylesheet">
<link href="scripts/owl.theme.default.css" rel="stylesheet">
<link href="scripts/stuff-style-carousel-3.css" rel="stylesheet">
<script src="https://code.jquery.com/jquery-1.12.4.min.js">
</script>
<script src="scripts/owl.carousel.min.js">
</script>
</head>
<body>
<h1>Video with 100% width of the browser window and maintains its aspect ratio</h1>
<div class="owl-carousel owl-theme owl-loaded owl-drag" id="owl4">
<div class="owl-stage-outer">
<div class="owl-stage" style="transform: translate3d(0px, 0px, 0px); transition: 0s; width: 1196px;">
<div class="owl-item active owl-video-playing" data-video="https://www.youtube.com/watch?v=1Dhn6yCygS8" style="width: 598px;">
<div class="owl-item-container video-aspect-16-9" data-aspect="1.7777778">
<div class="owl-video-wrapper">
<a class="owl-video" href="https://www.youtube.com/watch?v=1Dhn6yCygS8" style="display: none;"></a>
<div class="owl-video-frame">
<iframe allowfullscreen frameborder="0" height="251" src="//www.youtube.com/embed/1Dhn6yCygS8?autoplay=1&rel=0&v=1Dhn6yCygS8" width="100%"></iframe>
</div>
<div class="owl-video-play-icon"></div>
<div class="owl-video-tn" style="opacity:1;background-image:url(//img.youtube.com/vi/1Dhn6yCygS8/hqdefault.jpg)"></div>
</div>
<div class="owl-text-container">
<h2>This video is 19:9</h2><a class="owl-image-link" href="#">
<p>Some text.</p></a>
</div>
</div>
</div>
<div class="owl-item" data-video="https://www.youtube.com/watch?v=S03UOkb9zU4" style="width: 598px;">
<div class="owl-item-container video-aspect-4-3" data-aspect="1.333333">
<div class="owl-video-wrapper">
<a class="owl-video" href="https://www.youtube.com/watch?v=S03UOkb9zU4" style="display: none;"></a>
<div class="owl-video-play-icon"></div>
<div class="owl-video-tn" style="opacity:1;background-image:url(//img.youtube.com/vi/S03UOkb9zU4/hqdefault.jpg)"></div>
</div>
<div class="owl-text-container">
<a class="owl-image-link" href="#">
<h2>This video is 4/3.</h2>
<p>Some text.</p></a>
</div>
</div>
</div>
</div>
</div>
<div class="owl-nav disabled">
<button class="owl-prev" role="presentation" type="button"><span aria-label="Previous">‹</span></button><button class="owl-next" role="presentation" type="button"><span aria-label="Next">›</span></button>
</div>
<div class="owl-dots">
<button class="owl-dot active" role="button"><span></span></button><button class="owl-dot" role="button"><span></span></button>
</div>
</div>
<script>
$(document).ready(function(){
$('#owl4').owlCarousel({
items:1,
margin:0,
dots:true,
video:true,
onPlayVideo: videoSize
});
function videoSize(event){
var video = $(document).find(".owl-video-frame");
console.log(video);
}
});
</script>
</body>
【问题讨论】：
-
我在你的 html 中没有看到
owl-video-frame类
标签： javascript jquery video owl-carousel owl-carousel-2