Question

我有这个视频列表：

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

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

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

所有元素视频全屏

1 个答案: