dynamic plyr source

ui/src/components/BDay.vue

@@ -1,16 +1,18 @@
 <template>
   <div id="bday">
     <h1>Alles Gute zu Deinem Geburtstag!</h1>
-    <img id="play" v-if=play_visible src="../assets/play.png" usemap="#play" />
+    <img id="play" v-if="playVisible" src="../assets/play.png" usemap="#play" />
     <map name="#play">
-      <area shape="circle" coords="50,50,50" />
+      <area shape="circle" coords="50, 50, 50" />
     </map>
-    <vue-plyr :options="plyr_options" :emit="['timeupdate']" @timeupdate="videoTimeUpdated">
+    <vue-plyr
-      <video poster="../assets/poster.png">
+      ref="plyr"
-        <source src="/fake_api/part1_240.mp4" type="video/mp4" size="240" />
+      :options="plyrOptions"
-        <source src="/fake_api/part1_360.mp4" type="video/mp4" size="360" />
+      :emit="['timeupdate']"
-        <source src="/fake_api/part1_480.mp4" type="video/mp4" size="480" />
+      @timeupdate="videoTimeUpdated"
-      </video>
+    >
+      <!-- inserted dynamically -->
+      <video />
     </vue-plyr>
   </div>
 </template>
@@ -20,9 +22,9 @@ export default {
   name: "BDay",
 
   data: () => ({
-    play_visible: false,
+    playVisible: false,
 
-    plyr_options: {
+    plyrOptions: {
       autoplay: true,
       clickToPlay: false,
       keyboard: { focused: false, global: false },
@@ -31,18 +33,43 @@ export default {
     },
   }),
 
+  computed: {
+    player() {
+      return this.$refs.plyr.player;
+    },
+  },
+
   methods: {
+    getVideoSource: function (name) {
+      let source = {
+        type: "video",
+        poster: "../assets/poster.png",
+        sources: [],
+      };
+
+      for (const height of [240, 360, 480]) {
+        source.sources.push({
+          src: "/fake_api/" + name + "_" + height + ".mp4",
+          type: "video/mp4",
+          size: height,
+        });
+      }
+
+      return source;
+    },
+
     videoTimeUpdated: function (event) {
       // show play button after 3 seconds, then disable event
       if (event.timeStamp > 3000) {
-        this.play_visible = true;
+        this.playVisible = true;
         this.videoTimeUpdated = () => true;
       }
-    }
+    },
   },
 
   mounted() {
     document.title = "Herzlichen Glückwunsch!";
+    this.player.source = this.getVideoSource("part1");
   },
 };
 </script>
@@ -57,7 +84,7 @@ div#bday {
 img#play {
   outline: none;
 
-  -webkit-user-select: none; /* Safari */        
+  -webkit-user-select: none; /* Safari */
   -moz-user-select: none; /* Firefox */
   -ms-user-select: none; /* IE10+/Edge */
   user-select: none; /* Standard */
@@ -68,7 +95,7 @@ img#play {
   z-index: 1001;
 }
 
-map area{
+map area {
   outline: none;
   cursor: pointer;
 }