diff --git a/package-lock.json b/package-lock.json
index 7ed92257..c1840cc1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -70,7 +70,7 @@
         "vue-router": "^3.5.3",
         "vue-slide-bar": "^1.2.0",
         "vue-slider-component": "^3.1.2",
-        "vue-videojs7": "^1.0.2",
+        "vue-video-player": "^5.0.2",
         "vuera": "^0.2.7",
         "vuex": "^3.1.3",
         "xml2js": "^0.4.23",
@@ -4767,7 +4767,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "dependencies": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -4776,8 +4775,7 @@
     "node_modules/babel-runtime/node_modules/regenerator-runtime": {
       "version": "0.11.1",
       "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-      "dev": true
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
     },
     "node_modules/babel-template": {
       "version": "6.26.0",
@@ -5789,7 +5787,6 @@
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
       "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
       "deprecated": "core-js@<3.3 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
-      "dev": true,
       "hasInstallScript": true
     },
     "node_modules/core-util-is": {
@@ -6866,6 +6863,14 @@
         "next-tick": "~1.0.0"
       }
     },
+    "node_modules/es5-shim": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.6.2.tgz",
+      "integrity": "sha512-n0XTVMGps+Deyr38jtqKPR5F5hb9owYeRQcKJW39eFvzUk/u/9Ww315werRzbiNMnHCUw/YHDPBphTlEnzdi+A==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/es6-iterator": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
@@ -10536,6 +10541,11 @@
       "resolved": "https://registry.npmjs.org/parenthesis/-/parenthesis-3.1.8.tgz",
       "integrity": "sha512-KF/U8tk54BgQewkJPvB4s/US3VQY68BRDpH638+7O/n58TpnwiwnOtGIOsT2/i+M78s61BBpeC83STB88d8sqw=="
     },
+    "node_modules/parse-headers": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.4.tgz",
+      "integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw=="
+    },
     "node_modules/parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -13079,6 +13089,12 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
       "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
     },
+    "node_modules/tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tsml/-/tsml-1.0.1.tgz",
+      "integrity": "sha1-ifghi52eJX9H1/a1bQHFpNLGj8M=",
+      "deprecated": "no longer maintained"
+    },
     "node_modules/tsutils": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
@@ -14138,11 +14154,196 @@
         "videojs-vtt.js": "^0.15.3"
       }
     },
+    "node_modules/videojs-contrib-hls": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-hls/-/videojs-contrib-hls-5.15.0.tgz",
+      "integrity": "sha512-18zbMYZ0XRBKTPEayA9bFTWWrqhT9b4G8+zf0czJLD7Epe5PcK1I/3dflTHQeQ5rwlWir+/XnFU3sMg/B2MMcw==",
+      "dependencies": {
+        "aes-decrypter": "1.0.3",
+        "global": "^4.3.0",
+        "m3u8-parser": "2.1.0",
+        "mux.js": "4.3.2",
+        "url-toolkit": "^2.1.3",
+        "video.js": "^5.19.1 || ^6.2.0",
+        "videojs-contrib-media-sources": "4.7.2",
+        "webwackify": "0.1.6"
+      },
+      "engines": {
+        "node": ">= 0.10.12"
+      }
+    },
+    "node_modules/videojs-contrib-hls/node_modules/aes-decrypter": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
+      "integrity": "sha1-nAa4pUNaWtCduTP4oBSvzxhMw04=",
+      "dependencies": {
+        "pkcs7": "^0.2.3"
+      }
+    },
+    "node_modules/videojs-contrib-hls/node_modules/global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      }
+    },
+    "node_modules/videojs-contrib-hls/node_modules/m3u8-parser": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
+      "integrity": "sha1-yBcDKewc1RXQ1Yu4t2LamJbLA2g="
+    },
+    "node_modules/videojs-contrib-hls/node_modules/mux.js": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+      "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+    },
+    "node_modules/videojs-contrib-hls/node_modules/pkcs7": {
+      "version": "0.2.3",
+      "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-0.2.3.tgz",
+      "integrity": "sha1-ItYGZtAQZcXyRDkJjkpIMEUic74=",
+      "bin": {
+        "pkcs7": "lib/cli.js"
+      },
+      "engines": {
+        "node": "^0.10",
+        "npm": "^1.4.6"
+      }
+    },
+    "node_modules/videojs-contrib-hls/node_modules/process": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+      "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/videojs-contrib-hls/node_modules/video.js": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
+      "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
+      "dependencies": {
+        "babel-runtime": "^6.9.2",
+        "global": "4.3.2",
+        "safe-json-parse": "4.0.0",
+        "tsml": "1.0.1",
+        "videojs-font": "2.1.0",
+        "videojs-ie8": "1.1.2",
+        "videojs-vtt.js": "0.12.6",
+        "xhr": "2.4.0"
+      }
+    },
+    "node_modules/videojs-contrib-hls/node_modules/videojs-font": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
+      "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
+    },
+    "node_modules/videojs-contrib-hls/node_modules/videojs-vtt.js": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+      "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+      "dependencies": {
+        "global": "^4.3.1"
+      }
+    },
+    "node_modules/videojs-contrib-media-sources": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-media-sources/-/videojs-contrib-media-sources-4.7.2.tgz",
+      "integrity": "sha512-e6iCHWBFuV05EGo7v+pS9iepObXnJ9joms467gzi8ZjpKVb3ifha9M0Ja24Rd8JfvYpzjltsgDVtGFDvIg4hQQ==",
+      "dependencies": {
+        "global": "^4.3.0",
+        "mux.js": "4.3.2",
+        "video.js": "^5.17.0 || ^6.2.0",
+        "webwackify": "0.1.6"
+      }
+    },
+    "node_modules/videojs-contrib-media-sources/node_modules/global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      }
+    },
+    "node_modules/videojs-contrib-media-sources/node_modules/mux.js": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+      "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+    },
+    "node_modules/videojs-contrib-media-sources/node_modules/process": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+      "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/videojs-contrib-media-sources/node_modules/video.js": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
+      "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
+      "dependencies": {
+        "babel-runtime": "^6.9.2",
+        "global": "4.3.2",
+        "safe-json-parse": "4.0.0",
+        "tsml": "1.0.1",
+        "videojs-font": "2.1.0",
+        "videojs-ie8": "1.1.2",
+        "videojs-vtt.js": "0.12.6",
+        "xhr": "2.4.0"
+      }
+    },
+    "node_modules/videojs-contrib-media-sources/node_modules/videojs-font": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
+      "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
+    },
+    "node_modules/videojs-contrib-media-sources/node_modules/videojs-vtt.js": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+      "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+      "dependencies": {
+        "global": "^4.3.1"
+      }
+    },
+    "node_modules/videojs-flash": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/videojs-flash/-/videojs-flash-2.2.1.tgz",
+      "integrity": "sha512-mHu6TD12EKkxMvr8tg4AcfV/DuVLff427nneoZom3N9Dd2bv0sJOWwdLPQH1v5BCuAuXAVuAOba56ovTl+G3tQ==",
+      "dependencies": {
+        "global": "^4.4.0",
+        "video.js": "^6 || ^7",
+        "videojs-swf": "5.4.2"
+      },
+      "engines": {
+        "node": ">=4.4.0"
+      }
+    },
     "node_modules/videojs-font": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
       "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
     },
+    "node_modules/videojs-hotkeys": {
+      "version": "0.2.27",
+      "resolved": "https://registry.npmjs.org/videojs-hotkeys/-/videojs-hotkeys-0.2.27.tgz",
+      "integrity": "sha512-pwtm1QocRmzJy1PWQsmFVHyeldYHHpLdeATK3FsFHVMmNpz6CROkAn8TFy2UILr8Ghgq134K8jEKNue8HWpudQ=="
+    },
+    "node_modules/videojs-ie8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
+      "integrity": "sha1-oj09hgitcZK2nGB3/E64SJmNNdk=",
+      "dependencies": {
+        "es5-shim": "^4.5.1"
+      }
+    },
+    "node_modules/videojs-swf": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/videojs-swf/-/videojs-swf-5.4.2.tgz",
+      "integrity": "sha512-FGg+Csioa8/A/EacvFefBdb9Z0rSiMlheHDunZnN3xXfUF43jvjawcWFQnZvrv1Cs1nE1LBrHyUZjF7j2mKOLw=="
+    },
     "node_modules/videojs-vtt.js": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz",
@@ -14521,21 +14722,11 @@
         "vue-class-component": "*"
       }
     },
-    "node_modules/vue-ribbon": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/vue-ribbon/-/vue-ribbon-1.0.1.tgz",
-      "integrity": "sha512-2YPMujiCsZcNa4MZXGQmg9IOkZQMShUHRGnbZycRYrBLJ2PoCJGl22jf9ld+B7PrSbmKCQqdkyXCtjih5gfuYw=="
-    },
     "node_modules/vue-router": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
       "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
     },
-    "node_modules/vue-script2": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/vue-script2/-/vue-script2-2.1.0.tgz",
-      "integrity": "sha512-EDUOjQBFvhkJXwmWuUR9ijlF7/4JtmvjXSKaHSa/LNTMy9ltjgKgYB68aqlxgq8ORdSxowd5eo24P1syjZJnBA=="
-    },
     "node_modules/vue-slide-bar": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/vue-slide-bar/-/vue-slide-bar-1.2.0.tgz",
@@ -14605,18 +14796,65 @@
         "typescript": "*"
       }
     },
-    "node_modules/vue-videojs7": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/vue-videojs7/-/vue-videojs7-1.0.2.tgz",
-      "integrity": "sha512-6CP4aSETZX9CLFVhNtnbCYXKUsvuPWyLhE95HCP4SB4c9vCdExlTdNb/ozEX9pNEJAVsa6GjIGVdW53AZfA/mQ==",
+    "node_modules/vue-video-player": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/vue-video-player/-/vue-video-player-5.0.2.tgz",
+      "integrity": "sha512-IZXeRGGSX4YIp54G0Q5cB7iqh6Ok6Dpa2jRkjdyvMWw7MShJuh54/d5QNb1CZ+CvZUzX/TH7osnpir7mBNcFvQ==",
       "dependencies": {
-        "@videojs/vhs-utils": "^3.0.0",
-        "video.js": "^7.11.6",
-        "vue": "^2.6.12",
-        "vue-ribbon": "^1.0.1",
-        "vue-router": "^3.5.1",
-        "vue-script2": "^2.1.0",
-        "vuex": "^3.6.2"
+        "object-assign": "^4.1.1",
+        "video.js": "^6.6.0",
+        "videojs-contrib-hls": "^5.12.2",
+        "videojs-flash": "^2.1.0",
+        "videojs-hotkeys": "^0.2.20"
+      },
+      "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
+    "node_modules/vue-video-player/node_modules/global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      }
+    },
+    "node_modules/vue-video-player/node_modules/process": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+      "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
+    "node_modules/vue-video-player/node_modules/video.js": {
+      "version": "6.13.0",
+      "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
+      "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
+      "dependencies": {
+        "babel-runtime": "^6.9.2",
+        "global": "4.3.2",
+        "safe-json-parse": "4.0.0",
+        "tsml": "1.0.1",
+        "videojs-font": "2.1.0",
+        "videojs-ie8": "1.1.2",
+        "videojs-vtt.js": "0.12.6",
+        "xhr": "2.4.0"
+      }
+    },
+    "node_modules/vue-video-player/node_modules/videojs-font": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
+      "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
+    },
+    "node_modules/vue-video-player/node_modules/videojs-vtt.js": {
+      "version": "0.12.6",
+      "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+      "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+      "dependencies": {
+        "global": "^4.3.1"
       }
     },
     "node_modules/vuera": {
@@ -14750,6 +14988,11 @@
         "acorn": "^8"
       }
     },
+    "node_modules/webwackify": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/webwackify/-/webwackify-0.1.6.tgz",
+      "integrity": "sha512-pGcw1T3HpNnM/UTRQqqRkkkzythSLts05mB+7Gr00B+0VbL0m39dFL5g20rSIEUt9Wrpw+/8k+snxRlUFHhcqA=="
+    },
     "node_modules/whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -14903,6 +15146,34 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
+    "node_modules/xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.4.0.tgz",
+      "integrity": "sha1-4W5mpF+GmGHu76tBbV7/ci3ECZM=",
+      "dependencies": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      }
+    },
+    "node_modules/xhr/node_modules/global": {
+      "version": "4.3.2",
+      "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+      "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+      "dependencies": {
+        "min-document": "^2.19.0",
+        "process": "~0.5.1"
+      }
+    },
+    "node_modules/xhr/node_modules/process": {
+      "version": "0.5.2",
+      "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+      "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8=",
+      "engines": {
+        "node": ">= 0.6.0"
+      }
+    },
     "node_modules/xml2js": {
       "version": "0.4.23",
       "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
@@ -19158,7 +19429,6 @@
       "version": "6.26.0",
       "resolved": "https://registry.npmjs.org/babel-runtime/-/babel-runtime-6.26.0.tgz",
       "integrity": "sha1-llxwWGaOgrVde/4E/yM3vItWR/4=",
-      "dev": true,
       "requires": {
         "core-js": "^2.4.0",
         "regenerator-runtime": "^0.11.0"
@@ -19167,8 +19437,7 @@
         "regenerator-runtime": {
           "version": "0.11.1",
           "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
-          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg==",
-          "dev": true
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
         }
       }
     },
@@ -20031,8 +20300,7 @@
     "core-js": {
       "version": "2.6.12",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.12.tgz",
-      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
-      "dev": true
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
     },
     "core-util-is": {
       "version": "1.0.3",
@@ -20966,6 +21234,11 @@
         "next-tick": "~1.0.0"
       }
     },
+    "es5-shim": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-4.6.2.tgz",
+      "integrity": "sha512-n0XTVMGps+Deyr38jtqKPR5F5hb9owYeRQcKJW39eFvzUk/u/9Ww315werRzbiNMnHCUw/YHDPBphTlEnzdi+A=="
+    },
     "es6-iterator": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/es6-iterator/-/es6-iterator-2.0.3.tgz",
@@ -23849,6 +24122,11 @@
       "resolved": "https://registry.npmjs.org/parenthesis/-/parenthesis-3.1.8.tgz",
       "integrity": "sha512-KF/U8tk54BgQewkJPvB4s/US3VQY68BRDpH638+7O/n58TpnwiwnOtGIOsT2/i+M78s61BBpeC83STB88d8sqw=="
     },
+    "parse-headers": {
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.4.tgz",
+      "integrity": "sha512-psZ9iZoCNFLrgRjZ1d8mn0h9WRqJwFxM9q3x7iUjN/YT2OksthDJ5TiPCu2F38kS4zutqfW+YdVVkBZZx3/1aw=="
+    },
     "parse-json": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-4.0.0.tgz",
@@ -25948,6 +26226,11 @@
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
       "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
     },
+    "tsml": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/tsml/-/tsml-1.0.1.tgz",
+      "integrity": "sha1-ifghi52eJX9H1/a1bQHFpNLGj8M="
+    },
     "tsutils": {
       "version": "3.21.0",
       "resolved": "https://registry.npmjs.org/tsutils/-/tsutils-3.21.0.tgz",
@@ -26964,11 +27247,181 @@
         "videojs-vtt.js": "^0.15.3"
       }
     },
+    "videojs-contrib-hls": {
+      "version": "5.15.0",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-hls/-/videojs-contrib-hls-5.15.0.tgz",
+      "integrity": "sha512-18zbMYZ0XRBKTPEayA9bFTWWrqhT9b4G8+zf0czJLD7Epe5PcK1I/3dflTHQeQ5rwlWir+/XnFU3sMg/B2MMcw==",
+      "requires": {
+        "aes-decrypter": "1.0.3",
+        "global": "^4.3.0",
+        "m3u8-parser": "2.1.0",
+        "mux.js": "4.3.2",
+        "url-toolkit": "^2.1.3",
+        "video.js": "^5.19.1 || ^6.2.0",
+        "videojs-contrib-media-sources": "4.7.2",
+        "webwackify": "0.1.6"
+      },
+      "dependencies": {
+        "aes-decrypter": {
+          "version": "1.0.3",
+          "resolved": "https://registry.npmjs.org/aes-decrypter/-/aes-decrypter-1.0.3.tgz",
+          "integrity": "sha1-nAa4pUNaWtCduTP4oBSvzxhMw04=",
+          "requires": {
+            "pkcs7": "^0.2.3"
+          }
+        },
+        "global": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+          "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "~0.5.1"
+          }
+        },
+        "m3u8-parser": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/m3u8-parser/-/m3u8-parser-2.1.0.tgz",
+          "integrity": "sha1-yBcDKewc1RXQ1Yu4t2LamJbLA2g="
+        },
+        "mux.js": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+          "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+        },
+        "pkcs7": {
+          "version": "0.2.3",
+          "resolved": "https://registry.npmjs.org/pkcs7/-/pkcs7-0.2.3.tgz",
+          "integrity": "sha1-ItYGZtAQZcXyRDkJjkpIMEUic74="
+        },
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        },
+        "video.js": {
+          "version": "6.13.0",
+          "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
+          "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
+          "requires": {
+            "babel-runtime": "^6.9.2",
+            "global": "4.3.2",
+            "safe-json-parse": "4.0.0",
+            "tsml": "1.0.1",
+            "videojs-font": "2.1.0",
+            "videojs-ie8": "1.1.2",
+            "videojs-vtt.js": "0.12.6",
+            "xhr": "2.4.0"
+          }
+        },
+        "videojs-font": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
+          "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
+        },
+        "videojs-vtt.js": {
+          "version": "0.12.6",
+          "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+          "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+          "requires": {
+            "global": "^4.3.1"
+          }
+        }
+      }
+    },
+    "videojs-contrib-media-sources": {
+      "version": "4.7.2",
+      "resolved": "https://registry.npmjs.org/videojs-contrib-media-sources/-/videojs-contrib-media-sources-4.7.2.tgz",
+      "integrity": "sha512-e6iCHWBFuV05EGo7v+pS9iepObXnJ9joms467gzi8ZjpKVb3ifha9M0Ja24Rd8JfvYpzjltsgDVtGFDvIg4hQQ==",
+      "requires": {
+        "global": "^4.3.0",
+        "mux.js": "4.3.2",
+        "video.js": "^5.17.0 || ^6.2.0",
+        "webwackify": "0.1.6"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+          "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "~0.5.1"
+          }
+        },
+        "mux.js": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/mux.js/-/mux.js-4.3.2.tgz",
+          "integrity": "sha512-g0q6DPdvb3yYcoK7ElBGobdSSrhY/RjPt19U7uUc733aqvc5bCS/aCvL9z+448y+IoCZnYDwyZfQBBXMSmGOaQ=="
+        },
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        },
+        "video.js": {
+          "version": "6.13.0",
+          "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
+          "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
+          "requires": {
+            "babel-runtime": "^6.9.2",
+            "global": "4.3.2",
+            "safe-json-parse": "4.0.0",
+            "tsml": "1.0.1",
+            "videojs-font": "2.1.0",
+            "videojs-ie8": "1.1.2",
+            "videojs-vtt.js": "0.12.6",
+            "xhr": "2.4.0"
+          }
+        },
+        "videojs-font": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
+          "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
+        },
+        "videojs-vtt.js": {
+          "version": "0.12.6",
+          "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+          "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+          "requires": {
+            "global": "^4.3.1"
+          }
+        }
+      }
+    },
+    "videojs-flash": {
+      "version": "2.2.1",
+      "resolved": "https://registry.npmjs.org/videojs-flash/-/videojs-flash-2.2.1.tgz",
+      "integrity": "sha512-mHu6TD12EKkxMvr8tg4AcfV/DuVLff427nneoZom3N9Dd2bv0sJOWwdLPQH1v5BCuAuXAVuAOba56ovTl+G3tQ==",
+      "requires": {
+        "global": "^4.4.0",
+        "video.js": "^6 || ^7",
+        "videojs-swf": "5.4.2"
+      }
+    },
     "videojs-font": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-3.2.0.tgz",
       "integrity": "sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA=="
     },
+    "videojs-hotkeys": {
+      "version": "0.2.27",
+      "resolved": "https://registry.npmjs.org/videojs-hotkeys/-/videojs-hotkeys-0.2.27.tgz",
+      "integrity": "sha512-pwtm1QocRmzJy1PWQsmFVHyeldYHHpLdeATK3FsFHVMmNpz6CROkAn8TFy2UILr8Ghgq134K8jEKNue8HWpudQ=="
+    },
+    "videojs-ie8": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/videojs-ie8/-/videojs-ie8-1.1.2.tgz",
+      "integrity": "sha1-oj09hgitcZK2nGB3/E64SJmNNdk=",
+      "requires": {
+        "es5-shim": "^4.5.1"
+      }
+    },
+    "videojs-swf": {
+      "version": "5.4.2",
+      "resolved": "https://registry.npmjs.org/videojs-swf/-/videojs-swf-5.4.2.tgz",
+      "integrity": "sha512-FGg+Csioa8/A/EacvFefBdb9Z0rSiMlheHDunZnN3xXfUF43jvjawcWFQnZvrv1Cs1nE1LBrHyUZjF7j2mKOLw=="
+    },
     "videojs-vtt.js": {
       "version": "0.15.3",
       "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.15.3.tgz",
@@ -27299,21 +27752,11 @@
       "integrity": "sha512-xYA8MkZynPBGd/w5QFJ2d/NM0z/YeegMqYTphy7NJQXbZcuU6FC6AOdUAcy4SXP+YnkerC6AfH+ldg7PDk9ESQ==",
       "requires": {}
     },
-    "vue-ribbon": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/vue-ribbon/-/vue-ribbon-1.0.1.tgz",
-      "integrity": "sha512-2YPMujiCsZcNa4MZXGQmg9IOkZQMShUHRGnbZycRYrBLJ2PoCJGl22jf9ld+B7PrSbmKCQqdkyXCtjih5gfuYw=="
-    },
     "vue-router": {
       "version": "3.5.3",
       "resolved": "https://registry.npmjs.org/vue-router/-/vue-router-3.5.3.tgz",
       "integrity": "sha512-FUlILrW3DGitS2h+Xaw8aRNvGTwtuaxrRkNSHWTizOfLUie7wuYwezeZ50iflRn8YPV5kxmU2LQuu3nM/b3Zsg=="
     },
-    "vue-script2": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/vue-script2/-/vue-script2-2.1.0.tgz",
-      "integrity": "sha512-EDUOjQBFvhkJXwmWuUR9ijlF7/4JtmvjXSKaHSa/LNTMy9ltjgKgYB68aqlxgq8ORdSxowd5eo24P1syjZJnBA=="
-    },
     "vue-slide-bar": {
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/vue-slide-bar/-/vue-slide-bar-1.2.0.tgz",
@@ -27371,18 +27814,60 @@
         "vscode-vue-languageservice": "^0.27.0"
       }
     },
-    "vue-videojs7": {
-      "version": "1.0.2",
-      "resolved": "https://registry.npmjs.org/vue-videojs7/-/vue-videojs7-1.0.2.tgz",
-      "integrity": "sha512-6CP4aSETZX9CLFVhNtnbCYXKUsvuPWyLhE95HCP4SB4c9vCdExlTdNb/ozEX9pNEJAVsa6GjIGVdW53AZfA/mQ==",
+    "vue-video-player": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/vue-video-player/-/vue-video-player-5.0.2.tgz",
+      "integrity": "sha512-IZXeRGGSX4YIp54G0Q5cB7iqh6Ok6Dpa2jRkjdyvMWw7MShJuh54/d5QNb1CZ+CvZUzX/TH7osnpir7mBNcFvQ==",
       "requires": {
-        "@videojs/vhs-utils": "^3.0.0",
-        "video.js": "^7.11.6",
-        "vue": "^2.6.12",
-        "vue-ribbon": "^1.0.1",
-        "vue-router": "^3.5.1",
-        "vue-script2": "^2.1.0",
-        "vuex": "^3.6.2"
+        "object-assign": "^4.1.1",
+        "video.js": "^6.6.0",
+        "videojs-contrib-hls": "^5.12.2",
+        "videojs-flash": "^2.1.0",
+        "videojs-hotkeys": "^0.2.20"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+          "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "~0.5.1"
+          }
+        },
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        },
+        "video.js": {
+          "version": "6.13.0",
+          "resolved": "https://registry.npmjs.org/video.js/-/video.js-6.13.0.tgz",
+          "integrity": "sha512-36/JR/GhPQSZj0o+GNbhcEYv/b0SkV9SQsjlodAnzMQYN0TA7VhmqrKPYMCi1NGRYu7S9W3OaFCFoUxkYfSVlg==",
+          "requires": {
+            "babel-runtime": "^6.9.2",
+            "global": "4.3.2",
+            "safe-json-parse": "4.0.0",
+            "tsml": "1.0.1",
+            "videojs-font": "2.1.0",
+            "videojs-ie8": "1.1.2",
+            "videojs-vtt.js": "0.12.6",
+            "xhr": "2.4.0"
+          }
+        },
+        "videojs-font": {
+          "version": "2.1.0",
+          "resolved": "https://registry.npmjs.org/videojs-font/-/videojs-font-2.1.0.tgz",
+          "integrity": "sha1-olkwpn9snPvyu4jay4xrRR8JM3k="
+        },
+        "videojs-vtt.js": {
+          "version": "0.12.6",
+          "resolved": "https://registry.npmjs.org/videojs-vtt.js/-/videojs-vtt.js-0.12.6.tgz",
+          "integrity": "sha512-XFXeGBQiljnElMhwCcZst0RDbZn2n8LU7ZScXryd3a00OaZsHAjdZu/7/RdSr7Z1jHphd45FnOvOQkGK4YrWCQ==",
+          "requires": {
+            "global": "^4.3.1"
+          }
+        }
       }
     },
     "vuera": {
@@ -27483,6 +27968,11 @@
       "dev": true,
       "peer": true
     },
+    "webwackify": {
+      "version": "0.1.6",
+      "resolved": "https://registry.npmjs.org/webwackify/-/webwackify-0.1.6.tgz",
+      "integrity": "sha512-pGcw1T3HpNnM/UTRQqqRkkkzythSLts05mB+7Gr00B+0VbL0m39dFL5g20rSIEUt9Wrpw+/8k+snxRlUFHhcqA=="
+    },
     "whatwg-url": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
@@ -27604,6 +28094,33 @@
       "resolved": "https://registry.npmjs.org/wrappy/-/wrappy-1.0.2.tgz",
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8="
     },
+    "xhr": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/xhr/-/xhr-2.4.0.tgz",
+      "integrity": "sha1-4W5mpF+GmGHu76tBbV7/ci3ECZM=",
+      "requires": {
+        "global": "~4.3.0",
+        "is-function": "^1.0.1",
+        "parse-headers": "^2.0.0",
+        "xtend": "^4.0.0"
+      },
+      "dependencies": {
+        "global": {
+          "version": "4.3.2",
+          "resolved": "https://registry.npmjs.org/global/-/global-4.3.2.tgz",
+          "integrity": "sha1-52mJJopsdMOJCLEwWxD8DjlOnQ8=",
+          "requires": {
+            "min-document": "^2.19.0",
+            "process": "~0.5.1"
+          }
+        },
+        "process": {
+          "version": "0.5.2",
+          "resolved": "https://registry.npmjs.org/process/-/process-0.5.2.tgz",
+          "integrity": "sha1-FjjYqONML0QKkduVq5rrZ3/Bhc8="
+        }
+      }
+    },
     "xml2js": {
       "version": "0.4.23",
       "resolved": "https://registry.npmjs.org/xml2js/-/xml2js-0.4.23.tgz",
diff --git a/package.json b/package.json
index fe0e5fba..dac5e4e9 100644
--- a/package.json
+++ b/package.json
@@ -74,7 +74,7 @@
     "vue-router": "^3.5.3",
     "vue-slide-bar": "^1.2.0",
     "vue-slider-component": "^3.1.2",
-    "vue-videojs7": "^1.0.2",
+    "vue-video-player": "^5.0.2",
     "vuera": "^0.2.7",
     "vuex": "^3.1.3",
     "xml2js": "^0.4.23",
diff --git a/src/plugins/pluginRegistry.ts b/src/plugins/pluginRegistry.ts
index 506db5a6..214fa07b 100644
--- a/src/plugins/pluginRegistry.ts
+++ b/src/plugins/pluginRegistry.ts
@@ -10,7 +10,7 @@ import ShapeFile from '@/plugins/shape-file/ShapeFile.vue'
 // import AggregateOd from '@/plugins/aggregate-od/AggregateOd.vue'
 import SankeyDiagram from '@/plugins/sankey/SankeyDiagram.vue'
 import VegaLite from '@/plugins/vega-lite/VegaLite.vue'
-// import VideoPlayer from '@/plugins/video-player/VideoPlayer.vue'
+import VideoPlayer from '@/plugins/video-player/VideoPlayer.vue'
 import ImageView from '@/plugins/image/ImageView.vue'
 
 // // EVERY plugin must be registered here:
@@ -18,15 +18,15 @@ const plugins = {
   CarrierViewer,
   VehicleAnimation,
   XyHexagons,
-  //   AgentAnimation,
+  // AgentAnimation,
   LinksGl,
   //   LinkVolumes,
   ShapeFile,
   SankeyDiagram,
   VegaLite,
   //   AggregateOd,
-  //   TransitDemand,
-  //   VideoPlayer,
+  // TransitDemand,
+  VideoPlayer,
   ImageView,
 }
 
diff --git a/src/plugins/video-player/VideoPlayer.vue b/src/plugins/video-player/VideoPlayer.vue
index eedb09f9..08c8b9d6 100644
--- a/src/plugins/video-player/VideoPlayer.vue
+++ b/src/plugins/video-player/VideoPlayer.vue
@@ -13,37 +13,27 @@
 </template>
 
 <script lang="ts">
-'use strict'
-
 import { Vue, Component, Prop, Watch } from 'vue-property-decorator'
-import readBlob from 'read-blob'
-import { VideoPlayer } from 'vue-videojs7'
+import { videoPlayer } from 'vue-video-player'
+
+import '~/video.js/dist/video-js.min.css'
 
 import globalStore from '@/store'
-import { FileSystem, FileSystemConfig, VisualizationPlugin } from '../../Globals'
+import { FileSystem, FileSystemConfig, VisualizationPlugin } from '@/Globals'
 import HTTPFileSystem from '@/js/HTTPFileSystem'
 
-@Component({
-  components: { VideoPlayer },
-})
+@Component({ components: { videoPlayer } })
 class MyComponent extends Vue {
-  @Prop({ required: false })
-  private fileApi!: FileSystem
-
-  @Prop({ required: false })
-  private subfolder!: string
-
-  @Prop({ required: false })
-  private yamlConfig!: string
-
-  @Prop({ required: false })
-  private thumbnail!: boolean
-
-  private globalState = globalStore.state
+  @Prop({ required: true }) private root!: string
+  @Prop({ required: true }) private subfolder!: string
+  @Prop({ required: true }) private yamlConfig!: string
+  @Prop({ required: true }) private thumbnail!: boolean
 
   private movieSource = ''
   private title = ''
 
+  private fileApi?: FileSystemConfig
+
   // videojs options
   private playerOptions = {
     muted: false,
@@ -58,32 +48,33 @@ class MyComponent extends Vue {
   }
 
   private myState = {
-    fileApi: this.fileApi,
     subfolder: this.subfolder,
     yamlConfig: this.yamlConfig,
     thumbnail: this.thumbnail,
     imageData: '',
   }
 
-  public destroyed() {
+  public beforeDestroy() {
     window.removeEventListener('resize', this.onResize)
-
     if (!this.thumbnail) globalStore.commit('setFullScreen', false)
   }
 
   public mounted() {
     if (!this.thumbnail) globalStore.commit('setFullScreen', true)
 
+    this.fileApi = this.getFileSystem(this.root)
+
     if (!this.yamlConfig) {
       this.buildRouteFromUrl()
     } else {
-      const filesystem = this.getFileSystem(this.$route.name as string)
-      this.buildMovieSource(filesystem.slug, this.subfolder + '/', this.yamlConfig)
+      this.myState.subfolder = this.subfolder
+      this.myState.yamlConfig = this.yamlConfig
+      this.buildMovieSource()
     }
 
     this.getVizDetails()
 
-    if (!this.thumbnail) this.generateBreadcrumbs()
+    // if (!this.thumbnail) this.generateBreadcrumbs()
     if (!this.thumbnail) window.addEventListener('resize', this.onResize)
   }
 
@@ -97,8 +88,8 @@ class MyComponent extends Vue {
     this.getVizDetails()
   }
 
-  private buildMovieSource(url: string, subfolder: string, config: string) {
-    this.movieSource = `${url}/${subfolder}${config}`
+  private buildMovieSource() {
+    this.movieSource = `${this.fileApi?.baseURL}/${this.myState.subfolder}/${this.myState.yamlConfig}`
 
     this.playerOptions.sources.push({
       type: 'video/mp4',
@@ -107,12 +98,9 @@ class MyComponent extends Vue {
   }
 
   private getFileSystem(name: string) {
-    let svnProject: FileSystemConfig[] = globalStore.state.svnProjects.filter(
+    const svnProject: FileSystemConfig[] = this.$store.state.svnProjects.filter(
       (a: FileSystemConfig) => a.slug === name
     )
-    if (svnProject.length === 0) {
-      svnProject = globalStore.state.svnProjects.filter((a: any) => a.url === name.substring(8))
-    }
     if (svnProject.length === 0) {
       console.log('no such project')
       throw Error
@@ -121,7 +109,7 @@ class MyComponent extends Vue {
   }
 
   // this happens if viz is the full page, not a thumbnail on a project page
-  private buildRouteFromUrl() {
+  private async buildRouteFromUrl() {
     const params = this.$route.params
     if (!params.project || !params.pathMatch) {
       console.log('I CANT EVEN: NO PROJECT/PARHMATCH')
@@ -129,8 +117,7 @@ class MyComponent extends Vue {
     }
 
     // project filesystem
-    const filesystem = this.getFileSystem(params.project)
-    this.myState.fileApi = new HTTPFileSystem(filesystem)
+    this.fileApi = this.getFileSystem(params.project)
 
     // subfolder and config file
     const sep = 1 + params.pathMatch.lastIndexOf('/')
@@ -140,7 +127,7 @@ class MyComponent extends Vue {
     this.myState.subfolder = subfolder
     this.myState.yamlConfig = config
 
-    this.buildMovieSource(filesystem.slug, subfolder, config)
+    this.buildMovieSource()
   }
 
   private aspect = 0
@@ -227,8 +214,6 @@ export default MyComponent
 </script>
 
 <style scoped lang="scss">
-@import '~/video.js/dist/video-js.min.css';
-
 #container {
   display: flex;
   flex-direction: column;
diff --git a/src/shims-vue.d.ts b/src/shims-vue.d.ts
index c0353f4c..25a40066 100644
--- a/src/shims-vue.d.ts
+++ b/src/shims-vue.d.ts
@@ -44,7 +44,7 @@ declare module 'reproject'
 declare module 'shp-write'
 declare module 'vue-slide-bar'
 declare module 'vue-table-component'
-declare module 'vue-videojs7'
+declare module 'vue-video-player'
 declare module 'vuera'
 declare module 'zip-loader'
 declare module 'react-toggle'