如何在自舉輪播中裁剪視頻

我在將HTML5視頻放置在自舉輪播中時遇到問題。我的旋轉木馬應占用屏幕的90％，以便它響應。如何在自舉輪播中裁剪視頻

我試圖將視頻放在寬度大約爲200％（H×W）的大小的旋轉木馬中，這樣我就可以使用div來將它剪裁成overflow hidden到90％的屏幕。

但我的div顯示整個視頻，而且它沒有響應。我可以弄清楚爲什麼。

HTML

<!-- Carousel. 
    ================================================== --> 
    <div id="myCarousel" class="carousel slide" data-ride="carousel" style="background: none;"> 
     <!-- Indicators --> 
     <ol class="carousel-indicators"> 
      <li data-target="#myCarousel" data-slide-to="0" class="active"></li> 
      <li data-target="#myCarousel" data-slide-to="1"></li> 
     </ol> 
     <div class="carousel-inner "> 
      <div class="item active"> 
      <div class="croppedvideo"> 
       <video class="videoInsert" autoplay loop poster="~/Content/video/posters/b-roll-1.jpg" muted> 
        <source src="https://broken-links.com/tests/media/BigBuck.webm" type="video/webm"> 
        <source src="https://broken-links.com/tests/media/BigBuck.m4v" type="video/mp4" /> 
        Your browser does not support the video tag. 
       </video> 
      </div> 
      </div> 



     </div> 
     <a class="left carousel-control" href="#myCarousel" data-slide="prev"> 
      <span class="glyphicon glyphicon-chevron-left"></span></a> 
     <a class="right carousel-control" href="#myCarousel" data-slide="next"> 
      <span class="glyphicon glyphicon-chevron-right"></span></a> 
    </div> 
    <!-- /.carousel -->

CSS

#myCarousel { 
    overflow: hidden; 
} 
.videoInsert { 
    position: relative; 
    -webkit-transform: translateZ(0); 
    right: 0; 
    bottom: 0; 
    top: 0; 
    left: 0; 
    margin-top: 0; 
    min-width: 100%; 
    min-height: 100%; 
    width:200%; 
    height: 200%; 
    background-size: cover; 
    overflow: hidden; 
    z-index: 1000; 
} 
.croppedvideo{ 
    width: 100%; 
    height: 90%; 
    overflow: hidden 
} 
.item { 
    height: inherit; 
}

這裏是我的jsfiddle： https://jsfiddle.net/neosketo/3odjmxd1/5/

來源

2016-04-22 NeoSketo

如果你想獲得轉盤是的90％高度的頁面，我沒有看到適用於任何地方。您將90％的高度應用於裁剪後的視頻div，您需要將此應用於您的實際輪播。您還需要將高度應用於<body>和<html>標籤，以便90％基於整個頁面高度。

在這裏看到一個更新的小提琴https://jsfiddle.net/6cgm8ybq/1/

這是我所做的更改：

body, 
html { 
    height: 100%; 
} 
#myCarousel { 
    height: 90%; 
    overflow: hidden; 
} 
.croppedvideo{ 
    width: 100%; 
    /* height: 90%; */ 
    /* overflow: hidden */ 
}

來源

2016-04-22 14:58:02 hidanielle

如何在自舉輪播中裁剪視頻

回答

相關問題