javascript - 更改全屏 html5 视频的尺寸

Question

有没有办法修改视频的全屏功能在浏览器中的行为方式？我想在屏幕左侧显示视频，在右侧显示图像(实际上是 PDF)。

我已经在 chrome 中用 css 试过了:

video:-webkit-full-screen

这给了我一些结果，但不是我想要的结果。我应该为此创建自定义操作吗？如果是这样，我怎样才能让视频突破浏览器的边界？

Answer 1

您应该插入 <video> <div> 内的标签具有定义的 height和 width具有以下属性:

.video-container {
   position: relative;
   height: auto;
   width: 60%;
}

video {
   width: 100%; 
   max-width: 500px; // Or whatever value on your choice
   height: auto;
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
}

用width 100%，视频将填满整个浏览器空间，但通过设置 max-width 来限制它的大小。或 max-height对于分辨率和响应能力。希望我的回答对您有所帮助!

编辑

正确地放入 div 中，你必须分配给容器 position: relative和 position: absolute到视频本身。如果你想突破边界，那么你必须调整 max-height 的尺寸。和 max-width的视频。

检查这个question ，因为它与您的相似。