使用全屏制作视频全屏 API
making a video full screen using full screen API
我在 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
使用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/
我在 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
使用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/