mirror of
https://github.com/VueTubeApp/VueTube
synced 2024-11-26 21:23:02 +00:00
43 lines
677 B
Vue
43 lines
677 B
Vue
|
<template>
|
||
|
|
<div>
|
||
|
|
|
||
|
|
|
||
|
|
<v-progress-linear
|
||
|
|
active
|
||
|
|
background-color="primary"
|
||
|
|
background-opacity="0.5"
|
||
|
|
:buffer-value="buffered"
|
||
|
|
color="primary"
|
||
|
|
height="3"
|
||
|
|
query
|
||
|
|
:value="percentage"
|
||
|
|
/>
|
||
|
|
|
||
|
|
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
props: ["video"],
|
||
|
|
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
percentage: 0,
|
||
|
|
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;
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
}
|
||
|
|
</script>
|