如何集中HTML5视频?
我只是搞乱了一些HTML5,我试图在页面上放置一个视频。出于某种原因,我无法让它居中。我试图给视频标签本身添加一个类,并且我将视频包装在单独的div
中。但是,视频停留在左侧。如何集中HTML5视频?
<!DOCTYPE HTML>
<html>
<head>
<title>Test</title>
<script type="text/css">
.center {
margin: 0 auto;
}
</script>
</head>
<body>
<div class="center">
<video controls="controls">
<source src="/media/MVI_2563.ogg" type="video/ogg" />
Your browser does not support the video tag.
</video>
</div>
</body>
</html>
我知道这一定是我在上午凌晨忽略的东西,但任何帮助将不胜感激。
感谢
中心类必须有一个宽度,以便使汽车利润率工作:
.center { margin: 0 auto; width: 400px; }
然后我会申请中心类视频本身,不是容器:
<video class='center' …>…</video>
定义的宽度。从div中删除类,并将其添加到视频标签。仍然没有运气!我认为这里还有其他的事情发生,因为即使增加样式来改变身体的背景颜色也是无所事事。这很古怪。 – snowBlind 2011-05-04 06:16:47
您是否在没有正确的DOCTYPE的情况下使用IE6?没有其他理由可以想到这是行不通的。你可以在http://jsfiddle.net上用CSS和HTML分享你的代码吗?哦,你有没有包括样式表? – 2011-05-04 06:29:19
我正在使用FF4,Chrome11和IE9。另外,这些样式是嵌入式的,所以没有我忘记包含的外部样式。 http://jsfiddle.net/8cXqQ/我改变它包括一个宽度为人们在这里提到的,我删除了div,并将类添加到视频标签本身。 – snowBlind 2011-05-04 19:15:59
.center { width:500px; margin-right:auto; margin-left:auto; }
@snowBlind在你给第一个例子,你的风格规则应该在一个<风格>标签,而不是一个<脚本>标签:
<style type="text/css">
.center {
margin: 0 auto;
}
</style>
而且,我想,是在this answer提到的(见http://jsfiddle.net/8cXqQ/7/结果)的变化,但他们仍然没有出现工作。
您可以用div围绕视频,并将div的宽度和自动边距应用于视频中心(同时指定视频的宽度属性,请参阅http://jsfiddle.net/8cXqQ/9/的结果)。
但是,这似乎并不是最简单的解决方案...我们不应该能够中心视频没有必须将其包装在一个容器div?
谢谢你用'style'和'script'指出我的错误。我知道CSS应该包装在一个样式标签中,但是在事故中必须只是键入脚本,并没有注意到它。 – snowBlind 2011-06-02 05:03:57
我遇到了同样的问题。这对我有效:
.center {
margin: 0 auto;
width: 400px;
**display:block**
}
非常感谢你,我遇到了同样的问题。由于某种原因,没有人指出。 – Abdel 2016-02-07 02:50:21
我有一个修复Dreamweaver中的网站类似的问题。网站结构是基于一组复杂的表格,并且这个视频位于主布局单元之一中。我创建嵌套表只是用于视频,然后加入align=center
属性到新表:
<table align=center><tr><td>
<video width=420 height=236 controls="controls" autoplay="autoplay">
<source src="video/video.ogv" type='video/ogg; codecs="theora, vorbis"'/>
<source src="video/video.webm" type='video/webm' >
<source src="video/video.mp4" type='video/mp4'>
<p class="sidebar">If video is not visible, your browser does not support HTML5 video</p>
</video>
</td></tr></table>
我有同样的问题,直到我意识到<video>
元件是内嵌元素,不会阻塞元件。您只需将容器元素设置为具有text-align: center;
以便在页面上水平居中视频。
试试这个:
video {
display:block;
margin:0 auto;
}
HTML代码:
<div>
<video class="center" src="vd/vd1.mp4" controls poster="dossierimage/imagex.jpg" width="600"></video>
</div>
CSS代码:
.center {
margin-left: auto;
margin-right: auto;
display: block
}
你能为此添加更多评论吗? – 2013-03-29 04:04:01
虽然他没有评论它,但我可以尝试解释 - 这也是正确的答案,只有一个适合我。 从@djpMusic,他说视频和音频元素实际上是内联元素而不是块,所以使用“display:block”你明确地说它是一个块元素,因此你可以应用margin-left:auto; margin-right:auto;使它们在容器内居中。 – AndrewB 2013-11-30 19:26:08
这样做:
<video style="display:block; margin: 0 auto;" controls>....</video>
完美的作品! :D
感谢您的内联,当不使用CSS。 – 2015-04-20 13:40:37
您只需将视频标签设置为display:block;
即可,FTW的默认值为inline-block
FTL。
试试这个
.center {
margin: 0 auto;
width: (whatever you want);
display: block;
}
如果以百分比的宽度,你可以这样做:
video {
width: 50% !important;
height: auto !important;
margin: 0 auto;
display: block;
}
<!DOCTYPE html>
<html>
<body>
<video controls>
<source src="http://www.nasa.gov/downloadable/videos/sciencecasts-_total_eclipse_of_the_moon.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
</html>
我找到了这个网页,而试图居中对齐一对的视频。所以,如果我在一个中心div
(我已经叫*),保证金招作品附上两个视频,但宽度很重要(2个视频400 +填充等)
<div class=central>
<video id="vid1" width="400" controls>
<source src="Carnival01.mp4" type="video/mp4">
</video>
<video id="vid2" width="400" controls>
<source src="Carnival02.mp4" type="video/mp4">
</video>
</div>
<style>
div.central {
margin: 0 auto;
width: 880px; <!--this value must be larger than both videos + padding etc-->
}
</style>
为我工作!
使用利润率<video>
是一个内联元素,所以你必须添加display block;
您CSS类。
您可以使用特定的,但我不会使用px值。使用%使其响应,如:
width: 50%;
这将使视频宽度的一半视口。
在这里看到了原始的文档Ø万维网联盟W3C
mystyle.css
video {
width: 50% !important;
height: auto !important;
margin: 0 auto;
display: block;
}
h1 {
text-align: center;
color: #C42021;
font-size: 20px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>
How do you center a video
</h1>
<div class="center">
<video controls="controls">
<source src="https://repositorio.ufsc.br/xmlui/bitstream/handle/123456789/100149/Vídeo%20convertido.mp4" type="video/mp4" />
</video>
</div>
</body>
</html>
看到代码准备这里更多的了解。
可能是你在我增加宽度的.center类 – sandeep 2011-05-04 06:03:00