老师。。。

video上下有空白。
如何设置video高度啊

慕神6715844 2018-10-11

源自：HTML5音视频 3-6 js实现进度条跟随

收起

3回答

好帮手慕星星回答被采纳获得+3积分 2018-10-11 17:14:35

视频中是有设置video视频宽高的代码哦：

将父元素的宽度赋值给video视频就可以了。

自己测试下，祝学习愉快~~

收起回答

慕神6715844 提问者 #1

老师，老师，老师，

2018-10-12 09:28:57
慕神6715844 提问者 #2

在线急等，

2018-10-12 09:29:10

提问者慕神6715844 2018-10-12 00:02:13

仔细一看发现我这个JS 函数不是组件。。。忘了嘻嘻老师可以忽略这个回答如下如下希望老师解答

收起回答

提问者慕神6715844 #1

。。。。模糊的视频加载成容器了//嘻嘻都是错误嘿嘿

2018-10-12 00:04:36

提问者慕神6715844 2018-10-12 00:00:24

<!DOCTYPE html>
<html>
<head>
<title>Video练习</title>
<meta charset="utf-8"/>
<link rel="icon" href="figure/video.png" type="image/png"/>
<link href="css/css.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="js/3.3.1.js"></script>
<script type="text/javascript" src="js/js.js" async="async"></script>
</head>
<body>
<!-- 头部 -->
<header class="header"></header>
<!-- 多媒体 -->
<section id="video">

<!-- 视频容器 -->
<figure class="video">

<!-- 标题 -->
<figcaption class="figcaption">激励一下</figcaption>

<!-- 播放视频 -->
<video src="figure/1.mp4" controls>
<!-- <source src="figure/1.mp4" type="video/mp4"/>
<source src="figure/1.webm" type="video/webm"/>
<source src="figure/1.ogv" type="video/ogv"/> -->
</video>

<!-- 控制栏 -->
<div class="bottom">

<!-- 进度条 -->
<div class="progress">

<!-- 当前进度 -->
<p id="progress"></p>

<!-- 缓存显示 -->
<p id="buffered"></p>

</div>
<!-- 控制器 -->
<div class="controls">

<!-- 播放/暂停 -->
<div class="play">

<!-- 播放 -->
<p id="play"></p>

<!-- 加速 -->
<p id="accelerate"></p>

<!-- 视频时间 -->
<p id="timeupdate">
<span>00:00</span>
<span> \/ </span>
<span>00:00</span>
</p>

</div>
<!-- 音量 -->
<div class="volume">

<!-- 声音LOGO -->
<p id="volume"></p>

<!-- 音量框 -->
<p id="volume_progress"></p>

</div>
</div>
</div>
</figure>
</section>

<!-- 页面尾巴 -->
<footer class="footer"></footer>
</body>
</html>

/* 你懂的 */
*{
	margin:0;
	padding:0;
}

/* 顶\/尾 */
.header,
.footer {
	height:60px;
	background:#abcdef;
	margin:10px;
}

/* 多媒体 */
#video {
	width:100%;
	height:auto;
}

/* 视频容器 */
#video > .video {
	width:770px;
	height:580px;
	margin:0 auto;
	overflow:hidden;
	position:relative;
}

/* 标题\/控制栏 */
#video > .video > .figcaption,
#video > .video > .bottom {
	width:100%;
	height:39px;
	background:#fff;
	position:absolute;
	opacity:0.5;
}
#video > .video > .figcaption {
	top:0;
	left:0;
}
#video > .video > .bottom {
	bottom:0;
	left:0;
}

/* 播放视频 */
#video > .video > video {
	
}

function fun_video(){

	// 视频容器
	var video = $('.video'),
	// 当前视频
		current_video = $('video');

	// 视频加载成功调用函数
	video[0].onloadedmetadata = lodaedmetadate(video,current_video);

}
// 视频加载成功函数
function lodaedmetadate(video,current_video){
	current_video.height(video.height());
	current_video.width(video.width());
}
fun_video();

老师当只设置宽时视频会宽度和父级一样，但是设置高时，就上下空白缩小居中了但是大小确实变成了父级高宽，

一样只设置高不设置宽也可以实现父级高度的视频但是宽度且超出了很多，老师的意思是如何让无论播放什么视频都按我设置的父级高宽显示，

我想所有视频上下不会有空白如何实现，希望老师可以认真理解后在解答。我比较笨不太会表示，

希望老师脑补我的意识//就是让这个黑屏覆盖住figcaption和控制栏这就是我想要的视频高宽和父级一样大小无论内容视频更换什么。宽和高不变！

收起回答

好帮手慕星星 #1

可以在video标签的css样式中添加上object-fit:fill；属性，使视频充满真个父元素，包括figcaption和控制栏。自己测试下。

2018-10-12 09:54:47
提问者慕神6715844 回复好帮手慕星星 #2

奥，老师这是cs3的样式吗

2018-10-12 10:41:35
好帮手慕星星回复提问者慕神6715844 #3

是css3中的样式呢。

2018-10-12 10:49:56