javascript - 在javascript中以全屏模式制作一个div

Question

我需要在全屏模式下制作一个div。
在这个 div 中，我有一个 video 和自定义控件。
所以我希望当用户单击 FS 视频时，自定义控件会进入全屏模式。
这是我使用的代码。

<div id="custom-video">
    <video id="video" src="path/to/src"></video>
    <button onclick="fsMode()">FS</button>
</div>

这是javascript代码。

function fsMode(){
    var i = $('#custom-video');
    if (i.requestFullscreen) {
        console.log('1');   
        i.requestFullscreen();
    } else if (i.webkitRequestFullscreen) {
        console.log('2');
        i.webkitRequestFullscreen();
    } else if (i.mozRequestFullScreen) {
        console.log('3');
        i.mozRequestFullScreen();
    } else if (i.msRequestFullscreen) {
        console.log('4');
        i.msRequestFullscreen();
    }else{
        console.log('Not available');
    }
}

当我尝试此代码时，输​​出是 Not available。
但我以这种方式尝试了相同的代码及其工作，这意味着浏览器支持 fullscreenMode，但为什么这不适用于上面的代码。

// this code is working but I don't want to use it because 
// custom controls will not show in fullscreen mode 
var video = $('#video').get(0);
if (video.requestFullscreen) {
    video.requestFullscreen();
} else if (video.mozRequestFullScreen) {
    video.mozRequestFullScreen(); // Firefox
} else if (video.webkitRequestFullscreen) {
    video.webkitRequestFullscreen(); // Chrome and Safari
}

有什么建议吗？
谢谢...

Answer 1

jQuery 选择器如 $("#video-id") 返回的内容与 document.getElementById("video-id") 返回的内容不同。在大多数情况下，您可以使用 $("#video-id")[0] 或 $("#video-id").get(0) 来获取等效的 javascript，这正是我们在这种情况下所需要的。这就是您的代码无法正常工作的原因。