2013-03-21 145 views
2

如何將html5視頻拉伸爲寬度:600和高度200?如何將html5視頻拉伸爲寬度:600和高度200?

當我嘗試,在尺寸導航欄增加,但視頻保持小

代碼:

<!DOCTYPE html> 
<html> 
<body> 

<video width="600" height="200" controls> 
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> 
    Your browser does not support the video tag. 
</video> 

</body> 
</html> 

的jsfiddle:http://jsfiddle.net/ke8HX/1/

+1

[HTML 5視頻拉伸](可能重複http://stackoverflow.com/questions/3779771/ html-5-video-stretch) – epascarello 2013-03-21 13:10:25

+0

適合我。順便說一下,使用Chrome。 – David 2013-03-21 13:10:50

+0

@epascarello - 上面寫着「按比例」,即沒有被指定爲這一問題的要求和方法取決於它是否成正比與否是不同的。 – Quentin 2013-03-21 13:11:47

回答

0

嘗試把寬度和源標籤高度屬性:

http://jsfiddle.net/ke8HX/8/

HTML

<video class="vid" controls=true> 
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> 
    Your browser does not support the video tag. 
</video> 

CSS

.vid {} 
.vid source { width:600px; height:200px; } 
0

這有點兒工程...我不認爲你將能夠修改,雖然只用CSS實際播放控制條。它甚至沒有在我的Chrome Developer版本中顯示爲要修改的HTML圖層。但視頻會重新調整!

的CSS:

#vid, #vid source { width:600px !important; height:200px !important;} 

的HTML:

<video id="vid" controls=true> 
    <source src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4"> 
    Your browser does not support the video tag. 
</video> 

The Demo

相關問題