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

Question

I have 2 video tags. How can I show a single full-screen mode containing both videos (for example, a video chat, where I want to see my own camera, and my friend's at the same time)?

Answer 1

Answer

I don't think there is a way to use the fullscreen mode like you want to do right now.

Solution

You can make an element go fullscreen such as a container that wraps the two videos . Supported in Chrome 15, Firefox 10, Safari 5.1, IE 10.

MDN reference to the fullscreen API

Other solution

You could fill the browser you your two video with something like

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

and somewhere have a little message saying "Put your browser in fullscreen for better experience" or have a button that toggle an almost fullscreen mode like this.

<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> 

Code taken from that Stack Overflow answer