Skip to content

Instantly share code, notes, and snippets.

@kurorido
Created May 10, 2016 17:57
Show Gist options
  • Save kurorido/10c99d7f7f79564a964e0cda519a84cd to your computer and use it in GitHub Desktop.
Save kurorido/10c99d7f7f79564a964e0cda519a84cd to your computer and use it in GitHub Desktop.
Toggle HTML5 video tag fullsceen with enter key
<video id="Video1" width="1134" height="906" controls>
<source src="test_1.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<script>
document.addEventListener("keypress", function(e) {
e = e || window.event;
if(e.keyCode == 13) {
toggleFullScreen();
}
}
function toggleFullScreen() {
var elem = document.getElementById(videoId);
if (!document.fullscreenElement && // alternative standard method
!document.mozFullScreenElement && !document.webkitFullscreenElement && !document.msFullscreenElement ) { // current working methods
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.msRequestFullscreen) {
elem.documentElement.msRequestFullscreen();
} else if (elem.mozRequestFullScreen) {
elem.mozRequestFullScreen();
} else if (elem.webkitRequestFullscreen) {
elem.webkitRequestFullscreen();
}
} else {
if (elem.exitFullscreen) {
elem.exitFullscreen();
} else if (elem.msExitFullscreen) {
elem.msExitFullscreen();
} else if (elem.mozCancelFullScreen) {
elem.mozCancelFullScreen();
} else if (elem.webkitExitFullscreen) {
elem.webkitExitFullscreen();
}
}
}
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment