在我的网站上,我有一个 <video>
<div>
中的元素.我用这个<div>
定义视频宽高比,并在必要时让用户更改它(有时编码视频的宽高比不正确)。 <video>
总是填充 <div>
与 "object-fit: fill;"
CSS 属性。
但是...当用户进入全屏模式时,屏幕就变成了容器。这是一个问题,因为那里有各种不同的显示比例。
有没有办法控制/限制全屏大小?
<div style="width: 960px; height: 540px; background: #bfbfbf; display: block; margin: 0 auto;">
<video style="object-fit: fill;">
<source src="" />
</video>
</div>
最佳答案
添加“控件”以激活视频的控件
<html>
<head>
<style>
.div
{
background-color: #bfbfbf;
width: 960px;
height: 540px;
display: block;
margin: 0 auto;
background-size: cover;
}
</style>
</head>
<body>
<div class="div">
<video style="object-fit: fill; width: 960px; height: 540px;" controls>
<source src="video.mp4" type="video/mp4">
</video>
</div>
</body>
</html>
关于css - 全屏 : how to manipulate the screen size? 中的 HTML5 视频,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48582234/