全元素视频全屏答案

【问题标题】：All elements video full screen全元素视频全屏
【发布时间】：2016-01-20 21:39:15
【问题描述】：

我有这个视频列表：

<video class="filme" preload="auto" src="public/videos/video.mp4" style="display: none;"></video>
<video class="filme" preload="auto" src="public/videos/video.mp4" style="display: none;"></video>
<video class="filme" preload="auto" src="public/videos/video.mp4" style="display: none;"></video>

当我点击这个按钮时：

<button id="full-screen">Full-Screen</button>

我希望所有视频都保持全屏显示。有可能吗？

【问题讨论】：

嗯？所有视频同时全屏显示？无论如何，你不能用javascript做全屏。你能做的最好的就是全尺寸的浏览器。
@Pamblam You can do fullscreen now 但你是对的。同时全屏显示所有视频没有意义。
是必要的，因为当一个视频结束时，下一个开始，所以所有视频都需要全屏显示。
kewl！在上面迈克的链接上找到了这个链接。它有您需要的代码，但仍然可以同时播放所有视频，不确定这是否可行。您可能必须等到视频完成后再全屏播放下一个.. developer.mozilla.org/en-US/docs/Web/API/Fullscreen_API
@Pamblam 这是 2016 年，网络上所有主要的视频播放器已经使用 Fullscreen API 有一段时间了；)

标签： javascript arrays video html5-video fullscreen

【解决方案1】：

解决办法是：

var state = document.fullScreen || document.mozFullScreen || document.webkitIsFullScreen;
var isFull = state ? 'FullscreenOn' : 'FullscreenOff';

if(isFull == 'FullscreenOn' ){

    var oldVideo = currentVideo-1;

    if ($("video")[oldVideo].exitFullscreen) {
        $("video")[oldVideo].exitFullscreen();
    } else if ($("video")[oldVideo].mozExitFullScreen) {
        $("video")[oldVideo].mozExitFullScreen(); // Firefox
    } else if ($("video")[oldVideo].webkitExitFullscreen) {
        $("video")[oldVideo].webkitExitFullscreen(); // Chrome and Safari
    }

    if ($("video")[currentVideo].requestFullscreen) {
        $("video")[currentVideo].requestFullscreen();
    } else if ($("video")[currentVideo].mozRequestFullScreen) {
        $("video")[currentVideo].mozRequestFullScreen(); // Firefox
    } else if ($("video")[currentVideo].webkitRequestFullscreen) {
        $("video")[currentVideo].webkitRequestFullscreen(); // Chrome and Safari
    }    
}

【讨论】：