Solved Adapting Chrome Fullscreen API to onload & link

April 3, 2012 at 08:37:25
Specs: Windows 7
Hi, collaborators !!

I found this Fullscreen API script for opening Google Chrome fullscreen :


function () {
var viewFullScreen = document.getElementById("view-fullscreen");
if (viewFullScreen) {
viewFullScreen.addEventListener("click", function () {
var docElm = document.documentElement;
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
}, false);
}

var cancelFullScreen = document.getElementById("cancel-fullscreen");
if (cancelFullScreen) {
cancelFullScreen.addEventListener("click", function () {
if (document.exitFullscreen) {
document.exitFullscreen();
}
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
}, false);
}


var fullscreenState = document.getElementById("fullscreen-state");
if (fullscreenState) {
document.addEventListener("fullscreenchange", function () {
fullscreenState.innerHTML = (document.fullscreen)? "" : "not ";
}, false);

document.addEventListener("mozfullscreenchange", function () {
fullscreenState.innerHTML = (document.mozFullScreen)? "" : "not ";
}, false);

document.addEventListener("webkitfullscreenchange", function () {
fullscreenState.innerHTML = (document.webkitIsFullScreen)? "" : "not ";
}, false);
}

var marioVideo = document.getElementById("mario-video")
videoFullscreen = document.getElementById("video-fullscreen");

if (marioVideo && videoFullscreen) {
videoFullscreen.addEventListener("click", function (evt) {
if (marioVideo.requestFullscreen) {
marioVideo.requestFullscreen();
}
else if (marioVideo.mozRequestFullScreen) {
marioVideo.mozRequestFullScreen();
}
else if (marioVideo.webkitRequestFullScreen) {
marioVideo.webkitRequestFullScreen();
/*
*Kept here for reference: keyboard support in full screen
* marioVideo.webkitRequestFullScreen(Element.ALLOW_KEYBOARD_INPUT);
*/
}
}, false);
}
})();

The script works ( see http://robnyman.github.com/fullscreen/ and try it with Chrome ); however, my question is, how could I set up the script to open....

1. on body onload,
2. activating it from a link

Once again, let me express my thanks for your collaboration to this newbie !!


See More: Adapting Chrome Fullscreen API to onload & link

Report •


#1
April 3, 2012 at 09:32:44
1. Have you tried calling it from the body's onload?
2. Have you tried calling it from the link's onclick event? Or just calling the function from the href?

How To Ask Questions The Smart Way


Report •

#2
April 3, 2012 at 09:53:04
No, because I have the following doubts (forgive me if this might look candid, but I'm a newbie) :

1. What function name should I invoke in onload or onclick ? I only see function (), no name apparently assigned to it.
.
2. For my purposes, I only need the variable viewFullScreen from the script; I wonder then How should I invoke this correctly. In the demo that appears in the URL I mentioned, the script must accomplish different purposes : turn off fullscreen, show video fullscreen, keyboard action, etc.

Please be as throrough on your suggestion as possible. Thnks again, Razor.


Report •

#3
April 3, 2012 at 10:41:08
✔ Best Answer
In both cases, you should probably remove the nested anonymous function from the anonymous function that assigns an event handler. I'm not sure why the author did it that way, but I don't really do any web programming, so I'm not aware of the pitfalls.

function goFull() {
  var docElm = document.documentElement;
  if (docElm.requestFullscreen) {
    docElm.requestFullscreen();
  }
  else if (docElm.mozRequestFullScreen) {
    docElm.mozRequestFullScreen();
  }
  else if (docElm.webkitRequestFullScreen) {
    docElm.webkitRequestFullScreen();
  }
}

function goHome() {
  if (document.exitFullscreen) {
    document.exitFullscreen();
  }
  else if (document.mozCancelFullScreen) {
    document.mozCancelFullScreen();
  }
  else if (document.webkitCancelFullScreen) {
    document.webkitCancelFullScreen();
  }
}

How To Ask Questions The Smart Way


Report •

Related Solutions

#4
April 22, 2012 at 08:36:02
It won't work, since the .requestFullscreen() method needs to be initiated by a user action, for obvious reason.

Try out screenfull.js if you don't want to deal with the prefixes:
https://github.com/sindresorhus/scr...


Report •

#5
April 22, 2012 at 09:23:24
Being a newbie, my question is how can you apply it using an "hrf" link tag...the example uses a button.

Also, I must infer that the script can't be used in a "onload" function..please confirm if I'm right.

Thanks !!


Report •

Ask Question