play both videos

ui/public/fake_api/resize

@@ -0,0 +1,32 @@
+#!/bin/bash
+
+# complain if no input file given
+if [ $# -lt 1 ]; then
+    >&2 echo "usage: $0 <input_file>"
+    exit 1
+fi
+
+# get input video name
+input="${1}"
+shift 1
+
+# without file extension
+output_base="${input%.*}"
+
+# common video resolutions
+heights=(240 360 480)
+widths=(426 640 854)
+
+# just a quick-and-dirty loop
+for index in $(seq 0 2); do
+    height="${heights[$index]}"
+    width="${widths[$index]}"
+
+    # actual conversion
+    ffmpeg -i "${input}" \
+        -acodec aac -vcodec h264 \
+        -vf "scale=w=${width}:h=${height}:force_original_aspect_ratio=decrease,pad=${width}:${height}:(ow-iw)/2:(oh-ih)/2" \
+        "${output_base}_${height}.mp4"
+done
+
+exit 0

ui/src/App.vue

@@ -35,7 +35,7 @@ html {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: #34214f;
   margin-top: 60px;
 }
 </style>

ui/src/components/BDay.vue

@@ -1,12 +1,18 @@
 <template>
-  <div class="bday">
+  <div id="bday">
     <h1>Alles Gute zu Deinem Geburtstag!</h1>
-    <vue-plyr :options="plyr_options">
-      <video poster="../assets/poster.png" autoplay="true">
-        <source src="/fake_api/part1_240.mp4" type="video/mp4" size="240" />
-        <source src="/fake_api/part1_360.mp4" type="video/mp4" size="360" />
-        <source src="/fake_api/part1_480.mp4" type="video/mp4" size="480" />
-      </video>
+    <img id="play" src="../assets/play.png" usemap="#play" v-if="playVisible" />
+    <map name="#play">
+      <area shape="circle" coords="50, 50, 50" @click="playClicked" />
+    </map>
+    <vue-plyr
+      ref="plyr"
+      :options="plyrOptions"
+      :emit="['timeupdate']"
+      @timeupdate="videoTimeUpdated"
+    >
+      <!-- inserted dynamically -->
+      <video />
     </vue-plyr>
   </div>
 </template>
@@ -16,7 +22,12 @@ export default {
   name: "BDay",
 
   data: () => ({
-    plyr_options: {
+    sourceNames: ["part1", "part2"],
+    playing: null,
+
+    playVisible: true,
+
+    plyrOptions: {
       clickToPlay: false,
       keyboard: { focused: false, global: false },
       controls: ["mute", "volume", "settings", "airplay", "fullscreen"],
@@ -24,15 +35,93 @@ export default {
     },
   }),
 
-  mounted: () => {
+  computed: {
+    player() {
+      return this.$refs.plyr.player;
+    },
+  },
+
+  methods: {
+    getVideoSource: function (index) {
+      let source = {
+        type: "video",
+        poster: "../assets/poster.png",
+        sources: [],
+      };
+
+      for (const height of [240, 360, 480]) {
+        source.sources.push({
+          src: "/fake_api/" + this.sourceNames[index] + "_" + height + ".mp4",
+          type: "video/mp4",
+          size: height,
+        });
+      }
+
+      return source;
+    },
+
+    videoTimeUpdated: function (event) {
+      // show play button after 3 seconds, then disable this event
+      if (event.timeStamp > 3000) {
+        this.playVisible = true;
+        this.videoTimeUpdated = () => true;
+      }
+    },
+
+    playClicked: function () {
+      this.playVisible = false;
+
+      switch (this.playing) {
+        case null:
+          // nothing playing: play first source
+          this.playing = 0;
+          this.player.play();
+          break;
+
+        case 0:
+          // first source playing: play second source
+          this.playing = 1;
+          this.player.source = this.getVideoSource(1);
+          this.player.play();
+          break;
+      
+        default:
+          console.log("ERROR: Stranger things are starting to begin!");
+          break;
+      }
+    },
+  },
+
+  mounted() {
     document.title = "Herzlichen Glückwunsch!";
+    this.player.source = this.getVideoSource(0);
   },
 };
 </script>
 
 <style scoped>
-div.bday {
+div#bday {
   margin: auto;
-  max-width: 850px;
+  width: 854px;
+  position: relative;
+}
+
+img#play {
+  outline: none;
+
+  -webkit-user-select: none; /* Safari */
+  -moz-user-select: none; /* Firefox */
+  -ms-user-select: none; /* IE10+/Edge */
+  user-select: none; /* Standard */
+
+  position: absolute;
+  bottom: 190px;
+  left: 377px;
+  z-index: 1001;
+}
+
+map area {
+  outline: none;
+  cursor: pointer;
 }
 </style>