在HTML5中設置視頻高度

可能是一個簡單的問題，但它真的讓我發瘋。我只想設置HTML5視頻的高度和寬度。在HTML5中設置視頻高度

我使用這個代碼：

<video controls="controls" width="1000" id="video"> 
      <source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'> 
      <source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
    </video>

結果： enter image description here

如果我添加height屬性

<video controls="controls" width="1000" height="300" id="video"> 
       <source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'> 
       <source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
</video>

結果： enter image description here

所以我失去了索姆在這裏？

任何人都可以糾正我正在做的錯誤。

來源

2012-04-04 coder

您是否嘗試過在CSS設置尺寸呢？可能更容易從那裏調整它們。此外，您還可以設置視頻以適應其父級的尺寸（視頻{width：100％; height：100％;}）並即時修改其父級的尺寸。尚未測試過。只是一個想法！ – Oriol 2014-01-21 19:41:36

您無法更改<video>標記中的寬高比。

但是，您可以閱讀您的視頻內容並將其寫入<canvas>元素。

例如：

<canvas id="canvas" height="768" width="1024"></canvas>

和JS：

function updateVideo() { 
    var canvas = document.getElementById('canvas'); 
    var ctx = canvas.getContext('2d'); 
    var myVideo = document.getElementById('video'); 
    ctx.drawImage(myVideo, 0, 0, 640, 480); 
} 
setInterval (updateVideo, 24);

來源

2012-04-04 12:57:34 antyrat

-3

您可以使用CSS來解決。

#video { 
    width:1000px; 
    height:auto; 
}

來源

2012-04-04 13:05:00 Dips

@ User1193749-我已經試過了，但它是一樣的。 – coder 2012-04-04 14:07:29

這裏是簡單的CSS技巧，你不需要添加任何JavaScript或jQuery代碼。在視頻標籤上使用object-fit CSS屬性。

HTML

<video controls="controls" id="video"> 
<source src="sintel-trailer.ogv" type='video/ogg; codecs="theora, vorbis"'> 
<source src="sintel-trailer.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'> 
</video>

CSS

#video{ 
    object-fit: initial; 
    width: 400px; 
    height: 300px; 
}

See Fiddle

來源

2016-01-25 11:04:49 Musa

從來沒有聽說過這個屬性之前，已經經歷了奇怪的定位視頻幾個小時才發現這一點，謝謝 – 2016-04-29 03:47:39

爲我工作，+1，我用objest-fit：封面，但這工作。 – 2017-12-12 12:04:35

在HTML5中設置視頻高度

回答

相關問題