Question

我需要在全屏模式下制作div 在这个div中，我有一个* { margin: 0; padding: 0 } body { font-family: Tahoma, sans-serif; font-size: 12px; font-style: normal; font-weight: normal } .big_word { font-size: 1.5rem; border: 1px solid lightgray } .nav { display: block; background-color: #1d3644; min-height: 39px } .nav ul { list-style: none } .nav ul li { display: block; float: left } .nav::after { content: ''; display: block; clear: both } .nav ul li::after { content: ' '; height: 25px; display: block; float: left; width: 1px; border-right: 1px solid gray; margin: -27px 0 0 100%; } .nav ul li div.menu_item { color: #b6d9ec; font-size: 17px; text-align: center; line-height: 1.7rem; height: 29px; padding: 0 15px; margin: 5px 2px 0 5px; /*border: 1px solid #587e93;*/ } .nav ul li div.menu_item:hover { background-color: #59a8d0; border-bottom-left-radius: 3px; border-top-right-radius: 3px; color: #381b51 } section { height: 400px; background-color: #587e93 }和自定义控件所以当用户点击video视频和自定义控件进入全屏模式时，我想要这是我使用的代码。

FS

这是javascript代码。

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

当我尝试此代码时，输出为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

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

Answer 1

好像你正在测试包含视频的div的全屏而不是视频本身。尝试var i = $('#video').get(0);，就像在第二个例子中一样，看它是否有效。

Answer 2

jQuery选择器返回的内容如$（＆＃34;＃video-id＆＃34;）以及document.getElementById（＆＃34; video-id＆＃34;）返回的内容不相同。在大多数情况下，您可以使用$（＆＃34;＃video-id＆＃34;）[0]或$（＆＃34;＃video-id＆＃34;）。get（0）来获取等效的javascript，这就是我们在这种情况下所需要的。这就是您的代码无效的原因。

在javascript中以全屏模式制作div

2 个答案: