css - 全屏 : how to manipulate the screen size? 中的 HTML5 视频

标签 css html video fullscreen

在我的网站上,我有一个 <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/

相关文章:

html - 用省略号垂直对齐 div 内的文本

javascript - 强制换行时 Flexbox 会全宽吗?

javascript - 文件 API : What browsers support the slice method?

javascript - 双击选择整个字符串

html - 为什么 bottom: 0 不足以 move::after content 直接在主要内容下面?

c# - 如何使用 C# 获取 .mp4 视频的直接 URL?

c++ - OpenCV - VideoWriter 生成带有 "repeated"图像的视频

css - Script.aculo.us/CakePHP 自动完成结果列表的滚动问题

css - bootstrap 3.0 列在移动 View 中推到底部

jquery - HTML5 视频可以触发 jQuery 函数 ontimeupdate 吗?