bday2020/ui/src/components/BDay.vue

<template>
  <div id="bday">
    <h1>Alles Gute zu Deinem Geburtstag!</h1>
    <img id="play" v-if=play_visible src="../assets/play.png" usemap="#play" />
    <map name="#play">
      <area shape="circle" coords="50,50,50" />
    </map>
    <vue-plyr :options="plyr_options" :emit="['timeupdate']" @timeupdate="videoTimeUpdated">
      <video poster="../assets/poster.png">
        <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>
    </vue-plyr>
  </div>
</template>

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

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

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

  methods: {
    videoTimeUpdated: function (event) {
      // show play button after 3 seconds, then disable event
      if (event.timeStamp > 3000) {
        this.play_visible = true;
        this.videoTimeUpdated = () => true;
      }
    }
  },

  mounted() {
    document.title = "Herzlichen Glückwunsch!";
  },
};
</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>