如何在給定的幀中完整顯示視頻，而不僅僅是一部分？

Question

我試圖弄清楚我不熟悉的軟件是如何工作的。 有一個 Adob​​e Flex 頁面，它以 240 * 120 的幀顯示來自相機的流視頻。如果雙擊視頻幀，您會得到一個新的幀，顯示大小為 480 * 240 的視頻。

問題是：較小的幀 240 * 120 僅顯示大視頻幀中顯示的左上角部分，它顯示了完整的視頻圖像。 細節是一樣的。

我想要實現的是完整視頻也顯示在較小的幀中。

如果我在軟件中搜索 240 和 120 的大小，我會得到一個包含以下 css 片段的 jsp：

.video {
   height = "120", width = "240"
}

我用那個 css 片段替換了

.video {
   height = "100%", width = "100%"
}

但這沒有任何區別。

有人有線索嗎？

提前致謝！

******* 后記：*******

@Lars：周末我從頭頂寫了我的問題。 你的建議我已經實施了。 但是我發現我把它應用到了錯誤的jsp上。 我通過在瀏覽器中查看源代碼驗證了以下部署：

#intercomIframe {
    position:absolute;
    width:100%;
    height:100%;
    right:60;
    bottom:75;
    z-index:5"  
}

原始值是：

 #intercomIframe {
    position:absolute;
    width:165px;
    height:128px;
    right:60;
    bottom:75;
    z-index:5"  
}

如果我雙擊視頻，我會進入一個 flex 屏幕（擴展名 .mxml），並完整顯示相同的視頻。 該視圖的部分負責代碼：

<components:FilterBar 
  id="filterBar" 
  visible="{enableFiltering}"
>
  <system:VideoSourceControlBox 
    id="videoSourceControl" 
    stationId="{station.id}" 
    autoSelect="true" 
    startSource="showVideo(true)" 
    stopSource="showVideo(false)" 
  />
</components:FilterBar>

<mx:Box 
  width="100%" height="100%" 
  backgroundColor="#e7ebf1" 
  paddingTop="15" paddingBottom="15" 
  paddingRight="15"paddingLeft="15"
>
  <mx:VBox 
    width="100%" height="100%" minHeight="0"
    cornerRadius="8"
    paddingTop="15" paddingBottom="15"
    paddingRight="15" paddingLeft="15"
    borderThickness="1" borderStyle="solid" borderColor="#838383"
  >
    <mx:VBox 
      width="100%" height="100%" 
      id="videoFrameContainer" 
      horizontalAlign="center"
    >
    </mx:VBox>
    <mx:Label 
      id="sourceLabel" 
      text="{_currentSource.name}" 
      width="100%" 
      color="black"
      textAlign="center" 
    />
  </mx:VBox>
</mx:Box>

正是這段代碼讓我想到我應該用百分比替換像素，可惜沒有成功。

Answer 1

首先，您需要使用:(colon)來分隔CSS屬性和值，但您使用了 =（等於）。 所以改變它。

使用以下styles在一frame顯示完整video 。

樣式文件

.video {    
      height: 100%;
      width: 100%;   
    } 

演示.html

<iframe src="video1.mp4" class="video" /> 

Answer 2

（見底部更新）

給出的示例不是有效的 CSS：

1. 屬性和值應該用:而不是=分隔
2. 規則（屬性值對）應該用;分隔; 而不是一個,
3. 值不應包含在'或" 。它們可以單獨放置

需要記住的重要一點是，您不能僅將整數作為像素距離傳遞； 您需要指定單位，例如： 120px 。

第二件事是我假設video是班級名稱； 如果是標簽名稱，則它應該是video而不是.video 。

概括：

.video /* or 'video' */ {
  height : 100%;
  width : 100%;
}

我不知道這是否是導致問題的原因，因為您沒有給我們任何其他代碼。 如果 CSS 的其余部分也是這樣格式化的，那也不應該起作用。 而且我不知道 jsp，但如果它適用於常規 CSS，則不應該起作用。

更新：

抱歉更新晚了，直到現在我才注意到您更新了問題。 正如我所說，我不了解 jsp 和任何其他代碼； 我來這里是為了 CSS。 對不起，我不能再幫助你了。 我可以修復的唯一有錯誤的 CSS 是z-index:5" ，它應該是z-index:5; （或沒有; ），但這可能只是一個錯字，我什至不確定它是否相關.

我認為最好不要刪除這個答案，讓其他人的理解更好，但我認為這不再有任何其他價值。

Answer 3

使用以下代碼顯示全屏視頻

<iframe src="URL here" style="border: 0; position:fixed; top:0; left:0; right:0; bottom:0; width:100%; height:100%">