Question

如何将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/

Answer 1

尝试在源标记上放置width和height属性：

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;  }

Answer 2

这种方式有用......我认为你不能用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

如何将html5视频拉伸到宽度：600和高度200？

2 个答案: