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

dynamic plyr source

Browse source
This commit is contained in:
Jörn-Michael Miehe 2020-09-06 17:14:51 +02:00
parent 5991de20b3
commit 200ebd13e0
1 changed files with 41 additions and 14 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -1,16 +1,18 @@
<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=play_visible src="../assets/play.png" usemap="#play" /> <img id="play" v-if="playVisible" src="../assets/play.png" usemap="#play" />
<map name="#play"> <map name="#play">
<area shape="circle" coords="50,50,50" /> <area shape="circle" coords="50, 50, 50" />
</map> </map>
<vue-plyr :options="plyr_options" :emit="['timeupdate']" @timeupdate="videoTimeUpdated"> <vue-plyr
<video poster="../assets/poster.png"> ref="plyr"
<source src="/fake_api/part1_240.mp4" type="video/mp4" size="240" /> :options="plyrOptions"
<source src="/fake_api/part1_360.mp4" type="video/mp4" size="360" /> :emit="['timeupdate']"
<source src="/fake_api/part1_480.mp4" type="video/mp4" size="480" /> @timeupdate="videoTimeUpdated"
</video> >
<!-- inserted dynamically -->
<video />
</vue-plyr> </vue-plyr>
</div> </div>
</template> </template>
@ -20,9 +22,9 @@ export default {
name: "BDay", name: "BDay",
data: () => ({ data: () => ({
play_visible: false, playVisible: false,
plyr_options: { plyrOptions: {
autoplay: true, autoplay: true,
clickToPlay: false, clickToPlay: false,
keyboard: { focused: false, global: false }, keyboard: { focused: false, global: false },
@ -31,18 +33,43 @@ export default {
}, },
}), }),
computed: {
player() {
return this.$refs.plyr.player;
},
},
methods: { 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) { videoTimeUpdated: function (event) {
// show play button after 3 seconds, then disable event // show play button after 3 seconds, then disable event
if (event.timeStamp > 3000) { if (event.timeStamp > 3000) {
this.play_visible = true; this.playVisible = true;
this.videoTimeUpdated = () => true; this.videoTimeUpdated = () => true;
} }
} },
}, },
mounted() { mounted() {
document.title = "Herzlichen Glückwunsch!"; document.title = "Herzlichen Glückwunsch!";
this.player.source = this.getVideoSource("part1");
}, },
}; };
</script> </script>
@ -68,7 +95,7 @@ img#play {
z-index: 1001; z-index: 1001;
} }
map area{ map area {
outline: none; outline: none;
cursor: pointer; cursor: pointer;
} }