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");
}
}
Related
I am looking for a trick to put my website in fullscreen mode without human interaction.
I've found some examples using HTML5's techniques, but all of then needs to be triggered by a human interaction.
This website will be displayed in a TV ...
I already think in load the website using a SWF file in fullscreen mode, but instead of going to this direction, I would like to stress all possibilities using just the default pattern (html, css and javascript)
You can't force a website to display in fullscreen mode.
Imagine the security concerns if that were possible.
Malicious websites could "Hijack" a less computer literate person's desktop for all kinds of dubious business.
All of JS fullscreen api's will throw a error like this:
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture."
If you try to simply call it from your code.
I'm pretty darn sure Flash is similar, in that it requires user interaction to go fullscreen. Otherwise, we'd have seen our fair share of fullscreen popups that are nearly impossible to close.
Other answers already describe how you can go fullscreen in a more or less browser-independent way.
However, problem of needing user interaction remains.
You cannot force your webpage to display in fullscreen mode for security reasons.
User interaction is required for that.
Also, browser leaves fullscreen mode whenever user goes to another page, even on the same website, and (s)he will have to perform some "user interaction" on every page to go back into fullscreen mode.
This is the reason why your website has to be a single page if you want it to be fullscreen.
That is what I suggest:
Use a single splash page that has a hidden iFrame on it.
Whenever user clicks anywhere or presses any key, just set this iFrame to be fullscreen and show it. When you receive an event on leaving fullscreen mode, hide iFrame again to show splash.
Links open in the same frame by default, so you will stay in fullscreen mode until user explicitly leaves it or some links opens in a new tab.
Here is an example that works in Chrome:
(See it in action. Use other answers to make it browser-independent.)
<html>
<head>
<script language="jscript">
function goFullscreen() {
// Must be called as a result of user interaction to work
mf = document.getElementById("main_frame");
mf.webkitRequestFullscreen();
mf.style.display="";
}
function fullscreenChanged() {
if (document.webkitFullscreenElement == null) {
mf = document.getElementById("main_frame");
mf.style.display="none";
}
}
document.onwebkitfullscreenchange = fullscreenChanged;
document.documentElement.onclick = goFullscreen;
document.onkeydown = goFullscreen;
</script>
</head>
<body style="margin:0">
<H1>Click anywhere or press any key to browse <u>Python documentation</u> in fullscreen.</H1>
<iframe id="main_frame" src="https://docs.python.org" style="width:100%;height:100%;border:none;display:none"></iframe>
</body>
</html>
Note, however, that websites often disallow embedding, e.g. being displayed inside an iframe. The example initially used W3Schools website instead of Python docs, but they set 'X-Frame-Options' header to 'sameorigin' (disallow cross-site embedding) and it stopped working.
P.S. I like the idea of simulating full-blown OS in browser, and it's even better in fullscreen! :) Change your OS!
Also, I am not a web developer. Just thought this question would be interesting to investigate.
You might be able to use requestFullScreen() methods as described at https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode.
Note : This still requires user input - but avoid usage of flash.
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
toggleFullScreen();
This allows the page to activate full screen, and could possibly be activated via page load on a javascript page. However, there is no support for older browsers.
When I needed to do something similar I used a splash screen. The button to continue into full screen mode requested it as an attribute of a JS pop:
onClick="window.open('pageName.html', 'test', 'fullscreen=yes')"
This is not fullproof, but worked better than any other methods I found. You likely won't be able to do this without user interaction, so using something like a splashscreen allows you to minimize the intrusion to something more commonly accepted.
This is not exactly what the OP was looking for, but in my particular situation, I found a combination of kiosk mode and some dynamic styling to work.
I was looking to start a browser with a particular URL and have it start in full screen mode. The use case is little to no user interaction on a terminal in a manufacturing plant with a status screen. Following power up, it needs to display only the status without interaction (i.e. display none of configuration UI elements unless the user interacts).
Perhaps, not realistic on a complex site, but my use was a particular "pane" (div in this case) element. To focus on the particular div, I hid the other divs, and set styles accordingly. If there happens to be user interaction to change from and to fullscreen, I (1) use the regular myElement.*requestFullScreen() document.*exitFullscreen() calls, (2) show/hide the other divs, and (3) switch between the classes below:
.right-pane-fullscreen
{
margin-left: 0px;
}
.right-pane-normal
{
margin-left: 225px;
}
Related discussion on how to use kiosk mode in Chrome (be aware that other Chrome processes running prior to launching kiosk mode can prevent this from working)
Opening Chrome browser in full window or kiosk mode on windows 7
I am looking for a trick to put my website in fullscreen mode without human interaction.
I've found some examples using HTML5's techniques, but all of then needs to be triggered by a human interaction.
This website will be displayed in a TV ...
I already think in load the website using a SWF file in fullscreen mode, but instead of going to this direction, I would like to stress all possibilities using just the default pattern (html, css and javascript)
You can't force a website to display in fullscreen mode.
Imagine the security concerns if that were possible.
Malicious websites could "Hijack" a less computer literate person's desktop for all kinds of dubious business.
All of JS fullscreen api's will throw a error like this:
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture."
If you try to simply call it from your code.
I'm pretty darn sure Flash is similar, in that it requires user interaction to go fullscreen. Otherwise, we'd have seen our fair share of fullscreen popups that are nearly impossible to close.
Other answers already describe how you can go fullscreen in a more or less browser-independent way.
However, problem of needing user interaction remains.
You cannot force your webpage to display in fullscreen mode for security reasons.
User interaction is required for that.
Also, browser leaves fullscreen mode whenever user goes to another page, even on the same website, and (s)he will have to perform some "user interaction" on every page to go back into fullscreen mode.
This is the reason why your website has to be a single page if you want it to be fullscreen.
That is what I suggest:
Use a single splash page that has a hidden iFrame on it.
Whenever user clicks anywhere or presses any key, just set this iFrame to be fullscreen and show it. When you receive an event on leaving fullscreen mode, hide iFrame again to show splash.
Links open in the same frame by default, so you will stay in fullscreen mode until user explicitly leaves it or some links opens in a new tab.
Here is an example that works in Chrome:
(See it in action. Use other answers to make it browser-independent.)
<html>
<head>
<script language="jscript">
function goFullscreen() {
// Must be called as a result of user interaction to work
mf = document.getElementById("main_frame");
mf.webkitRequestFullscreen();
mf.style.display="";
}
function fullscreenChanged() {
if (document.webkitFullscreenElement == null) {
mf = document.getElementById("main_frame");
mf.style.display="none";
}
}
document.onwebkitfullscreenchange = fullscreenChanged;
document.documentElement.onclick = goFullscreen;
document.onkeydown = goFullscreen;
</script>
</head>
<body style="margin:0">
<H1>Click anywhere or press any key to browse <u>Python documentation</u> in fullscreen.</H1>
<iframe id="main_frame" src="https://docs.python.org" style="width:100%;height:100%;border:none;display:none"></iframe>
</body>
</html>
Note, however, that websites often disallow embedding, e.g. being displayed inside an iframe. The example initially used W3Schools website instead of Python docs, but they set 'X-Frame-Options' header to 'sameorigin' (disallow cross-site embedding) and it stopped working.
P.S. I like the idea of simulating full-blown OS in browser, and it's even better in fullscreen! :) Change your OS!
Also, I am not a web developer. Just thought this question would be interesting to investigate.
You might be able to use requestFullScreen() methods as described at https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode.
Note : This still requires user input - but avoid usage of flash.
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
toggleFullScreen();
This allows the page to activate full screen, and could possibly be activated via page load on a javascript page. However, there is no support for older browsers.
When I needed to do something similar I used a splash screen. The button to continue into full screen mode requested it as an attribute of a JS pop:
onClick="window.open('pageName.html', 'test', 'fullscreen=yes')"
This is not fullproof, but worked better than any other methods I found. You likely won't be able to do this without user interaction, so using something like a splashscreen allows you to minimize the intrusion to something more commonly accepted.
This is not exactly what the OP was looking for, but in my particular situation, I found a combination of kiosk mode and some dynamic styling to work.
I was looking to start a browser with a particular URL and have it start in full screen mode. The use case is little to no user interaction on a terminal in a manufacturing plant with a status screen. Following power up, it needs to display only the status without interaction (i.e. display none of configuration UI elements unless the user interacts).
Perhaps, not realistic on a complex site, but my use was a particular "pane" (div in this case) element. To focus on the particular div, I hid the other divs, and set styles accordingly. If there happens to be user interaction to change from and to fullscreen, I (1) use the regular myElement.*requestFullScreen() document.*exitFullscreen() calls, (2) show/hide the other divs, and (3) switch between the classes below:
.right-pane-fullscreen
{
margin-left: 0px;
}
.right-pane-normal
{
margin-left: 225px;
}
Related discussion on how to use kiosk mode in Chrome (be aware that other Chrome processes running prior to launching kiosk mode can prevent this from working)
Opening Chrome browser in full window or kiosk mode on windows 7
I am looking for a trick to put my website in fullscreen mode without human interaction.
I've found some examples using HTML5's techniques, but all of then needs to be triggered by a human interaction.
This website will be displayed in a TV ...
I already think in load the website using a SWF file in fullscreen mode, but instead of going to this direction, I would like to stress all possibilities using just the default pattern (html, css and javascript)
You can't force a website to display in fullscreen mode.
Imagine the security concerns if that were possible.
Malicious websites could "Hijack" a less computer literate person's desktop for all kinds of dubious business.
All of JS fullscreen api's will throw a error like this:
"Failed to execute 'requestFullScreen' on 'Element': API can only be initiated by a user gesture."
If you try to simply call it from your code.
I'm pretty darn sure Flash is similar, in that it requires user interaction to go fullscreen. Otherwise, we'd have seen our fair share of fullscreen popups that are nearly impossible to close.
Other answers already describe how you can go fullscreen in a more or less browser-independent way.
However, problem of needing user interaction remains.
You cannot force your webpage to display in fullscreen mode for security reasons.
User interaction is required for that.
Also, browser leaves fullscreen mode whenever user goes to another page, even on the same website, and (s)he will have to perform some "user interaction" on every page to go back into fullscreen mode.
This is the reason why your website has to be a single page if you want it to be fullscreen.
That is what I suggest:
Use a single splash page that has a hidden iFrame on it.
Whenever user clicks anywhere or presses any key, just set this iFrame to be fullscreen and show it. When you receive an event on leaving fullscreen mode, hide iFrame again to show splash.
Links open in the same frame by default, so you will stay in fullscreen mode until user explicitly leaves it or some links opens in a new tab.
Here is an example that works in Chrome:
(See it in action. Use other answers to make it browser-independent.)
<html>
<head>
<script language="jscript">
function goFullscreen() {
// Must be called as a result of user interaction to work
mf = document.getElementById("main_frame");
mf.webkitRequestFullscreen();
mf.style.display="";
}
function fullscreenChanged() {
if (document.webkitFullscreenElement == null) {
mf = document.getElementById("main_frame");
mf.style.display="none";
}
}
document.onwebkitfullscreenchange = fullscreenChanged;
document.documentElement.onclick = goFullscreen;
document.onkeydown = goFullscreen;
</script>
</head>
<body style="margin:0">
<H1>Click anywhere or press any key to browse <u>Python documentation</u> in fullscreen.</H1>
<iframe id="main_frame" src="https://docs.python.org" style="width:100%;height:100%;border:none;display:none"></iframe>
</body>
</html>
Note, however, that websites often disallow embedding, e.g. being displayed inside an iframe. The example initially used W3Schools website instead of Python docs, but they set 'X-Frame-Options' header to 'sameorigin' (disallow cross-site embedding) and it stopped working.
P.S. I like the idea of simulating full-blown OS in browser, and it's even better in fullscreen! :) Change your OS!
Also, I am not a web developer. Just thought this question would be interesting to investigate.
You might be able to use requestFullScreen() methods as described at https://developer.mozilla.org/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode.
Note : This still requires user input - but avoid usage of flash.
function toggleFullScreen() {
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (document.documentElement.requestFullscreen) {
document.documentElement.requestFullscreen();
} else if (document.documentElement.msRequestFullscreen) {
document.documentElement.msRequestFullscreen();
} else if (document.documentElement.mozRequestFullScreen) {
document.documentElement.mozRequestFullScreen();
} else if (document.documentElement.webkitRequestFullscreen) {
document.documentElement.webkitRequestFullscreen(Element.ALLOW_KEYBOARD_INPUT);
}
} else {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
}
}
toggleFullScreen();
This allows the page to activate full screen, and could possibly be activated via page load on a javascript page. However, there is no support for older browsers.
When I needed to do something similar I used a splash screen. The button to continue into full screen mode requested it as an attribute of a JS pop:
onClick="window.open('pageName.html', 'test', 'fullscreen=yes')"
This is not fullproof, but worked better than any other methods I found. You likely won't be able to do this without user interaction, so using something like a splashscreen allows you to minimize the intrusion to something more commonly accepted.
This is not exactly what the OP was looking for, but in my particular situation, I found a combination of kiosk mode and some dynamic styling to work.
I was looking to start a browser with a particular URL and have it start in full screen mode. The use case is little to no user interaction on a terminal in a manufacturing plant with a status screen. Following power up, it needs to display only the status without interaction (i.e. display none of configuration UI elements unless the user interacts).
Perhaps, not realistic on a complex site, but my use was a particular "pane" (div in this case) element. To focus on the particular div, I hid the other divs, and set styles accordingly. If there happens to be user interaction to change from and to fullscreen, I (1) use the regular myElement.*requestFullScreen() document.*exitFullscreen() calls, (2) show/hide the other divs, and (3) switch between the classes below:
.right-pane-fullscreen
{
margin-left: 0px;
}
.right-pane-normal
{
margin-left: 225px;
}
Related discussion on how to use kiosk mode in Chrome (be aware that other Chrome processes running prior to launching kiosk mode can prevent this from working)
Opening Chrome browser in full window or kiosk mode on windows 7
I am playing an alert in IE8 if I open the home page of my application. I am using jQuery to embed the sound file in the page.
if (isAlert) {
if(!isAdded){
if ($("#beapImg").length!= 0) {
} else {
$('body').append('<embed src="'+alerts+'" id="beapImg" autostart="true" hidden="true" loop="true">');
isalertAdded=true;
}
}
}
But I am getting:
This website wants to run the following add-on: ‘Windows Media Player Core’ from ‘Microsoft Corporation’
at the top of the page. If I click Add Add Ons, then I am able to hear the sound.
Can anyone please suggest how to avoid this programmatically and advise me as to why I am getting the above alert?
How to Avoid the Warning?
If you are a web developer, you should use the safer versions of these controls. Please do not encourage your users to approve controls when safer options are pre-approved. If you are getting these warnings, you are probably using some very old sample code:
Windows Media Player: Do not use MediaPlayer.MediaPlayer.1, or other
older techniques. Use wmplayer.ocx.
QuickTime: Do not use QuickTimeCheckObject.QuickTimeCheck.1. Instead,
use QuickTime.QuickTime.
MSXML: Do not use MSXML 5.0. See this sample code to detect the
right version of MSXML in IE7.
Taken from here.
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.