使用全屏API制作视频全屏

making a video full screen using full screen API

本文关键字：视频 API      更新时间：2023-09-26

我在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窗口扩展到全屏大小

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

使用vh和vw。

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

1vh是总的左视图高度的1%，1vw是总的右视图宽度的1%。默认情况下，html和body标记只占据内容的高度，而不是整个屏幕。类似地，一个包含多个屏幕内容的页面的空间将比100vh大100%。

position: fixed;是一个很好的度量，使其位于角落中其他内容的上方，并使其紧贴。

编辑：将"绝对"更改为"固定"，这样它就可以正确地放在长页面或宽页面上。fixed相对于浏览器，而absolute相对于父容器。

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

以下是实现这一目标的指南；请注意，它使用JS，并且需要用户对操作的批准。你不能劫持用户的浏览器
http://www.sitepoint.com/use-html5-full-screen-api/

相关文章：