diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 04e5b01a..3e297b56 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -25,6 +25,9 @@
         "qrcode.vue": "^3.4.1",
         "tus-js-client": "^3.1.1",
         "utif": "^3.1.0",
+        "video.js": "^8.5.2",
+        "videojs-hotkeys": "^0.2.28",
+        "videojs-mobile-ui": "^1.1.1",
         "vue": "^3.3.4",
         "vue-i18n": "^9.4.0",
         "vue-lazyload": "^3.0.0",
@@ -1700,7 +1703,6 @@
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.15.tgz",
       "integrity": "sha512-T0O+aa+4w0u06iNmapipJXMV4HoUir03hpx3/YqXXhu9xim3w+dVphjFWl1OH8NbZHw5Lbm9k45drDkgq2VNNA==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.14.0"
       },
@@ -1711,8 +1713,7 @@
     "node_modules/@babel/runtime/node_modules/regenerator-runtime": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.14.0.tgz",
-      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA==",
-      "dev": true
+      "integrity": "sha512-srw17NI0TUWHuGa5CFGGmhfNIeja30WMBfbslPNhf6JrqQlLN5gcrvig1oqPxiVaXb0oW0XRKtH6Nngs5lKCIA=="
     },
     "node_modules/@babel/template": {
       "version": "7.22.15",
@@ -2889,6 +2890,92 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
+    "node_modules/@videojs/http-streaming": {
+      "version": "3.5.3",
+      "resolved": "https://registry.npmjs.org/@videojs/http-streaming/-/http-streaming-3.5.3.tgz",
+      "integrity": "sha512-dty8lsZk9QPc0i4It79tjWsmPiaC3FpgARFM0vJGko4k3yKNZIYkAk8kjiDRfkAQH/HZ3rYi5dDTriFNzwSsIg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "4.0.0",
+        "aes-decrypter": "4.0.1",
+        "global": "^4.4.0",
+        "m3u8-parser": "^7.1.0",
+        "mpd-parser": "^1.1.1",
+        "mux.js": "7.0.0",
+        "video.js": "^7 || ^8"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      },
+      "peerDependencies": {
+        "video.js": "^7 || ^8"
+      }
+    },
+    "node_modules/@videojs/http-streaming/node_modules/m3u8-parser": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-7.1.0.tgz",
+      "integrity": "sha512-7N+pk79EH4oLKPEYdgRXgAsKDyA/VCo0qCHlUwacttQA0WqsjZQYmNfywMvjlY9MpEBVZEt0jKFd73Kv15EBYQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      }
+    },
+    "node_modules/@videojs/http-streaming/node_modules/m3u8-parser/node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/http-streaming/node_modules/mux.js": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-7.0.0.tgz",
+      "integrity": "sha512-DeZmr+3NDrO02k4SREtl4VB5GyGPCz2fzMjDxBIlamkxffSTLge97rtNMoonnmFHTp96QggDucUtKv3fmyObrA==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/vhs-utils": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-4.0.0.tgz",
+      "integrity": "sha512-xJp7Yd4jMLwje2vHCUmi8MOUU76nxiwII3z4Eg3Ucb+6rrkFVGosrXlMgGnaLjq724j3wzNElRZ71D/CKrTtxg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
+    "node_modules/@videojs/xhr": {
+      "version": "2.6.0",
+      "resolved": "https://registry.npmjs.org/@videojs/xhr/-/xhr-2.6.0.tgz",
+      "integrity": "sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "global": "~4.4.0",
+        "is-function": "^1.0.1"
+      }
+    },
     "node_modules/@vitejs/plugin-legacy": {
       "version": "4.1.1",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-legacy/-/plugin-legacy-4.1.1.tgz",
@@ -3469,6 +3556,14 @@
         }
       }
     },
+    "node_modules/@xmldom/xmldom": {
+      "version": "0.8.10",
+      "resolved": "https://registry.npmjs.org/@xmldom/xmldom/-/xmldom-0.8.10.tgz",
+      "integrity": "sha512-2WALfTl4xo2SkGCYRt6rDTFfk9R1czmBvUQy12gK2KuRKIpWEhcbbzy8EZXtz/jkRqHX8bFEc6FC1HjX4TUWYw==",
+      "engines": {
+        "node": ">=10.0.0"
+      }
+    },
     "node_modules/abab": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/abab/-/abab-2.0.6.tgz",
@@ -3499,6 +3594,31 @@
         "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
       }
     },
+    "node_modules/aes-decrypter": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-4.0.1.tgz",
+      "integrity": "sha512-H1nh/P9VZXUf17AA5NQfJML88CFjVBDuGkp5zDHa7oEhYN9TTpNLJknRY1ie0iSKWlDf6JRnJKaZVDSQdPy6Cg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0",
+        "pkcs7": "^1.0.4"
+      }
+    },
+    "node_modules/aes-decrypter/node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/agent-base": {
       "version": "6.0.2",
       "resolved": "https://registry.npmjs.org/agent-base/-/agent-base-6.0.2.tgz",
@@ -4131,6 +4251,11 @@
         "node": ">=6.0.0"
       }
     },
+    "node_modules/dom-walk": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/dom-walk/-/dom-walk-0.1.2.tgz",
+      "integrity": "sha512-6QvTW9mrGeIegrFXdtQi9pk7O/nSK6lSdXW2eqUspN5LWD7UTji2Fqw5V2YLjBpHEoU9Xl/eUWNpDeZvoyOv2w=="
+    },
     "node_modules/domexception": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/domexception/-/domexception-4.0.0.tgz",
@@ -4823,6 +4948,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/global": {
+      "version": "4.4.0",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.4.0.tgz",
+      "integrity": "sha512-wv/LAoHdRE3BeTGz53FAamhGlPLhlssK45usmGFThIi4XqnBmjKQ16u+RNbP7WvigRZDxUsM0J3gcQ5yicaL0w==",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "^0.11.10"
+      }
+    },
     "node_modules/globals": {
       "version": "11.12.0",
       "resolved": "https://registry.npmjs.org/globals/-/globals-11.12.0.tgz",
@@ -4990,6 +5124,11 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/individual": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/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.npmjs.org/inflight/-/inflight-1.0.6.tgz",
@@ -5051,6 +5190,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/is-function": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/is-function/-/is-function-1.0.2.tgz",
+      "integrity": "sha512-lw7DUp0aWXYg+CBCN+JKkcE0Q2RayZnSvnZBlwgxHBQhqt5pZNVy4Ri7H9GmmXkdu7LUthszM+Tor1u/2iBcpQ=="
+    },
     "node_modules/is-glob": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/is-glob/-/is-glob-4.0.3.tgz",
@@ -5278,6 +5422,11 @@
       "resolved": "https://registry.npmjs.org/jwt-decode/-/jwt-decode-3.1.2.tgz",
       "integrity": "sha512-UfpWE/VZn0iP50d8cz9NrZLM9lSWhcJ+0Gt/nm4by88UL+J1SiKN8/5dkjMmbEzwL2CAe+67GsegCbIKtbp75A=="
     },
+    "node_modules/keycode": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/keycode/-/keycode-2.2.0.tgz",
+      "integrity": "sha512-ps3I9jAdNtRpJrbBvQjpzyFbss/skHqzS+eu4RxKLaEAtFqkjZaB6TZMSivPbLxf4K7VI4SjR0P5mRCX5+Q25A=="
+    },
     "node_modules/keyv": {
       "version": "4.5.3",
       "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.3.tgz",
@@ -5396,6 +5545,30 @@
         "yallist": "^3.0.2"
       }
     },
+    "node_modules/m3u8-parser": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-6.2.0.tgz",
+      "integrity": "sha512-qlC00JTxYOxawcqg+RB8jbyNwL3foY/nCY61kyWP+RCuJE9APLeqB/nSlTjb4Mg0yRmyERgjswpdQxMvkeoDrg==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "global": "^4.4.0"
+      }
+    },
+    "node_modules/m3u8-parser/node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/magic-string": {
       "version": "0.30.3",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.3.tgz",
@@ -5471,6 +5644,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/min-document": {
+      "version": "2.19.0",
+      "resolved": "https://registry.npmjs.org/min-document/-/min-document-2.19.0.tgz",
+      "integrity": "sha512-9Wy1B3m3f66bPPmU5hdA4DR4PB2OfDU/+GS3yAB7IQozE3tqXaVv2zOjgla7MEGSRv95+ILmOuvhLkOK6wJtCQ==",
+      "dependencies": {
+        "dom-walk": "^0.1.0"
+      }
+    },
     "node_modules/minimatch": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.2.tgz",
@@ -5494,6 +5675,34 @@
         "ufo": "^1.3.0"
       }
     },
+    "node_modules/mpd-parser": {
+      "version": "1.2.2",
+      "resolved": "https://registry.npmjs.org/mpd-parser/-/mpd-parser-1.2.2.tgz",
+      "integrity": "sha512-QCfB1koOoZw6E5La1cx+W/Yd0EZlRhHMqMr4TAJez0eRTuPDzPM5FWoiOqjyo37W+ISPLzmfJACSbJFEBjbL4Q==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/vhs-utils": "^3.0.5",
+        "@xmldom/xmldom": "^0.8.3",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "mpd-to-m3u8-json": "bin/parse.js"
+      }
+    },
+    "node_modules/mpd-parser/node_modules/@videojs/vhs-utils": {
+      "version": "3.0.5",
+      "resolved": "https://registry.npmjs.org/@videojs/vhs-utils/-/vhs-utils-3.0.5.tgz",
+      "integrity": "sha512-PKVgdo8/GReqdx512F+ombhS+Bzogiofy1LgAj4tN8PfdBx3HSS7V5WfJotKTqtOWGwVfSWsrYN/t09/DSryrw==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "global": "^4.4.0",
+        "url-toolkit": "^2.2.1"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/ms": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
@@ -5505,6 +5714,22 @@
       "integrity": "sha512-ckmWDJjphvd/FvZawgygcUeQCxzvohjFO5RxTjj4eq8kw359gFF3E1brjfI+viLMxss5JrHTDRHZvu2/tuy0Qg==",
       "dev": true
     },
+    "node_modules/mux.js": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-6.3.0.tgz",
+      "integrity": "sha512-/QTkbSAP2+w1nxV+qTcumSDN5PA98P0tjrADijIzQHe85oBK3Akhy9AHlH0ne/GombLMz1rLyvVsmrgRxoPDrQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.11.2",
+        "global": "^4.4.0"
+      },
+      "bin": {
+        "muxjs-transmux": "bin/transmux.js"
+      },
+      "engines": {
+        "node": ">=8",
+        "npm": ">=5"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
@@ -5828,6 +6053,17 @@
         }
       }
     },
+    "node_modules/pkcs7": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-1.0.4.tgz",
+      "integrity": "sha512-afRERtHn54AlwaF2/+LFszyAANTCggGilmcmILUzEjvs3XgFZT+xE6+QWQcAGmu4xajy+Xtj7acLOPdx5/eXWQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5"
+      },
+      "bin": {
+        "pkcs7": "bin/cli.js"
+      }
+    },
     "node_modules/pkg-types": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
@@ -5974,6 +6210,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/process": {
+      "version": "0.11.10",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.11.10.tgz",
+      "integrity": "sha512-cdGef/drWFoydD1JsMzuFf8100nZl+GT+yacc2bEced5f9Rjk4z+WtFUTBu9PhOi9j/jfmBPu0mMEY4wIdAF8A==",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/proper-lockfile": {
       "version": "4.1.2",
       "resolved": "https://registry.npmjs.org/proper-lockfile/-/proper-lockfile-4.1.2.tgz",
@@ -6322,6 +6566,22 @@
         "queue-microtask": "^1.2.2"
       }
     },
+    "node_modules/rust-result": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/rust-result/-/rust-result-1.0.0.tgz",
+      "integrity": "sha512-6cJzSBU+J/RJCF063onnQf0cDUOHs9uZI1oroSGnHOph+CQTIJ5Pp2hK5kEQq1+7yE/EEWfulSNXAQ2jikPthA==",
+      "dependencies": {
+        "individual": "^2.0.0"
+      }
+    },
+    "node_modules/safe-json-parse": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/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/safer-buffer": {
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/safer-buffer/-/safer-buffer-2.1.2.tgz",
@@ -6830,6 +7090,11 @@
         "requires-port": "^1.0.0"
       }
     },
+    "node_modules/url-toolkit": {
+      "version": "2.2.5",
+      "resolved": "https://registry.npmjs.org/url-toolkit/-/url-toolkit-2.2.5.tgz",
+      "integrity": "sha512-mtN6xk+Nac+oyJ/PrI7tzfmomRVNFIWKUbG8jdYFt52hxbiReFAXIjYskvu64/dvuW71IcB7lV8l0HvZMac6Jg=="
+    },
     "node_modules/utif": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/utif/-/utif-3.1.0.tgz",
@@ -6843,6 +7108,75 @@
       "resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
       "integrity": "sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw=="
     },
+    "node_modules/video.js": {
+      "version": "8.5.2",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-8.5.2.tgz",
+      "integrity": "sha512-6/uNXQV3xSaKLpaPf/bVvr7omd+82sKUp0RMBgIt4PxHIe28GtX+O+GcNfI2fuwBvcDRDqk5Ei5AG9bJJOpulA==",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "@videojs/http-streaming": "3.5.3",
+        "@videojs/vhs-utils": "^4.0.0",
+        "@videojs/xhr": "2.6.0",
+        "aes-decrypter": "^4.0.1",
+        "global": "4.4.0",
+        "keycode": "2.2.0",
+        "m3u8-parser": "^6.0.0",
+        "mpd-parser": "^1.0.1",
+        "mux.js": "^6.2.0",
+        "safe-json-parse": "4.0.0",
+        "videojs-contrib-quality-levels": "4.0.0",
+        "videojs-font": "4.1.0",
+        "videojs-vtt.js": "0.15.5"
+      }
+    },
+    "node_modules/videojs-contrib-quality-levels": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-quality-levels/-/videojs-contrib-quality-levels-4.0.0.tgz",
+      "integrity": "sha512-u5rmd8BjLwANp7XwuQ0Q/me34bMe6zg9PQdHfTS7aXgiVRbNTb4djcmfG7aeSrkpZjg+XCLezFNenlJaCjBHKw==",
+      "dependencies": {
+        "global": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "video.js": "^8"
+      }
+    },
+    "node_modules/videojs-font": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-4.1.0.tgz",
+      "integrity": "sha512-X1LuPfLZPisPLrANIAKCknZbZu5obVM/ylfd1CN+SsCmPZQ3UMDPcvLTpPBJxcBuTpHQq2MO1QCFt7p8spnZ/w=="
+    },
+    "node_modules/videojs-hotkeys": {
+      "version": "0.2.28",
+      "resolved": "https://registry.npmjs.org/videojs-hotkeys/-/videojs-hotkeys-0.2.28.tgz",
+      "integrity": "sha512-M8rlD5OSB3EDRdbS4MRNlGKFpA2sSIStmUPvy5zfl/NigzWaN6r4wnb32rEN0v97GiQwmUfXSmqrPNrXhiFQmQ=="
+    },
+    "node_modules/videojs-mobile-ui": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/videojs-mobile-ui/-/videojs-mobile-ui-1.1.1.tgz",
+      "integrity": "sha512-q7vx74++bqu2763Tc/GG4qFcMt42emC8uXe/z+zFVpBIiysgAf89AgorE6m30YHWtVJWgbRIyzFVYNOxCk9qow==",
+      "dependencies": {
+        "global": "^4.4.0"
+      },
+      "engines": {
+        "node": ">=14",
+        "npm": ">=6"
+      },
+      "peerDependencies": {
+        "video.js": "^8"
+      }
+    },
+    "node_modules/videojs-vtt.js": {
+      "version": "0.15.5",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.5.tgz",
+      "integrity": "sha512-yZbBxvA7QMYn15Lr/ZfhhLPrNpI/RmCSCqgIff57GC2gIrV5YfyzLfLyZMj0NnZSAz8syB4N0nHXpZg9MyrMOQ==",
+      "dependencies": {
+        "global": "^4.3.1"
+      }
+    },
     "node_modules/vite": {
       "version": "4.4.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 936ffb30..821b66b6 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -31,6 +31,9 @@
     "qrcode.vue": "^3.4.1",
     "tus-js-client": "^3.1.1",
     "utif": "^3.1.0",
+    "video.js": "^8.5.2",
+    "videojs-hotkeys": "^0.2.28",
+    "videojs-mobile-ui": "^1.1.1",
     "vue": "^3.3.4",
     "vue-i18n": "^9.4.0",
     "vue-lazyload": "^3.0.0",
diff --git a/frontend/src/components/files/VideoPlayer.vue b/frontend/src/components/files/VideoPlayer.vue
new file mode 100644
index 00000000..e1b18a27
--- /dev/null
+++ b/frontend/src/components/files/VideoPlayer.vue
@@ -0,0 +1,85 @@
+<template>
+  <video
+    ref="videoPlayer"
+    class="video-js"
+    controls
+    style="width: 100%; height: 100%"
+  >
+    <source :src="source" />
+    <track
+      kind="subtitles"
+      v-for="(sub, index) in subtitles"
+      :key="index"
+      :src="sub"
+      :label="'Subtitle ' + index"
+      :default="index === 0"
+    />
+    <p class="vjs-no-js">
+      Sorry, your browser doesn't support embedded videos, but don't worry, you
+      can <a :href="source">download it</a>
+      and watch it with your favorite video player!
+    </p>
+  </video>
+</template>
+
+<script>
+import videojs from "video.js";
+import "videojs-mobile-ui";
+import "videojs-hotkeys";
+
+import "video.js/dist/video-js.min.css";
+import "videojs-mobile-ui/dist/videojs-mobile-ui.css";
+
+export default {
+  name: "VideoPlayer",
+  props: {
+    source: {
+      type: String,
+      default() {
+        return "";
+      },
+    },
+    options: {
+      type: Object,
+      default() {
+        return {};
+      },
+    },
+    subtitles: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+  },
+  data() {
+    return {
+      player: null,
+    };
+  },
+  mounted() {
+    this.player = videojs(
+      this.$refs.videoPlayer,
+      {
+        ...this.options,
+        plugins: {
+          hotkeys: {
+            volumeStep: 0.1,
+            seekStep: 10,
+            enableModifiersForNumbers: false,
+          },
+        },
+      },
+      () => {
+        // this.player.log("onPlayerReady", this);
+      }
+    );
+    this.player.mobileUi();
+  },
+  beforeUnmount() {
+    if (this.player) {
+      this.player.dispose();
+    }
+  },
+};
+</script>
diff --git a/frontend/src/views/Files.vue b/frontend/src/views/Files.vue
index bdee40ae..9abade30 100644
--- a/frontend/src/views/Files.vue
+++ b/frontend/src/views/Files.vue
@@ -44,10 +44,10 @@ import Breadcrumbs from "@/components/Breadcrumbs.vue";
 import Errors from "@/views/Errors.vue";
 import { useI18n } from "vue-i18n";
 import { useRoute } from "vue-router";
-import Preview from "@/views/files/Preview.vue";
 import FileListing from "@/views/files/FileListing.vue";
 import { StatusError } from "@/api/utils";
 const Editor = defineAsyncComponent(() => import("@/views/files/Editor.vue"));
+const Preview = defineAsyncComponent(() => import("@/views/files/Preview.vue"));
 
 const layoutStore = useLayoutStore();
 const fileStore = useFileStore();
diff --git a/frontend/src/views/files/Preview.vue b/frontend/src/views/files/Preview.vue
index 30cda0d9..cd9ffd25 100644
--- a/frontend/src/views/files/Preview.vue
+++ b/frontend/src/views/files/Preview.vue
@@ -67,26 +67,14 @@
           :autoplay="autoPlay"
           @play="autoPlay = true"
         ></audio>
-        <video
+        <VideoPlayer
           v-else-if="fileStore.req?.type == 'video'"
           ref="player"
-          :src="raw"
-          controls
-          :autoplay="autoPlay"
-          @play="autoPlay = true"
+          :source="raw"
+          :subtitles="subtitles"
+          :options="videoOptions"
         >
-          <track
-            kind="captions"
-            v-for="(sub, index) in subtitles"
-            :key="index"
-            :src="sub"
-            :label="'Subtitle ' + index"
-            :default="index === 0"
-          />
-          Sorry, your browser doesn't support embedded videos, but don't worry,
-          you can <a :href="downloadUrl">download it</a>
-          and watch it with your favorite video player!
-        </video>
+        </VideoPlayer>
         <object
           v-else-if="fileStore.req?.extension.toLowerCase() == '.pdf'"
           class="pdf"
@@ -159,6 +147,7 @@ import Action from "@/components/header/Action.vue";
 import ExtendedImage from "@/components/files/ExtendedImage.vue";
 import { computed, inject, onBeforeUnmount, onMounted, ref, watch } from "vue";
 import { useRoute, useRouter } from "vue-router";
+import VideoPlayer from "@/components/files/VideoPlayer.vue";
 
 const mediaTypes: ResourceType[] = ["image", "video", "audio", "blob"];
 
@@ -210,6 +199,10 @@ const subtitles = computed(() => {
   return [];
 });
 
+const videoOptions = computed(() => {
+  return { autoplay: autoPlay.value };
+});
+
 watch(route, () => {
   updatePreview();
   toggleNavigation();