mirror of https://github.com/VueTubeApp/VueTube
feat: 👍 add seek bar to beta player
This commit is contained in:
parent
432d0b84b6
commit
cace94c644
|
@ -13,7 +13,6 @@
|
||||||
:src="vidSrc"
|
:src="vidSrc"
|
||||||
width="100%"
|
width="100%"
|
||||||
style="max-height: 50vh"
|
style="max-height: 50vh"
|
||||||
:duration="duration"
|
|
||||||
@webkitfullscreenchange="handleFullscreenChange"
|
@webkitfullscreenchange="handleFullscreenChange"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
@ -77,8 +76,8 @@ export default {
|
||||||
updateTiming() {
|
updateTiming() {
|
||||||
const player = this.$refs.player;
|
const player = this.$refs.player;
|
||||||
if (player == undefined) return;
|
if (player == undefined) return;
|
||||||
this.endDuration = player.currentTime;
|
this.duration = player.currentTime;
|
||||||
console.log(player.duration, this.endDuration);
|
this.endDuration = player.duration;
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
@ -111,6 +110,8 @@ export default {
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
|
height: 5em !important;
|
||||||
|
width: 5em !important;
|
||||||
}
|
}
|
||||||
.scrubber {
|
.scrubber {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
|
|
|
@ -1,11 +1,6 @@
|
||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="scrubber">
|
||||||
|
<div id="progress" class="primary" />
|
||||||
<div class="scrubber">
|
|
||||||
<div ref="progress" class="progress" />
|
|
||||||
<div ref="background" class="background" />
|
|
||||||
</div>
|
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -21,13 +16,29 @@ export default {
|
||||||
default: 0,
|
default: 0,
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
}
|
data() {
|
||||||
|
return {
|
||||||
|
percentage: 0,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const vm = this;
|
||||||
|
setInterval(function () {
|
||||||
|
vm.percentage = (vm.duration / vm.endDuration) * 100;
|
||||||
|
|
||||||
|
document.getElementById("progress").style.width = vm.percentage + "%";
|
||||||
|
}, 100);
|
||||||
|
},
|
||||||
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.scrubber {
|
.scrubber {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 1em;
|
height: 5px;
|
||||||
background: #000;
|
background: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
#progress {
|
||||||
|
height: 100%;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
Loading…
Reference in New Issue