diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0b44d252ab..d6c6a02144 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -61,7 +61,8 @@
         "unified": "^7.0.0",
         "url-parse": "^1.4.3",
         "uuid": "9.0.1",
-        "video.js": "^7.4.1",
+        "video.js": "^8.22.0",
+        "videojs-hotkeys": "^0.2.30",
         "watermark-dom": "^1.0.0"
       },
       "devDependencies": {
@@ -7500,37 +7501,36 @@
       }
     },
     "node_modules/@videojs/http-streaming": {
-      "version": "2.16.3",
-      "resolved": "https://registry.npmmirror.com/@videojs/http-streaming/-/http-streaming-2.16.3.tgz",
-      "integrity": "sha512-91CJv5PnFBzNBvyEjt+9cPzTK/xoVixARj2g7ZAvItA+5bx8VKdk5RxCz/PP2kdzz9W+NiDUMPkdmTsosmy69Q==",
+      "version": "3.17.0",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.17.0.tgz",
+      "integrity": "sha512-Ch1P3tvvIEezeZXyK11UfWgp4cWKX4vIhZ30baN/lRinqdbakZ5hiAI3pGjRy3d+q/Epyc8Csz5xMdKNNGYpcw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "3.0.5",
-        "aes-decrypter": "3.1.3",
+        "@videojs/vhs-utils": "^4.1.1",
+        "aes-decrypter": "^4.0.2",
         "global": "^4.4.0",
-        "m3u8-parser": "4.8.0",
-        "mpd-parser": "^0.22.1",
-        "mux.js": "6.0.1",
-        "video.js": "^6 || ^7"
+        "m3u8-parser": "^7.2.0",
+        "mpd-parser": "^1.3.1",
+        "mux.js": "7.1.0",
+        "video.js": "^7 || ^8"
       },
       "engines": {
         "node": ">=8",
         "npm": ">=5"
       },
       "peerDependencies": {
-        "video.js": "^6 || ^7"
+        "video.js": "^8.19.0"
       }
     },
     "node_modules/@videojs/vhs-utils": {
-      "version": "3.0.5",
-      "resolved": "https://registry.npmmirror.com/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
-      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.1.1.tgz",
+      "integrity": "sha512-5iLX6sR2ownbv4Mtejw6Ax+naosGvoT9kY+gcuHzANyUZZ+4NpeNdKMUhb6ag0acYej1Y7cmr/F2+4PrggMiVA==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "global": "^4.4.0",
-        "url-toolkit": "^2.2.1"
+        "global": "^4.4.0"
       },
       "engines": {
         "node": ">=8",
@@ -7538,9 +7538,9 @@
       }
     },
     "node_modules/@videojs/xhr": {
-      "version": "2.6.0",
-      "resolved": "https://registry.npmmirror.com/@videojs/xhr/-/xhr-2.6.0.tgz",
-      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "version": "2.7.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.7.0.tgz",
+      "integrity": "sha512-giab+EVRanChIupZK7gXjHy90y3nncA2phIOyG3Ne5fvpiMJzvqYwiTOnEVW2S4CoYcuKJkomat7bMXA/UoUZQ==",
       "license": "MIT",
       "dependencies": {
         "@babel/runtime": "^7.5.5",
@@ -7711,7 +7711,7 @@
     },
     "node_modules/@xmldom/xmldom": {
       "version": "0.8.10",
-      "resolved": "https://registry.npmmirror.com/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
       "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
       "license": "MIT",
       "engines": {
@@ -7867,13 +7867,13 @@
       }
     },
     "node_modules/aes-decrypter": {
-      "version": "3.1.3",
-      "resolved": "https://registry.npmmirror.com/aes-decrypter/-/aes-decrypter-3.1.3.tgz",
-      "integrity": "sha512-VkG9g4BbhMBy+N5/XodDeV6F02chEk9IpgRTq/0bS80y4dzy79VH2Gtms02VXomf3HmyRe3yyJYkJ990ns+d6A==",
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.2.tgz",
+      "integrity": "sha512-lc+/9s6iJvuaRe5qDlMTpCFjnwpkeOXp8qP3oiZ5jsj1MRg+SBVUmmICrhxHvc8OELSmc+fEyyxAuppY6hrWzw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
+        "@videojs/vhs-utils": "^4.1.1",
         "global": "^4.4.0",
         "pkcs7": "^1.0.4"
       }
@@ -15836,11 +15836,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/individual": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmmirror.com/individual/-/individual-2.0.0.tgz",
-      "integrity": "sha512-pWt8hBCqJsUWI/HtcfWod7+N9SgAqyPEaF7JQjwzjn5vGrpg6aQ5qeAFQ7dx//UH4J1O+7xqew+gCeeFt6xN/g=="
-    },
     "node_modules/inflight": {
       "version": "1.0.6",
       "resolved": "https://registry.npmmirror.com/inflight/-/inflight-1.0.6.tgz",
@@ -16186,7 +16181,7 @@
     },
     "node_modules/is-function": {
       "version": "1.0.2",
-      "resolved": "https://registry.npmmirror.com/is-function/-/is-function-1.0.2.tgz",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
       "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ==",
       "license": "MIT"
     },
@@ -18455,12 +18450,6 @@
         "katex": "cli.js"
       }
     },
-    "node_modules/keycode": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmmirror.com/keycode/-/keycode-2.2.1.tgz",
-      "integrity": "sha512-Rdgz9Hl9Iv4QKi8b0OlCRQEzp4AgVxyCtz5S/+VIHezDmrDhkp2N2TqBWOLz0/gbeREXOOiI9/4b8BY9uw2vFg==",
-      "license": "MIT"
-    },
     "node_modules/keyv": {
       "version": "4.5.4",
       "resolved": "https://registry.npmmirror.com/keyv/-/keyv-4.5.4.tgz",
@@ -18769,13 +18758,13 @@
       }
     },
     "node_modules/m3u8-parser": {
-      "version": "4.8.0",
-      "resolved": "https://registry.npmmirror.com/m3u8-parser/-/m3u8-parser-4.8.0.tgz",
-      "integrity": "sha512-UqA2a/Pw3liR6Df3gwxrqghCP17OpPlQj6RBPLYygf/ZSQ4MoSgvdvhvt35qV+3NaaA0FSZx93Ix+2brT1U7cA==",
+      "version": "7.2.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.2.0.tgz",
+      "integrity": "sha512-CRatFqpjVtMiMaKXxNvuI3I++vUumIXVVT/JpCpdU/FynV/ceVw1qpPyyBNindL+JlPMSesx+WX1QJaZEJSaMQ==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
+        "@videojs/vhs-utils": "^4.1.1",
         "global": "^4.4.0"
       }
     },
@@ -20574,13 +20563,13 @@
       }
     },
     "node_modules/mpd-parser": {
-      "version": "0.22.1",
-      "resolved": "https://registry.npmmirror.com/mpd-parser/-/mpd-parser-0.22.1.tgz",
-      "integrity": "sha512-fwBebvpyPUU8bOzvhX0VQZgSohncbgYwUyJJoTSNpmy7ccD2ryiCvM7oRkn/xQH5cv73/xU7rJSNCLjdGFor0Q==",
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.3.1.tgz",
+      "integrity": "sha512-1FuyEWI5k2HcmhS1HkKnUAQV7yFPfXPht2DnRRGtoiiAAW+ESTbtEXIDpRkwdU+XyrQuwrIym7UkoPKsZ0SyFw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@videojs/vhs-utils": "^3.0.5",
+        "@videojs/vhs-utils": "^4.0.0",
         "@xmldom/xmldom": "^0.8.3",
         "global": "^4.4.0"
       },
@@ -20626,9 +20615,9 @@
       }
     },
     "node_modules/mux.js": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmmirror.com/mux.js/-/mux.js-6.0.1.tgz",
-      "integrity": "sha512-22CHb59rH8pWGcPGW5Og7JngJ9s+z4XuSlYvnxhLuc58cA1WqGDQPzuG8I+sPm1/p0CdgpzVTaKW408k5DNn8w==",
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.1.0.tgz",
+      "integrity": "sha512-NTxawK/BBELJrYsZThEulyUMDVlLizKdxyAsMuzoCD1eFj97BVaA8D/CvKsKu6FOLYkFojN5CbM9h++ZTZtknA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.11.2",
@@ -21629,7 +21618,7 @@
     },
     "node_modules/pkcs7": {
       "version": "1.0.4",
-      "resolved": "https://registry.npmmirror.com/pkcs7/-/pkcs7-1.0.4.tgz",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
       "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
       "license": "Apache-2.0",
       "dependencies": {
@@ -26035,15 +26024,6 @@
         "queue-microtask": "^1.2.2"
       }
     },
-    "node_modules/rust-result": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmmirror.com/rust-result/-/rust-result-1.0.0.tgz",
-      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
-      "license": "MIT",
-      "dependencies": {
-        "individual": "^2.0.0"
-      }
-    },
     "node_modules/rw": {
       "version": "1.3.3",
       "resolved": "https://registry.npmjs.org/rw/-/rw-1.3.3.tgz",
@@ -26099,14 +26079,6 @@
       ],
       "license": "MIT"
     },
-    "node_modules/safe-json-parse": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmmirror.com/safe-json-parse/-/safe-json-parse-4.0.0.tgz",
-      "integrity": "sha512-RjZPPHugjK0TOzFrLZ8inw44s9bKox99/0AZW9o/BEQVrJfhI+fIHMErnPyRa89/yRXUUr93q+tiN6zhoVV4wQ==",
-      "dependencies": {
-        "rust-result": "^1.0.0"
-      }
-    },
     "node_modules/safe-push-apply": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/safe-push-apply/-/safe-push-apply-1.0.0.tgz",
@@ -29798,12 +29770,6 @@
         "unidecode": "0.1.8"
       }
     },
-    "node_modules/url-toolkit": {
-      "version": "2.2.5",
-      "resolved": "https://registry.npmmirror.com/url-toolkit/-/url-toolkit-2.2.5.tgz",
-      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg==",
-      "license": "Apache-2.0"
-    },
     "node_modules/url/node_modules/punycode": {
       "version": "1.4.1",
       "resolved": "https://registry.npmmirror.com/punycode/-/punycode-1.4.1.tgz",
@@ -30048,30 +30014,51 @@
       }
     },
     "node_modules/video.js": {
-      "version": "7.21.6",
-      "resolved": "https://registry.npmmirror.com/video.js/-/video.js-7.21.6.tgz",
-      "integrity": "sha512-m41TbODrUCToVfK1aljVd296CwDQnCRewpIm5tTXMuV87YYSGw1H+VDOaV45HlpcWSsTWWLF++InDgGJfthfUw==",
+      "version": "8.22.0",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.22.0.tgz",
+      "integrity": "sha512-xge2kpjsvC0zgFJ1cqt+wTqsi21+huFswlonPFh7qiplypsb4FN/D2Rz6bWdG/S9eQaPHfWHsarmJL/7D3DHoA==",
       "license": "Apache-2.0",
       "dependencies": {
         "@babel/runtime": "^7.12.5",
-        "@videojs/http-streaming": "2.16.3",
-        "@videojs/vhs-utils": "^3.0.4",
-        "@videojs/xhr": "2.6.0",
-        "aes-decrypter": "3.1.3",
-        "global": "^4.4.0",
-        "keycode": "^2.2.0",
-        "m3u8-parser": "4.8.0",
-        "mpd-parser": "0.22.1",
-        "mux.js": "6.0.1",
-        "safe-json-parse": "4.0.0",
-        "videojs-font": "3.2.0",
-        "videojs-vtt.js": "^0.15.5"
+        "@videojs/http-streaming": "^3.17.0",
+        "@videojs/vhs-utils": "^4.1.1",
+        "@videojs/xhr": "2.7.0",
+        "aes-decrypter": "^4.0.2",
+        "global": "4.4.0",
+        "m3u8-parser": "^7.2.0",
+        "mpd-parser": "^1.3.1",
+        "mux.js": "^7.0.1",
+        "videojs-contrib-quality-levels": "4.1.0",
+        "videojs-font": "4.2.0",
+        "videojs-vtt.js": "0.15.5"
+      }
+    },
+    "node_modules/videojs-contrib-quality-levels": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.1.0.tgz",
+      "integrity": "sha512-TfrXJJg1Bv4t6TOCMEVMwF/CoS8iENYsWNKip8zfhB5kTcegiFYezEA0eHAJPU64ZC8NQbxQgOwAsYU8VXbOWA==",
+      "license": "Apache-2.0",
+      "dependencies": {
+        "global": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=16",
+        "npm": ">=8"
+      },
+      "peerDependencies": {
+        "video.js": "^8"
       }
     },
     "node_modules/videojs-font": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmmirror.com/videojs-font/-/videojs-font-3.2.0.tgz",
-      "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA==",
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.2.0.tgz",
+      "integrity": "sha512-YPq+wiKoGy2/M7ccjmlvwi58z2xsykkkfNMyIg4xb7EZQQNwB71hcSsB3o75CqQV7/y5lXkXhI/rsGAS7jfEmQ==",
+      "license": "Apache-2.0"
+    },
+    "node_modules/videojs-hotkeys": {
+      "version": "0.2.30",
+      "resolved": "https://registry.npmjs.org/videojs-hotkeys/-/videojs-hotkeys-0.2.30.tgz",
+      "integrity": "sha512-G8kEQZPapoWDoEajh2Nroy4bCN1qVEul5AuzZqBS7ZCG45K7hqTYKgf1+fmYvG8m8u84sZmVMUvSWZBjaFW66Q==",
       "license": "Apache-2.0"
     },
     "node_modules/videojs-vtt.js": {
diff --git a/frontend/package.json b/frontend/package.json
index 72a8acb62e..3c7e04d4be 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -56,7 +56,8 @@
     "unified": "^7.0.0",
     "url-parse": "^1.4.3",
     "uuid": "9.0.1",
-    "video.js": "^7.4.1",
+    "video.js": "^8.22.0",
+    "videojs-hotkeys": "^0.2.30",
     "watermark-dom": "^1.0.0"
   },
   "scripts": {
diff --git a/frontend/src/components/video-player.js b/frontend/src/components/video-player.js
index f50d69452a..2d7696009d 100644
--- a/frontend/src/components/video-player.js
+++ b/frontend/src/components/video-player.js
@@ -1,13 +1,26 @@
 import React from 'react';
 
 import videojs from 'video.js';
+import 'videojs-hotkeys';
 import 'video.js/dist/video-js.css';
 
 class VideoPlayer extends React.Component {
   componentDidMount() {
     // instantiate Video.js
-    this.player = videojs(this.videoNode, this.props, function onPlayerReady() {
-    });
+    this.player = videojs(this.videoNode, {
+      ...this.props,
+      plugins: {
+        hotkeys: {
+          alwaysCaptureHotkeys: true,
+          volumeStep: 0.1,
+          seekStep: 5,
+          enableMute: true,
+          enableFullscreen: true,
+          enableNumbers: true
+        }
+      }
+    }, function onPlayerReady() {});
+    this.player.el().focus();
   }
 
   // destroy player on unmount
@@ -23,7 +36,7 @@ class VideoPlayer extends React.Component {
   render() {
     return (
       <div data-vjs-player>
-        <video ref={ node => this.videoNode = node } className="video-js"></video>
+        <video ref={ node => this.videoNode = node } className="video-js" style={{ display: 'block' }}></video>
       </div>
     );
   }