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

Question

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

Answer 1

答案

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

解决方案

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

MDN参考全屏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> 

从堆栈溢出应答中获取的代码