如何在单个 HTML5 全屏模式下显示 2 个视频答案

【问题标题】：How to show 2 videos in single HTML5 Full-screen mode如何在单个 HTML5 全屏模式下显示 2 个视频
【发布时间】：2015-11-17 19:10:49
【问题描述】：

我有 2 个视频标签。如何显示包含两个视频的单个全屏模式（例如，视频聊天，我想同时看到自己的相机和朋友的相机）？

【问题讨论】：

标签： javascript html html5-video fullscreen html5-fullscreen

【解决方案1】：

回答

我认为没有办法像您现在想要的那样使用全屏模式。

解决方案

您可以使元素全屏显示，例如包装两个视频的容器。在 Chrome 15、Firefox 10、Safari 5.1、IE 10 中受支持。

MDN reference to the fullscreen API

其他解决方案

您可以在浏览器中填充两个视频，例如

#video1, #video2 {
    width: 50%;
    height: 100vh;
    float:left;
}

在某处有一条小消息说“将您的浏览器设置为全屏以获得更好的体验”或者有一个按钮可以像这样切换几乎全屏模式。

<script type="text/javascript">
    window.onload = maxWindow;

    function maxWindow() {
        window.moveTo(0, 0);


        if (document.all) {
            top.window.resizeTo(screen.availWidth, screen.availHeight);
        }

        else if (document.layers || document.getElementById) {
            if (top.window.outerHeight < screen.availHeight || top.window.outerWidth < screen.availWidth) {
                top.window.outerHeight = screen.availHeight;
                top.window.outerWidth = screen.availWidth;
            }
        }
    }

</script>

取自Stack Overflow answer的代码

【讨论】：