How can I detect a browser supports requestFullscreen
or not?
I have these codes below to make chrome, safari, firefox, and opera (not entirely working) to make a document fullscreen, but I want to detect the browser supports requestFullscreen
or not. What should I do?
$('.button-fullscreen').click(function(){
var docElm = document.documentElement;
// W3C Proposal
if (docElm.requestFullscreen) {
docElm.requestFullscreen();
}
// mozilla proposal
else if (docElm.mozRequestFullScreen) {
docElm.mozRequestFullScreen();
}
// Webkit (works in Safari and Chrome Canary)
else if (docElm.webkitRequestFullScreen) {
docElm.webkitRequestFullScreen();
}
return false;
});
$('.button-sound').click(function(){
// W3C Proposal
if (document.exitFullscreen) {
document.exitFullscreen();
}
// mozilla proposal
else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
}
// Webkit (works in Safari and Chrome Canary)
else if (document.webkitCancelFullScreen) {
document.webkitCancelFullScreen();
}
return false;
});
Use the modernizr framework to avoid testing for n vendor prefixes...
Modernizr.prefixed('requestFullscreen', document.documentElement)