[英]Make a div in full screen mode in javascript
I need to make a div in full screen mode. 我需要在全屏模式下创建一个div。
In this div I have a video
and the custom controls. 在这个div中,我有一个video
和自定义控件。
so I want when user click FS
video and custom controls goes into full screen mode. 所以我想当用户单击FS
视频时,自定义控件进入全屏模式。
Here is code which I use. 这是我使用的代码。
<div id="custom-video">
<video id="video" src="path/to/src"></video>
<button onclick="fsMode()">FS</button>
</div>
Here is javascript code. 这是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');
}
}
When I try this code output is Not available
. 当我尝试此代码输出Not available
。
But I try same code in that way and its work, it mean browser support fullscreenMode
, but why this is not for above code. 但是我以这种方式及其工作方式尝试相同的代码,这意味着浏览器支持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
}
Any suggestion ? 有什么建议吗?
Thanks... 谢谢...
Seems like you are testing the fullscreen on the div containing the video and not the video itself. 似乎您正在测试包含视频而不是视频本身的div上的全屏。 Try var i = $('#video').get(0);
尝试var i = $('#video').get(0);
like in the second example and see it it works. 就像在第二个示例中一样,并看到它的工作原理。
what is returned by jQuery selectors like $("#video-id") and what is returned by document.getElementById("video-id") are not same. jQuery选择器(如$(“#video-id”))返回的内容与document.getElementById(“ video-id”)返回的内容不同。 In most cases, you can use $("#video-id")[0] or $("#video-id").get(0) to get the javascript equivalent, which is what we need in this case. 在大多数情况下,您可以使用$(“#video-id”)[0]或$(“#video-id”)。get(0)获取javascript等效项,在这种情况下,我们需要这样做。 That's why your code is not working. 这就是为什么您的代码无法正常工作的原因。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.