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)?
I don't think there is a way to use the fullscreen mode like you want to do right now.
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
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.