5

我这里有一个例子:VideoSlide 例子

我的问题是什么都没有显示。

我已经有效地从 Owl 站点复制了代码,但我没有得到任何显示。

最初,我将它编码在一个更大的站点中,这是缩减版,仅适用于轮播。我有旋转木马处理图像,但视频让我望而却步,如果有的话,视频看起来应该更简单!

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

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

我已经与 Owl page for videos 和 Calvin College 进行了代码比较,Calvin College 也使用 Owl carousel 和视频。

据我所知,我也做过同样的事情。

显然我没有。

黛比

4

7 回答 7

16

owl 的视频演示网站实际上有一种风格.item-video

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

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

文档中提到的选项没有任何效果,所以我想 owl 2.0 退出 beta 版本可能是一个更好的主意(在本文发布时为2.0.0-beta.2.4)。

videoWidth: false, // Default false; Type: Boolean/Number
videoHeight: false, // Default false; Type: Boolean/Number
于 2015-03-20T12:27:28.350 回答
3

对于visitb 的回答,一个方便的补充是大多数视频都有固定的纵横比(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;
}
于 2016-04-28T02:43:20.253 回答
1

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

但是,文档中提到的选项仅在两者都设置时才有效(来自源代码

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

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

于 2015-11-20T23:29:09.627 回答
1

您可以使用流体宽度视频容器来推动高度,而不是使用 css 固定高度。通过这样做,您可以避免任何黑色条纹,并且您的视频将与容器齐平播放,并在调整大小时保持完美的比例。

<div class="owl-carousel owl-theme">
    <div class="video-wrapper">
        <div class="item-video">
            <div class="owl-video" href="//videourl">

您将需要修改 item-video 的 css 以使其播放良好。

.owl-carousel .item-video {
position: absolute;
height: 100%;
width: 100%;
left: 0;
top: 0;
}

此外,您还可以使封面图像填充幻灯片并丢失该条带。

.owl-carousel .owl-video-tn {
background-size: cover !important;
}

我使用的视频包装器是 16x9,但任何流体宽度包装器都可以使用。这是我用的那个。

.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

来源:https ://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

于 2017-05-08T02:43:30.713 回答
0

只是从快速检查控制台来看,似乎没有加载 owl js。

<script src="../assets/owlcarousel/owl.carousel.js"></script>
于 2014-10-04T15:52:44.160 回答
0

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

净::ERR_FILE_NOT_FOUND

在此处输入图像描述

打开文件:

owl.carousel\dist\owl.carousel.js

或者

owl.carousel\dist\owl.carousel.min.js(如果您在现场使用缩小版)

并添加协议,例如:

在此处输入图像描述

于 2018-04-26T14:03:14.207 回答
-1

我不得不手动添加一个高度.owl-video-wrapper,现在似乎没问题。

希望这对将来的人有所帮助。不过这有点奇怪。

于 2015-02-15T14:15:56.110 回答