116 lines
2.3 KiB
Vue
116 lines
2.3 KiB
Vue
<template>
|
|
<div id="bday">
|
|
<h1>Alles Gute zu Deinem Geburtstag!</h1>
|
|
<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', 'ready']"
|
|
@timeupdate="videoTimeUpdated"
|
|
@ready="videoLoaded"
|
|
>
|
|
<!-- inserted dynamically -->
|
|
<video poster="../assets/poster.png" />
|
|
</vue-plyr>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: "BDay",
|
|
|
|
data: () => ({
|
|
videoQueue: ["part1", "part2"],
|
|
currentVideo: -1,
|
|
|
|
playVisible: true,
|
|
|
|
plyrOptions: {
|
|
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 (index) {
|
|
let source = {
|
|
type: "video",
|
|
sources: [],
|
|
};
|
|
|
|
for (const height of [240, 360, 480]) {
|
|
source.sources.push({
|
|
src: "/fake_api/" + this.videoQueue[index] + "_" + height + ".mp4",
|
|
type: "video/mp4",
|
|
size: height,
|
|
});
|
|
}
|
|
|
|
return source;
|
|
},
|
|
|
|
videoTimeUpdated: function () {
|
|
// show play button after 3 seconds, then disable this event
|
|
if (this.player.currentTime > 3) {
|
|
this.playVisible = true;
|
|
this.videoTimeUpdated = () => true;
|
|
}
|
|
},
|
|
|
|
videoLoaded: function () {
|
|
if (this.currentVideo >= 0) {
|
|
this.player.play();
|
|
}
|
|
},
|
|
|
|
playClicked: function () {
|
|
this.playVisible = false;
|
|
|
|
this.currentVideo += 1;
|
|
this.player.source = this.getVideoSource(this.currentVideo);
|
|
},
|
|
},
|
|
|
|
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>
|