KSPlayer: управление клавишами

<Space> - воспроизведение/пауза
<Left>/<Right> - перемотка на 5 секунд назад/вперед
<Up>/<Down> - звук громче/тише
<F> - переход в полноэкранный режим

src/main/resources/kinosearch/webapp/static/js/ksplayer.js

@@ -106,6 +106,71 @@ const KSPlayer = function(containerId, data) {
         titleElement.id = 'title';
     }
 
+    function createVideoElement() {
+        let videoElement = document.createElement('video');
+        videoElement.id = 'player';
+        videoElement.className = 'center-block';
+        videoElement.setAttribute('controls', 'controls');
+        videoElement.setAttribute('preload', 'none');
+
+        if (videoElement.requestFullscreen) {
+            videoElement.kspFullScreen = videoElement.requestFullscreen;
+        } else if (videoElement.mozRequestFullScreen) {
+            videoElement.kspFullScreen = videoElement.mozRequestFullScreen; // Firefox
+        } else if (videoElement.webkitRequestFullscreen) {
+            videoElement.kspFullScreen = videoElement.webkitRequestFullscreen; // Chrome and Safari
+        } else {
+            console.warn('KSPlayer: can\'t use fullscreen mode =(');
+            videoElement.kspFullScreen = function() { return false; };
+        }
+
+        videoElement.onkeydown = function(e) {
+            // 32 - Space
+            if (e.keyCode === 32) {
+                if (videoElement.paused) {
+                    videoElement.play();
+                } else {
+                    videoElement.pause();
+                }
+            }
+
+            // 37 - Left arrow
+            if (e.keyCode === 37) {
+                videoElement.currentTime -= 5;
+            }
+            // 39 - Right arrow
+            else if (e.keyCode === 39) {
+                videoElement.currentTime += 5;
+            }
+
+            // 38 - Up arrow
+            if (e.keyCode === 38 && videoElement.volume < 1) {
+                if ((videoElement.volume + 0.1) < 1) {
+                    videoElement.volume += 0.1;
+                } else {
+                    videoElement.volume = 1;
+                }
+            }
+            // 40 - Down arrow
+            else if (e.keyCode === 40 && videoElement.volume > 0) {
+                if ((videoElement.volume - 0.1) >= 0) {
+                    videoElement.volume -= 0.1;
+                } else {
+                    videoElement.volume = 0;
+                }
+            }
+
+            // 70 - F
+            if (e.keyCode === 70) {
+                videoElement.kspFullScreen();
+            }
+
+            return false;
+        }
+
+        return videoElement;
+    }
+
     /* --- CONSTRUCTOR --------- */
 
     const containerElement = document.getElementById(containerId);
@@ -113,11 +178,7 @@ const KSPlayer = function(containerId, data) {
         throw `Container "${containerId}" not found!`;
     }
 
-    let videoElement = document.createElement('video');
+    let videoElement = createVideoElement();
-    videoElement.id = 'player';
-    videoElement.className = 'center-block';
-    videoElement.setAttribute('controls', 'controls');
-    videoElement.setAttribute('preload', 'none');
 
     if (data.hasOwnProperty('title')) {
         this.setTitle(data.title);