I was on youtube recently when I clicked the fullscreen button by the youtube video and a message appeared at the top of the screen saying that I was put into full-screen mode. This message was the native message you get when pressing f-11 on your keyboard. I also read something somewhere(that I now cannot find) saying that it's now possible to do this with Javascript.
Question
How would I put the users browser(Google Chrome) into fullscreen, on command? - without an extension they would need to download prior, or anything of that nature.
I'm using jQuery so that would be best, but I can't find how to do it at all.
EDIT: I've seen other questions of this nature, but they were asked a long time ago, and I believe this functionality is fairly new.
Here is good article: Native Fullscreen JavaScript API . It describes all three methods: webkit, firefox and W3-proposal.
// mozilla proposal
element.requestFullScreen();
document.cancelFullScreen();
// Webkit (works in Safari and Chrome Canary)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();
// Firefox (works in nightly)
element.mozRequestFullScreen();
document.mozCancelFullScreen();
// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();
Try these functions, they appear to be native:
void webkitRequestFullScreen();
void webkitRequestFullScreenWithKeys();
void webkitCancelFullScreen(); // only on Document
The API is still heavily in flux especially since the W3C joined in this week. I spent some time working through the differences to implement Full Screen in MediaElement.js HTML5 video player, and its working great in Safari 5.1+, Chrome 15+, or Firefox Nightly.
Related
I am creating a widget that I would like to go fullscreen once a button is clicked. I have implemented the fullscreen API and it works like a charm on all browsers. However, I am creating this widget to work as a interactive kiosk on iPads only. I have the freedom to use whatever browser that works best, but I can not get the fullscreen functionality to work on my iPad. Have tried multiple different options but to no suffice... I have the following code that works on normal desktop browsers:
var element = document.getElementById('element');
var fullscreenButton = document.getElementById('fullscreenButton');
fullscreenButton.addEventListener('click', function(){
if(element.requestFullscreen){
element.requestFullscreen();
}else if(element.webkitRequestFullscreen){
element.webkitRequestFullscreen();
}else if(element.mozRequestFullScreen){
element.mozRequestFullScreen();
}else if(element.msRequestFullscreen){
element.msRequestFullscreen();
} else{
element.webkitEnterFullscreen();
}
});
Is there any way possible for me to create an application (which is basically a slideshow) to enter fullscreen on iPads, in any way possible? Thanks in advance for all tips/help.
It seems that Safari for IOS does not support Full screen: http://caniuse.com/#search=full%20screen
As far as I know Chrome for IOS is based on Safari so, if Safari doesn't support Full screen, Chrome will not support it.
Check this link for more details (they suggest some solutions, but not very good): https://forum.playcanvas.com/t/struggling-to-run-in-full-screen-mode-ios-chrome/2008
Since the release of Safari 10 the method getUserMedia() has stopped working in order to access the video camera from the browser. I haven't found any alternative apart from Flash, but also Flash is deactivated by default in Safari 10 which makes it a bad solution.
Have you found a fix for this issue?
You can try the standard html getUserMedia from the demos section of this website and test how in Safari stops working https://webrtc.github.io/samples/
Thanks.
I want to know if it´s possible to use any fullscreen API to display a SCORM course in fullscreen in Moodle LMS?
I use the native HTML5 fullscreen. The fullscreen will work when I start the course outside of Moodle, but in Moodle it won't work.
Did anybody know my problem and maybe have a solution?
Greetz
I imagine that the issue you're experiencing is because with SCORM content has to open either in a pop-up or a frame. Presumably you've tried both of these and neither support full screen. The requirement to use a frame or pop-up is a limitation of SCORM so strict the answer to the question: "How can I go full screen with SCORM content?" is "You can't".
There are, however, two ways I can think of to work around this limitation:
Have Moodle's SCORM player go full screen. With this option, you customise the Moodle player itself to go full screen and then put your SCORM content within an iframe on that full screen view.
Use an alternative tracking standard such as Tin Can API that supports launching in the same or a new window rather than a frame/pop-up. You can get a Tin Can plugin for Moodle and a free LRS account for testing. There are a number of other advantages to using Tin Can API instead of SCORM.
Here's the code I use for launching an iframe into full screen.
$('#ifrm') is the selector for the iframe itself. You then set up an onclick handler to watch for a click on your full screen button or however you prefer to launch it. The else block is a fallback for IE 10 and under.
function launchFullScreen(element) {
if (element.requestFullScreen) {
element.requestFullScreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.webkitRequestFullScreen) {
element.webkitRequestFullScreen();
} else if (element.msRequestFullscreen) { // IE 11 API
element.msRequestFullscreen();
} else {
$source = $('#ifrm').attr('src');
window.open($source, "", "fullscreen=no, resizable=1,toolbar=1,titlebar=yes"); // IE 10 and under workaround
console.log("Fullscreen API is not supported");
}
}
Is it possible to force window to switch between normal and full-screen mode by JavaScript (no jQuery)..?
I know how to open a new window in full-screen, but that is not what I need.
There's now a proper fullscreen API (first proposed by Mozilla and later released as a W3C proposal) has been implemented by Webkit (Safari 5.1+/Chrome 15+) and Firefox (10+). A brief history and usage examples here. Note that IE10 will allegedly not support the API.
You could try the experimental FullScreen API.
Using full-screen mode on MDN
W3c Fullscreen Living Spec
Browser Support
If you are not satisfied with the browser support, there is one more option: display a message to the user about how F11 switches to Fullscreen mode. Used this as a fallback option in a recent webapp I worked on, and the feedback was satisfactory.
I am setting up a Flash based MP3 player control (The standalone version of WordPress Standalone Player). I have a situation of multiple windows with players open. One window opens the other, so I have the window.opener property available.
When the child window is opened, I want to programmatically mute the audio player in the parent window.
This works in Firefox, but not in IE 7 and 8. I know little about Flash/Javascript interaction and I'm stuck. I am not getting any error messages.
To do this, the player SWF object has a setVolume() and close() function. These functions are not defined anywhere in Javascript so I guess that those are provided by the Flash object. This is supported by the following lines I found in the Flash source code of the player:
if (ExternalInterface.available) {
ExternalInterface.addCallback("load", Application, Application.ei_loadFile);
ExternalInterface.addCallback("close", Application, Application.ei_closePlayer);
ExternalInterface.addCallback("open", Application, Application.ei_openPlayer);
ExternalInterface.addCallback("setVolume", Application, Application.ei_setVolume);
In Firefox, this works:
if (typeof(AudioPlayer) != "undefined")
var player = AudioPlayer.getPlayer("audioplayer_1"); // This shows up as
// the player SWF object
// in Firebug
if (player)
if (typeof(player.setVolume) == "function")
player.close(); // This works in FF but not in IE
but in IE, it doesn't. Is this because the callback is not available in IE? Or is there anything I need to do in addition?
If it works in FF but not IE, then the issue is likely in the JavaScript code. ExternalInterface is pretty reliable (99% of the failures I encounter are a result of JavaScript issues, not ActionScript issues). Is window.opener supported in IE? Have you tested your JavaScript in a page without the Flash stuff to make sure the code works?
edit: how do I post this as a comment and not an answer??
edit edit: nvm, I am not cool enough yet to comment.