貓頭鷹旋轉木馬不顯示視頻

我這裏有一個例子：VideoSlide Example 貓頭鷹旋轉木馬不顯示視頻

我的問題是什麼顯示器。

我已經有效地複製了貓頭鷹站點的代碼，但是我什麼也沒有顯示。

最初，我編碼在一個更大的網站，這是減少版本只適用於旋轉木馬。我有旋轉木馬使用圖像，但視頻躲過我，如果有的話，視頻看起來應該更簡單！

我已經採取了最新的貓頭鷹JS和CSS版本2

我還沒有修改的JS或CSS，它在它的下載狀態。

我已經完成了與貓頭鷹頁面的視頻和卡爾文學院的代碼比較，卡爾文學院也使用帶有視頻的貓頭鷹旋轉木馬。

據我所見，我也這樣做了。

顯然我沒有。

黛比

來源

2014-10-04 Deborah Taylor

剛剛從快速檢查控制檯，貌似沒有加載JS貓頭鷹。

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

來源

2014-10-04 15:52:44 Mintberry

雖然你是100％正確的，這是一個剪切和粘貼錯誤，而我是從貓頭鷹演示覆制，是的，我也覺得現在啞！我把它放回到我的JS文件夾中的JScript中，但它仍然不起作用。所以我仍然難倒。 – 2014-10-04 17:32:13

-1

我不得不手動增加一個高度到.owl-video-wrapper，現在看起來好了。

希望這可以幫助未來的人。這有點奇怪，但。

來源

2015-02-15 14:15:56 Matt

貓頭鷹對video demo網站實際上has a style for .item-video

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

它添加到自己的CSS，和您的視頻會顯示出來，如果你使用相同的標記的視頻演示。

文檔上提到的選項沒有任何影響，所以我想這可能是貓頭鷹2.0出來β（2.0.0 beta.2.4在這個帖子的時候更好的主意）。

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

來源

2015-03-20 12:27:28 visitsb

不適用於我。版本2.2.1 – dit 2017-06-03 18:34:35

由於visitsb表示，您可以從CSS設置縮略圖高度。你會得到一個黑色背景的旋轉木馬。文檔在mentionned只有當兩者都設置（從source code）工作

然而，選項

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

與第一溶液的結果是更漂亮。

來源

2015-11-20 23:29:09 gabriel

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-28 02:43:20

可以使用流體寬度視頻容器推高度而不是用CSS固定高度。通過這樣做，您可以避免任何黑帶，並且您的視頻將與容器齊平，並在調整大小時保持完美比例。

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

您將需要修改項目視頻的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-08 02:43:30 lucidlips

貓頭鷹旋轉木馬不顯示視頻

回答

相關問題