Question

我在这里有一个例子：VideoSlide Example

我的问题是没有任何显示。

我已经有效地复制了Owl网站上的代码，但是我没有显示任何内容。

最初，我把它编码在一个更大的网站上，这是仅适用于旋转木马的剪切版本。我有旋转木马处理图像，但视频躲避我，如果有的话，视频看起来应该更简单！

我已经为版本2采用了最新的Owl JS和CSS。

我没有修改JS或CSS，它处于下载状态。

我已经完成了与猫头鹰视频和凯文学院的代码比较，后者也使用带视频的猫头鹰旋转木马。

据我所知，我也是这样做的。

显然我没有。

戴比

Answer 1

猫头鹰的video demo网站has a style for .item-video

.owl-carousel .item-video{height:300px}

将其添加到您自己的CSS中，如果您使用与视频演示相同的标记，则会显示您的视频。

文档中提到的选项没有任何影响，所以我想对于owl 2.0来说可能是更好的想法（ 2.0.0-beta.2.4} 在这篇文章发表时）。

videoWidth: false, // Default false; Type: Boolean/Number
videoHeight: false, // Default false; Type: Boolean/Number

Answer 2

访问者答案的一个方便的补充是，大多数视频都具有设定的宽高比（16：9）。因此，您可以使用常规宽高比CSS填充技巧将每个项目视频包装在固定宽高比容器中。

具体来说，包装视频项目如下：

<div class="fixed-video-aspect"><div class="item-video"> ... </div></div>

然后添加以下CSS来修复16：9中的每个项目：

.owl-carousel .fixed-video-aspect {
  position: relative;
}
.owl-carousel .fixed-video-aspect:before {
  display: block;
  content: "";
  width: 100%;
  padding-top: 56.25%;
}
.owl-carousel .fixed-video-aspect > .item-video {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

Answer 3

如visitsb所述，您可以从CSS设置缩略图高度。你会得到一个黑色背景的漂亮旋转木马。

但是，文档中提到的选项仅在设置时起作用（来自source code）

$('.owl-carousel').owlCarousel({
  video: true,
  videoHeight: 300, 
  videoWidth: 600
});

第一个解决方案的结果更漂亮。

Answer 4

只是快速检查控制台，看起来没有加载owl js。

<script src="../assets/owlcarousel/owl.carousel.js"></script>

Answer 5

如果您想要在没有服务器的情况下打开页面并出现以下错误：

净:: ERR_FILE_NOT_FOUND

enter image description here

打开文件：

owl.carousel \ DIST \ owl.carousel.js

或

owl.carousel \ dist \ owl.carousel.min.js（如果您在网站上使用minify版本）

并添加协议，例如：

enter image description here

Answer 6

我必须手动为.owl-video-wrapper添加一个高度，现在似乎没问题了。

希望这有助于将来的某些人。虽然这有点奇怪。

猫头鹰旋转木马不显示视频

6 个答案: