html - Capturing the ESC key using Javascript only -
html - Capturing the ESC key using Javascript only -
i have custom video play it's own controls. have script create changes controls when user enters , exists fullscreen. problem when exit fullscreen using esc key instead of button, style changes controls not reverted back. need ensure exiting fullscreen using esc or button result in same behaviour.
css:
function togglefullscreen() { elem = document.getelementbyid("video_container"); var db = document.getelementbyid("defaultbar"); var ctrl = document.getelementbyid("controls"); if (!document.fullscreenelement && // alternative standard method !document.mozfullscreenelement && !document.webkitfullscreenelement) { // current working methods if (document.documentelement.requestfullscreen) { ctrl.style.width = '50%'; ctrl.style.left = '25%'; full.firstchild.src = ('images/icons/unfull.png'); elem.requestfullscreen(); } else if (document.documentelement.mozrequestfullscreen) { full.firstchild.src = 'images/icons/unfull.png'; ctrl.style.width = '50%'; ctrl.style.left = '25%'; elem.mozrequestfullscreen(); } else if (document.documentelement.webkitrequestfullscreen) { ctrl.style.width = '50%'; ctrl.style.left = '25%'; full.firstchild.src = 'images/icons/unfull.png'; elem.webkitrequestfullscreen(); } } else if (document.exitfullscreen) { full.firstchild.src = 'images/icons/full.png'; ctrl.style.width = '100%'; ctrl.style.left = '0'; document.exitfullscreen(); } else if (document.mozcancelfullscreen) { full.firstchild.src = 'images/icons/full.png'; ctrl.style.width = '100%'; ctrl.style.left = '0'; document.mozcancelfullscreen(); } else if (document.webkitcancelfullscreen) { ctrl.style.width = '100%'; ctrl.style.left = '0'; full.firstchild.src = 'images/icons/full.png'; document.webkitcancelfullscreen(); } }
it sounds want attach keypress event document. ought trick.
document.onkeypress = function(evt) { evt = evt || window.event; if (evt.keycode == 27) { alert("esc pressed"); } };
for more info, check out this article
javascript html html5 html5-video
Comments
Post a Comment