javascriptでフルスクリーンモードでdivを作成する

Question

フルスクリーンモードで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

$（ "＃video-id"）のようなjQueryセレクタによって返されるものとdocument.getElementById（ "video-id"）によって返されるものは同じではありません。ほとんどの場合、$（ "＃video-id"）[0]や$（ "＃video-id"）。get（0）を使用すると、javascriptと同等のものが得られます。あなたのコードが機能していないのはこのためです。

Answer 2

動画を含むdivでフルスクリーンをテストしているようですが、動画自体は表示されません。 2番目の例のようにvar i = $('#video').get(0);を試してみてください。