diff --git a/frontend/src/components/VMediaPlayer.vue b/frontend/src/components/VMediaPlayer.vue
new file mode 100644
index 0000000..1e44abf
--- /dev/null
+++ b/frontend/src/components/VMediaPlayer.vue
@@ -0,0 +1,127 @@
+<template>
+  <div class="v-media-player">
+    <video
+        ref="video"
+        :data-poster="vPoster"
+        controls
+        crossorigin
+        playsinline
+    >
+    </video>
+  </div>
+</template>
+
+<script setup>
+// Core
+import {nextTick, onBeforeUnmount, onMounted, ref} from 'vue';
+// Modules
+import Plyr from 'plyr';
+import Hls from 'hls.js';
+
+// Props
+const props = defineProps({
+  vPoster: String,
+  vSource: String,
+});
+
+// Template refs
+const video = ref(null);
+
+// Video player setup
+let player = null;
+let hls = null;
+
+function onQualityChange(quality) {
+  if (quality === 0) {
+    hls.currentLevel = -1;
+  } else {
+    hls.levels.forEach((level, levelIndex) => {
+      if (level.height === quality) {
+        hls.currentLevel = levelIndex;
+      }
+    });
+  }
+}
+
+function initPlayer(resolutions) {
+  player = new Plyr(video.value, {
+    captions: {
+      active: false,
+      update: true,
+      language: 'en'
+    },
+    quality: {
+      default: 0,
+      options: resolutions,
+      forced: true,
+      onChange: (quality) => onQualityChange(quality)
+    },
+    i18n: {
+      qualityLabel: {
+        0: 'Auto'
+      }
+    },
+    keyboard: {
+      global: true
+    }
+  });
+
+  player.on('languagechange', () => {
+    setTimeout(() => hls.subtitleTrack = player.currentTrack, 50);
+  });
+
+  hls.attachMedia(video.value);
+}
+
+function playSource(source) {
+  if (!Hls.isSupported()) {
+    video.src = source;
+  } else {
+    hls = new Hls();
+    hls.loadSource(source);
+
+    hls.on(Hls.Events.MANIFEST_PARSED, () => {
+      const resolutions = hls.levels.map((l) => l.height);
+      resolutions.unshift(0);
+
+      initPlayer(resolutions);
+    });
+  }
+}
+
+// Lifecycle hooks
+onMounted(() =>
+    nextTick(() =>
+        playSource(props.vSource)
+    )
+);
+
+onBeforeUnmount(() => {
+  player.destroy(() => {
+    hls.destroy();
+  }, false);
+});
+</script>
+
+<style lang="scss">
+.v-media-player {
+  min-width: 100%;
+  --plyr-color-main: var(--primary);
+
+  video {
+    min-width: 100%;
+    aspect-ratio: 16 / 9;
+    object-fit: cover;
+  }
+
+  * {
+    all: revert;
+
+    &:after {
+      all: revert;
+    }
+  }
+}
+
+@import "plyr/dist/plyr";
+</style>
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index d1e80ef..a4396c2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,10 @@
       "license": "MIT",
       "dependencies": {
         "beercss": "2.2.11",
+        "hls.js": "1.5.8",
         "material-dynamic-colors": "0.0.10",
         "pinia": "2.1.7",
+        "plyr": "3.7.8",
         "socket.io-client": "4.5.2",
         "vue": "3.4.15",
         "vue-toastification": "2.0.0-rc.5"
@@ -788,11 +790,26 @@
         "fsevents": "~2.3.2"
       }
     },
+    "node_modules/core-js": {
+      "version": "3.37.1",
+      "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.37.1.tgz",
+      "integrity": "sha512-Xn6qmxrQZyB0FFY8E3bgRXei3lWDJHhvI+u0q9TKIYM49G8pAr0FgnnrFRAmsbptZL1yxRADVXn+x5AGsbBfyw==",
+      "hasInstallScript": true,
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/core-js"
+      }
+    },
     "node_modules/csstype": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
     },
+    "node_modules/custom-event-polyfill": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+      "integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
+    },
     "node_modules/debug": {
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -918,6 +935,11 @@
         "node": ">= 6"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.5.8",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.5.8.tgz",
+      "integrity": "sha512-hJYMPfLhWO7/7+n4f9pn6bOheCGx0WgvVz7k3ouq3Pp1bja48NN+HeCQu3XCGYzqWQF/wo7Sk6dJAyWVJD8ECA=="
+    },
     "node_modules/immutable": {
       "version": "4.3.5",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
@@ -961,6 +983,11 @@
         "node": ">=0.12.0"
       }
     },
+    "node_modules/loadjs": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.3.0.tgz",
+      "integrity": "sha512-vNX4ZZLJBeDEOBvdr2v/F+0aN5oMuPu7JTqrMwp+DtgK+AryOlpy6Xtm2/HpNr+azEa828oQjOtWsB6iDtSfSQ=="
+    },
     "node_modules/magic-string": {
       "version": "0.30.9",
       "resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.9.tgz",
@@ -1073,6 +1100,18 @@
         }
       }
     },
+    "node_modules/plyr": {
+      "version": "3.7.8",
+      "resolved": "https://registry.npmjs.org/plyr/-/plyr-3.7.8.tgz",
+      "integrity": "sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==",
+      "dependencies": {
+        "core-js": "^3.26.1",
+        "custom-event-polyfill": "^1.0.7",
+        "loadjs": "^4.2.0",
+        "rangetouch": "^2.0.1",
+        "url-polyfill": "^1.1.12"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.38",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.38.tgz",
@@ -1100,6 +1139,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/rangetouch": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz",
+      "integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
+    },
     "node_modules/readdirp": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1206,6 +1250,11 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/url-polyfill": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz",
+      "integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
+    },
     "node_modules/uuid": {
       "version": "8.3.2",
       "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
diff --git a/package.json b/package.json
index 2bea2d9..df14e61 100644
--- a/package.json
+++ b/package.json
@@ -24,8 +24,10 @@
   },
   "dependencies": {
     "beercss": "2.2.11",
+    "hls.js": "1.5.8",
     "material-dynamic-colors": "0.0.10",
     "pinia": "2.1.7",
+    "plyr": "3.7.8",
     "socket.io-client": "4.5.2",
     "vue": "3.4.15",
     "vue-toastification": "2.0.0-rc.5"