如何在單個HTML5全屏模式下顯示2個視頻

Question

我有2個視頻標簽。 如何顯示包含兩個視頻的單個全屏模式（例如，視頻聊天，我想同時看到自己的相機和朋友的相機）？

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> 

從該堆棧溢出答案中獲取的代碼