rafgraph / fscreen Goto Github PK
View Code? Open in Web Editor NEWVendor agnostic access to the Fullscreen API
Home Page: https://fscreen.rafgraph.dev
License: MIT License
Vendor agnostic access to the Fullscreen API
Home Page: https://fscreen.rafgraph.dev
License: MIT License
I'm trying to reference this on an HTML page, where I'm using javascript and jQuery. The .js file doesn't seem to be syntactically correct Javascript, so I must be missing something. In particular the export and import statements fail when I add them to my js code...
Thanks for the help
I'm having issues using this in Safari.
Upon analysis it seems the CSS styles are not getting applied to the full screen elements like they do in other browsers.
i.e. in chrome when I go full screen with an element, the element get's this style applied:
:not(:root):fullscreen {
object-fit: contain;
position: fixed !important;
top: 0px !important;
right: 0px !important;
bottom: 0px !important;
left: 0px !important;
box-sizing: border-box !important;
min-width: 0px !important;
max-width: none !important;
min-height: 0px !important;
max-height: none !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
margin: 0px !important;
}
On Safari the element doesn't get the above styles and therefore the div isn't properly positioned on the screen, although browser does go full screen. Any suggestions for fixing, working around this?
EDIT: fixed by applying the same style to the :-webkit-full-screen pseudoelement.
I.e. I added the following to my stylesheet:
:not(:root):-webkit-full-screen {
object-fit: contain;
position: fixed !important;
top: 0px !important;
right: 0px !important;
bottom: 0px !important;
left: 0px !important;
box-sizing: border-box !important;
min-width: 0px !important;
max-width: none !important;
min-height: 0px !important;
max-height: none !important;
width: 100% !important;
height: 100% !important;
transform: none !important;
margin: 0px !important;
}
iOS version 10.3.3
Safari version 10.0
As soon as I click the fullscreen button, I get this error:
TypeError: element[vendor[key.requestFullscreen]] is not a function. (In 'element[vendor[key.requestFullscreen]]()', 'element[vendor[key.requestFullscreen]]' is undefined)
This is my code, I don't believe there's something wrong with it:
requestFullScreen = () => {
fscreen.requestFullscreen(this.videoRef); // this.videoRef is a reference to the video element
}
Excellent library, thanks.
The Fullscreen API also supports fullscreenchange event directly on an Element (not just on the Document), it would be great to add this to fscreen, as I believe that is currently missing.
Hey, thanks for putting this package together.
I've experienced an issue Safari Desktop 12.4
and 13.1
where I get a black screen when applying the fullscreen on a div
element. The element has a video
and other elements nested.
Pressing Esc
will exit fullscreen and return the element to normal.
Any thoughts on why this might be happening? The supported browsers list suggests that these would supported at least partially, maybe there's something I'm missing?
The same element worked with no issues on Firefox 76 and Chrome 81.
#hello.
I want my website to trigger full screen mode after a screen orientation change.
But, it says that it requires user gesture.
can you please let me know how to trigger full screen when a device orientation change?
thank you.
We are using fscreen as our cross-browser solution to make our react app go fullscreen. Its been working very well for us so far but we are running into one browser where it doesn't work, iOS (iPad) Chrome.
We are successfully using it in Chrome, Safari, and Firefox on macOS and Windows. It also works in iOS (ipad) Safari. However, nothing happens when we request fullscreen in Chrome on iOS (ipad).
I haven't come across any documentation as to whether it should be possible to go into fullscreen in Chrome iOS on an iPad. Does anyone know if fscreen is expected to work in Chrome iOS?
For example when I use chrome in android and load https://mdn.mozillademos.org/en-US/docs/Web/CSS/:fullscreen$samples/Example?revision=1312011 I am able to zoom without full screen but not in full screen.
Not a problem with fscreen to full screen api itself
I've used fscreen
in a Svelte component to wrap content (e.g., <img />
) so that a user can zoom in and out of full screen. I've added a YouTube video to the page (via an iFrame, with allowfullscreen
, not wrapped by my component) but once the video has entered and exited full screen mode, the images can no longer be zoomed to full screen, i.e., requestFullscreen()
does nothing.
Is there anything that I need to do to make this work?
This module knows when it can't request or use fullscreen - when vendor is []
, but it doesn't expose that value anywhere that a consumer can use. It'd be excellent to expose fullscreen availability.
Hello,
as I red on the docs, "your function may vary", depending on the browser version.
I've got a couple different Samsung SmartTV, on which I'd like to have fullscreen for videos: I've got mixed results and found little docs about these browsers, so I'm sharing my findings.
With the script below, I was able to make it work on the older model (F5500), while it doesn't on the newer (ES6710), while the sample page of fscreen couldn't get none of the two on fullscreen.
I'm attaching relevant screenshots, any plan to support such browsers?
`
function setupPlayer(fullScrBtn) {
var isFullscreenAvailable = document.fullscreenEnabled
|| document.mozFullScreenEnabled || document.webkitFullscreenEnabled
|| document.msFullscreenEnabled || false;
if (isFullscreenAvailable) {
var myEvent = function(e) {
var fullscreenElement = document.fullscreenElement
|| document.mozFullScreenElement
|| document.webkitFullscreenElement
|| document.msFullscreenElement;
if (fullscreenElement) {
// we are now on fullscreen
} else {
// we have exit fullscreen mode
}
};
// add event listeners
// W3C standard
document.addEventListener('fullscreenchange', myEvent, false);
// Firefox 10+, Firefox for Android
document.addEventListener('mozfullscreenchange', myEvent, false);
// Chrome 15+, Safari 5.1+, Opera 15+, Chrome for Android, Opera Mobile
// 16+
document.addEventListener('webkitfullscreenchange', myEvent, false);
// IE 11+
document.addEventListener('MSFullscreenChange', myEvent, false);
// enable button
// alert(fullScrBtn.disabled);
fullScrBtn.disabled = false;
// alert(fullScrBtn.disabled);
}
}
function requestFullScreen(element) {
var el = element || document.documentElement;
var fullscreenElement = document.fullscreenElement
|| document.mozFullScreenElement
|| document.webkitFullscreenElement || document.msFullscreenElement;
if (fullscreenElement) {
if (document.exitFullscreen) {
// W3C standard
document.exitFullscreen();
} else if (document.mozCancelFullScreen) {
// Firefox 10+, Firefox for Android
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
// Chrome 20+, Safari 6+, Opera 15+, Chrome for Android, Opera
// Mobile 16+
document.webkitExitFullscreen();
} else if (document.webkitCancelFullScreen) {
// Chrome 15+, Safari 5.1+
document.webkitCancelFullScreen();
} else if (document.msExitFullscreen) {
// IE 11+
document.msExitFullscreen();
}
} else {
if (el.requestFullscreen) {
// W3C standard
el.requestFullscreen();
} else if (el.mozRequestFullScreen) {
// Firefox 10+, Firefox for Android
el.mozRequestFullScreen();
} else if (el.msRequestFullscreen) {
// IE 11+
el.msRequestFullscreen();
} else if (el.webkitRequestFullscreen) {
if (navigator.userAgent.indexOf('Safari') != -1
&& navigator.userAgent.indexOf('Chrome') == -1) {
// Safari 6+
el.webkitRequestFullscreen();
} else {
// Chrome 20+, Opera 15+, Chrome for Android, Opera Mobile 16+
el.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else if (el.webkitRequestFullScreen) {
if (navigator.userAgent.indexOf('Safari') != -1
&& navigator.userAgent.indexOf('Chrome') == -1) {
// Safari 5.1+
el.webkitRequestFullScreen();
} else {
// Chrome 15+
el.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
}
}
}
}
...
`
ue46es6710 - 1 - tv tag
ue46es6710 - 2 - browser name
ue46es6710 - 3 - support prefixed
ue46es6710 - 4 - fscreen failing
ue46es6710 - 5 - fullscreen disabled
ue46f5500 - 1- tv tag
ue46f5500 - 2 - browser name
ue46f5500 - 3 - support prefixed
ue46f5500 - 4 - fscreen failing
ue46f5500 - 5 - fullscreen enabled
ue46f5500 - 6 - fullscreen working
...to match the spec. Thanks!
Full screen state isn't detected on Chrome and Firefox when entering full screen mode by using a menu UI.
This isn't actually a bug in fscreen -- seems to be an issue in the browsers.
In Chrome on a Mac you can toggle full screen in the view menu or use ctrl-command-F.
In Chrome on Windows select the rectangle at the right-hand edge of the Zoom menu option.
http://fscreen.rafrex.com/ doesn't detect this change. It's also not reflected in:
document.webkitFullscreenElement => null
It seems some event should be thrown when this happens -- but I can't find any doc describing this alternate path to full screen.
hello!
I develop a React app with material-ui. The material-ui dialog does not appear in fullscreen mode when using fscreen. When I don't use fscreen to switch to fullscreen mode, the dialog open
Hello, and thanks for the library
On safari (15.3) on macos (11.6.4), and possibly on ios too, Enabling and disabling fullscreen triggers a "visibilitychange" event. It doesn't on Chrome and Firefox.
I guess it's just a different behavior between vendors, even out of fscreen (I didn't test ๐
).
In all case, should fscreen be (and could it be) consistent between vendors?
Thanks
Following the example app and found that on both Safari & Chrome iOS, fscreen.fullscreenEnabled
is always false. The native API responds false as well so I don't think it's this package, any ideas on why this is? I am using a local HTTPS react server
this is a very useful library. Yet I noticed that in Android Chrome it fails to hide the navigation bar. In order to do that, navigationUI: 'hide' option needs to be provided to requestFullscreen(), but it is not possible to pass through fscreen.
More information on options here
not sure if its possible to prevent this but on interaction with an input element inside a fullscreen container it exits fullscreen because the keyboard has to be brought up. is there an implementation of this not happening or being prevented?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.