Lenaisten/bday2020
2
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

play both videos

Browse source
This commit is contained in:
Jörn-Michael Miehe 2020-09-06 17:32:49 +02:00
parent 200ebd13e0
commit 5a3a26139a
1 changed files with 33 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

41
ui/src/components/BDay.vue
View file

@ -1,9 +1,9 @@
<template> <template>
<div id="bday"> <div id="bday">
<h1>Alles Gute zu Deinem Geburtstag!</h1> <h1>Alles Gute zu Deinem Geburtstag!</h1>
<img id="play" v-if="playVisible" src="../assets/play.png" usemap="#play" /> <img id="play" src="../assets/play.png" usemap="#play" v-if="playVisible" />
<map name="#play"> <map name="#play">
<area shape="circle" coords="50, 50, 50" /> <area shape="circle" coords="50, 50, 50" @click="playClicked" />
</map> </map>
<vue-plyr <vue-plyr
ref="plyr" ref="plyr"
@ -22,10 +22,12 @@ export default {
name: "BDay", name: "BDay",
data: () => ({ data: () => ({
playVisible: false, sourceNames: ["part1", "part2"],
playing: null,
playVisible: true,
plyrOptions: { plyrOptions: {
autoplay: true,
clickToPlay: false, clickToPlay: false,
keyboard: { focused: false, global: false }, keyboard: { focused: false, global: false },
controls: ["mute", "volume", "settings", "airplay", "fullscreen"], controls: ["mute", "volume", "settings", "airplay", "fullscreen"],
@ -40,7 +42,7 @@ export default {
}, },
methods: { methods: {
getVideoSource: function (name) { getVideoSource: function (index) {
let source = { let source = {
type: "video", type: "video",
poster: "../assets/poster.png", poster: "../assets/poster.png",
@ -49,7 +51,7 @@ export default {
for (const height of [240, 360, 480]) { for (const height of [240, 360, 480]) {
source.sources.push({ source.sources.push({
src: "/fake_api/" + name + "_" + height + ".mp4", src: "/fake_api/" + this.sourceNames[index] + "_" + height + ".mp4",
type: "video/mp4", type: "video/mp4",
size: height, size: height,
}); });
@ -59,17 +61,40 @@ export default {
}, },
videoTimeUpdated: function (event) { videoTimeUpdated: function (event) {
// show play button after 3 seconds, then disable event // show play button after 3 seconds, then disable this event
if (event.timeStamp > 3000) { if (event.timeStamp > 3000) {
this.playVisible = true; this.playVisible = true;
this.videoTimeUpdated = () => 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() { mounted() {
document.title = "Herzlichen Glückwunsch!"; document.title = "Herzlichen Glückwunsch!";
this.player.source = this.getVideoSource("part1"); this.player.source = this.getVideoSource(0);
}, },
}; };
</script> </script>