Question

我在div中有一个视频

当我使用此代码展开视频时

 if (video.requestFullScreen) {
      video.requestFullScreen();
 } else if (video.mozRequestFullScreen) {
      video.mozRequestFullScreen();
 } else if (video.webkitRequestFullScreen) {
      video.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
 } else if (video.msRequestFullscreen) {
      video.msRequestFullscreen();
 }

视频会扩展到浏览器的宽度和高度，而不是将整个Chrome窗口扩展为全屏尺寸。

更新：这只发生在我的浏览器上！代码中没有问题

Answer 1

使用vh和vw。

video {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: 100vw;
}

1vh占总端口视图高度的1％，1vw是总端口视图宽度的1％。默认情况下，html和body标签仅占用内容的高度，而不是整个屏幕。同样，具有多个屏幕内容的页面将具有100％的空间而不是100vh。

position: fixed;以获得良好的衡量标准，使其位于角落内的其他内容之上，并使其更贴合。

编辑：将“绝对”更改为“已修复”，以便在长页面或宽页面上正确显示。 fixed相对于浏览器，而absolute相对于父容器。

编辑2：您已将问题更改为询问如何制作全屏视频，而不是整页视频。答案随后改变了。

以下是完成此操作的指南;请注意它使用JS并要求用户批准该操作。你不能劫持用户的浏览器 http://www.sitepoint.com/use-html5-full-screen-api/

使用全屏API制作全屏视频

1 个答案: