bday2020/ui/src/components/BDay.vue

<template>
  <div id="bday">
    <h1>Alles Gute zu Deinem Geburtstag!</h1>
    <img id="play" v-if="playVisible" src="../assets/play.png" usemap="#play" />
    <map name="#play">
      <area shape="circle" coords="50, 50, 50" />
    </map>
    <vue-plyr
      ref="plyr"
      :options="plyrOptions"
      :emit="['timeupdate']"
      @timeupdate="videoTimeUpdated"
    >
      <!-- inserted dynamically -->
      <video />
    </vue-plyr>
  </div>
</template>

<script>
export default {
  name: "BDay",

  data: () => ({
    playVisible: false,

    plyrOptions: {
      autoplay: true,
      clickToPlay: false,
      keyboard: { focused: false, global: false },
      controls: ["mute", "volume", "settings", "airplay", "fullscreen"],
      settings: ["quality"],
    },
  }),

  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.playVisible = true;
        this.videoTimeUpdated = () => true;
      }
    },
  },

  mounted() {
    document.title = "Herzlichen Glückwunsch!";
    this.player.source = this.getVideoSource("part1");
  },
};
</script>

<style scoped>
div#bday {
  margin: auto;
  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>