使用全屏API制作视频全屏

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();
 }

视频扩展到浏览器的宽度和高度，而不是将整个铬窗口扩展到全屏幕大小。。

UPDATE：这只发生在我的浏览器上！代码中没有任何问题。

Answer 1

使用vh和vw。

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

1vh是整个portview高度的1%，1vw是整个portview宽度的1%。默认情况下，html和body标记只占据内容的高度，而不是整个屏幕的高度。同样，一个有超过一个屏幕的内容的页面将有100%的空间超过100 of。

position: fixed;用于良好的测量，使其位于角落中其他内容的上方，并使其适合。

编辑:将“绝对”改为“固定”，这样它将正确地适合于一个长或宽的页面。fixed相对于浏览器，而absolute相对于父容器。

编辑2:你改变了你的问题，问如何制作一个全屏幕的视频，而不是全页。答案随后发生变化。

以下是完成此操作的指南；请注意，它使用JS，并需要用户对操作的批准。您不能劫持用户的浏览器。

http://www.sitepoint.com/use-html5-full-screen-api/