VueTube/NUXT/components/Player/seekbar.vue

35 lines
638 B
Vue
Raw Normal View History

<template>
2022-05-21 02:01:39 +00:00
<v-progress-linear
active
background-color="primary"
background-opacity="0.5"
:buffer-value="buffered"
color="primary"
height="3"
query
:value="percentage"
/>
</template>
<script>
export default {
props: ["video"],
data() {
return {
percentage: 0,
2022-05-21 02:01:39 +00:00
buffered: 0,
};
},
mounted() {
this.video.ontimeupdate = () => {
this.percentage = (this.video.currentTime / this.video.duration) * 100;
};
this.video.addEventListener("progress", () => {
this.buffered = (this.video.buffered.end(0) / this.video.duration) * 100;
});
2022-05-21 02:01:39 +00:00
},
};
</script>