mirror of https://github.com/VueTubeApp/VueTube
fix buffering de-sync, closes #419
This commit is contained in:
parent
24f5a3e142
commit
dd5727168d
|
@ -200,6 +200,7 @@
|
||||||
<playpause
|
<playpause
|
||||||
v-if="$refs.player"
|
v-if="$refs.player"
|
||||||
:video="$refs.player"
|
:video="$refs.player"
|
||||||
|
:buffering="bufferingDetected"
|
||||||
@play="$refs.player.play(), $refs.audio.play()"
|
@play="$refs.player.play(), $refs.audio.play()"
|
||||||
@pause="$refs.player.pause(), $refs.audio.pause()"
|
@pause="$refs.player.pause(), $refs.audio.pause()"
|
||||||
/>
|
/>
|
||||||
|
@ -395,6 +396,7 @@ export default {
|
||||||
vidSrc: "",
|
vidSrc: "",
|
||||||
audSrc: "",
|
audSrc: "",
|
||||||
isVerticalVideo: false,
|
isVerticalVideo: false,
|
||||||
|
bufferingDetected: false,
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
@ -417,10 +419,17 @@ export default {
|
||||||
});
|
});
|
||||||
|
|
||||||
vid.addEventListener("loadeddata", (e) => {
|
vid.addEventListener("loadeddata", (e) => {
|
||||||
// TODO: detect video loading state and send this.loading to play button :loading = loading here
|
|
||||||
// console.log(e);
|
// console.log(e);
|
||||||
|
// if (vid.networkState === vid.NETWORK_LOADING) {
|
||||||
|
// // The user agent is actively trying to download data.
|
||||||
|
// }
|
||||||
|
|
||||||
|
// if (vid.readyState < vid.HAVE_FUTURE_DATA) {
|
||||||
|
// // There is not enough data to keep playing from this point
|
||||||
|
// }
|
||||||
if (vid.readyState >= 3) {
|
if (vid.readyState >= 3) {
|
||||||
this.$refs.audio.play();
|
this.$refs.audio.play();
|
||||||
|
this.bufferingDetected = false;
|
||||||
this.$refs.audio.currentTime = vid.currentTime;
|
this.$refs.audio.currentTime = vid.currentTime;
|
||||||
this.$refs.audio.playbackRate = this.$store.state.player.speed;
|
this.$refs.audio.playbackRate = this.$store.state.player.speed;
|
||||||
this.$refs.player.playbackRate = this.$store.state.player.speed;
|
this.$refs.player.playbackRate = this.$store.state.player.speed;
|
||||||
|
@ -447,13 +456,30 @@ export default {
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
// TODO: handle buffering with audio track
|
// TODO: handle video ending with a "replay" button instead of <playpause /> if not on loop
|
||||||
// TODO: handle video ending with a "replay" button if not on loop
|
|
||||||
// TODO: detect video loading state and send this.loading to play button :loading = loading here
|
|
||||||
// TODO: split buffering into multiple sections as it should be for back/forth scrubbing
|
// TODO: split buffering into multiple sections as it should be for back/forth scrubbing
|
||||||
vid.addEventListener("progress", () => {
|
vid.addEventListener("progress", () => {
|
||||||
this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
|
this.buffered = (vid.buffered.end(0) / vid.duration) * 100;
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// buffering detection & sync
|
||||||
|
let threshold = 300; //ms after which user perceives buffering
|
||||||
|
|
||||||
|
vid.addEventListener("waiting", () => {
|
||||||
|
this.bufferingDetected = setTimeout(() => {
|
||||||
|
this.bufferingDetected = true;
|
||||||
|
this.$refs.audio.pause();
|
||||||
|
//show buffering
|
||||||
|
}, threshold);
|
||||||
|
});
|
||||||
|
vid.addEventListener("playing", () => {
|
||||||
|
if (this.bufferingDetected != false) {
|
||||||
|
clearTimeout(this.bufferingDetected);
|
||||||
|
this.$refs.audio.currentTime = vid.currentTime;
|
||||||
|
this.$refs.audio.play();
|
||||||
|
this.bufferingDetected = false;
|
||||||
|
}
|
||||||
|
});
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
|
@ -492,7 +518,6 @@ export default {
|
||||||
);
|
);
|
||||||
|
|
||||||
var prev_pc = 0;
|
var prev_pc = 0;
|
||||||
// TODO: big progress overlay (##%) to replace controls while loading if pre-buffering is enabled
|
|
||||||
this.xhr.addEventListener("progress", (event) => {
|
this.xhr.addEventListener("progress", (event) => {
|
||||||
if (event.lengthComputable) {
|
if (event.lengthComputable) {
|
||||||
var pc = Math.round((event.loaded / event.total) * 100);
|
var pc = Math.round((event.loaded / event.total) * 100);
|
||||||
|
@ -506,6 +531,7 @@ export default {
|
||||||
|
|
||||||
this.xhr.send();
|
this.xhr.send();
|
||||||
},
|
},
|
||||||
|
// !NOTE: (BUG) too big to process for 1080p vids over 2 minutes
|
||||||
blobToDataURL(blob, callback) {
|
blobToDataURL(blob, callback) {
|
||||||
var a = new FileReader();
|
var a = new FileReader();
|
||||||
a.onload = function (e) {
|
a.onload = function (e) {
|
||||||
|
@ -546,6 +572,8 @@ export default {
|
||||||
},
|
},
|
||||||
qualityHandler(q) {
|
qualityHandler(q) {
|
||||||
console.log(q);
|
console.log(q);
|
||||||
|
this.$refs.audio.pause();
|
||||||
|
this.bufferingDetected = true;
|
||||||
let time = this.$refs.player.currentTime;
|
let time = this.$refs.player.currentTime;
|
||||||
let speed = this.$refs.player.playbackRate;
|
let speed = this.$refs.player.playbackRate;
|
||||||
this.$refs.player.src = q;
|
this.$refs.player.src = q;
|
||||||
|
|
|
@ -4,6 +4,7 @@
|
||||||
text
|
text
|
||||||
large
|
large
|
||||||
color="white"
|
color="white"
|
||||||
|
:loading="buffering"
|
||||||
@click="
|
@click="
|
||||||
(paused = !video.paused), video.paused ? $emit('play') : $emit('pause')
|
(paused = !video.paused), video.paused ? $emit('play') : $emit('pause')
|
||||||
"
|
"
|
||||||
|
@ -21,6 +22,10 @@ export default {
|
||||||
type: Object,
|
type: Object,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
buffering: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
},
|
},
|
||||||
emits: ["play", "pause"],
|
emits: ["play", "pause"],
|
||||||
data: () => ({
|
data: () => ({
|
||||||
|
|
Loading…
Reference in New Issue