使用全屏制作视频全屏 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();
 }

视频会扩展到浏览器的宽度和高度，而不是将整个 chrome window 扩展到全屏大小。

UPDATE : This was only happening with my browser ! There was no issue in the code

Answer 1

使用vh和vw。

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

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

position: fixed; 采取适当的措施，使其位于角落中其余内容的上方并紧密贴合。

编辑：已将 "absolute" 更改为 "fixed"，因此它可以正确地适合长页或宽页。 fixed 是相对于浏览器的，而 absolute 是相对于父容器的。

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

这是完成此操作的指南；请注意它使用 JS 并需要用户批准该操作。您无法劫持用户的浏览器。
http://www.sitepoint.com/use-html5-full-screen-api/

使用全屏制作视频全屏 API

making a video full screen using full screen API

javascript

css

google-chrome

fullscreen