domi/bashtube
1
0
Fork 0
Code Issues 13 Pull requests Packages Projects Releases Wiki Activity

* player.js: sync, seeking and buffering fixes

Browse source
This commit is contained in:
Dominique Liberda 2022-11-29 14:03:20 -05:00
parent b4e15bec4d
commit b7e8d58dc6
1 changed files with 44 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

68
webroot/js/player.js
View file

@ -116,12 +116,22 @@ window.addEventListener('DOMContentLoaded', (event) => {
if (video.ended) { if (video.ended) {
video.currentTime = 0; video.currentTime = 0;
audio.currentTime = 0; audio.currentTime = 0;
playbackWait();
} else { } else {
video.play(); if(video.readyState == 4) {
if (audio.src) { if (audio.src) {
audio.play(); if (audio.readyState == 4) {
} video.play();
audio.play();
audio.currentTime = video.currentTime;
} else {
playbackWait();
}
} else {
video.play();
}
} else {
playbackWait();
}
} }
} else { } else {
classList.remove('ytp-button-pause'); classList.remove('ytp-button-pause');
@ -129,13 +139,12 @@ window.addEventListener('DOMContentLoaded', (event) => {
clearTimeout(mouseMoveTimeout); clearTimeout(mouseMoveTimeout);
video.pause(); video.pause();
if (audio.src) { if (audio.src) {
audio.currentTime = video.currentTime; // sync audio to video on pause //audio.currentTime = video.currentTime; // sync audio to video on pause
audio.pause(); audio.pause();
} }
if (video.currentTime == video.duration && loopInput.checked == true) { if (video.currentTime == video.duration && loopInput.checked == true) {
video.currentTime = 0; video.currentTime = 0;
audio.currentTime = 0; audio.currentTime = 0;
playbackWait();
} }
} }
} catch (e) { } catch (e) {
@ -248,11 +257,18 @@ window.addEventListener('DOMContentLoaded', (event) => {
} }
function seekAbsolute(t) { function seekAbsolute(t) {
let state = video.paused;
video.pause(); video.pause();
video.currentTime=t; video.currentTime=t;
video.play();
if(audio) { if(audio) {
audio.pause();
audio.currentTime=t; audio.currentTime=t;
audio.pause();
}
if(state) {
video.pause();
} else {
playbackWait();
} }
} }
@ -260,8 +276,8 @@ window.addEventListener('DOMContentLoaded', (event) => {
video.pause(); video.pause();
video.currentTime=video.currentTime+t; video.currentTime=video.currentTime+t;
if(audio) { if(audio) {
audio.pause();
audio.currentTime=video.currentTime; audio.currentTime=video.currentTime;
audio.pause();
} }
if(play != false) { if(play != false) {
playbackWait(); playbackWait();
@ -298,13 +314,17 @@ window.addEventListener('DOMContentLoaded', (event) => {
if (speedInput.selectedIndex != 0) speedInput.selectedIndex -= 1; if (speedInput.selectedIndex != 0) speedInput.selectedIndex -= 1;
changeSpeed(); changeSpeed();
} else if (e.key == ".") { } else if (e.key == ".") {
if (video.paused) { if (!video.paused) {
seekRelative(1/fps, false); video.pause()
if (audio.src) audio.pause()
} }
seekRelative(1/fps, false);
} else if (e.key == ",") { } else if (e.key == ",") {
if (video.paused) { if (!video.paused) {
seekRelative(-1/fps, false); video.pause()
if (audio.src) audio.pause()
} }
seekRelative(-1/fps, false);
} }
} }
} }
@ -377,15 +397,15 @@ window.addEventListener('DOMContentLoaded', (event) => {
function playbackWait() { function playbackWait() {
const waiting = setInterval(()=> { const waiting = setInterval(()=> {
if (document.querySelector("video").readyState == 4) { if (document.querySelector("video").readyState == 4 && document.getElementById('player_audio').readyState == 4) {
clearInterval(waiting); clearInterval(waiting);
setTimeout(() => { setTimeout(() => {
toggleVideo(true); toggleVideo(true);
},150); // let the video buffer a tiny bit more },200); // let the video buffer a tiny bit more
} else { } else {
console.log("waiting...") console.log("waiting...")
} }
},100); },200);
} }
// document.querySelector('.ytp-button-play').addEventListener('click', () => toggleVideo()); // document.querySelector('.ytp-button-play').addEventListener('click', () => toggleVideo());
@ -398,26 +418,26 @@ window.addEventListener('DOMContentLoaded', (event) => {
let videoWaiting = false; let videoWaiting = false;
let audioWaiting = false; let audioWaiting = false;
video.addEventListener('waiting', () => { video.addEventListener('waiting', () => {
toggleVideo(false); // toggleVideo(false);
videoWaiting = true; videoWaiting = true;
}); });
video.addEventListener('playing', () => { video.addEventListener('playing', () => {
videoWaiting = false; // videoWaiting = false;
console.log(`videoWaiting ${videoWaiting}, audioWaiting ${audioWaiting}`); console.log(`videoWaiting ${videoWaiting}, audioWaiting ${audioWaiting}`);
if (!audioWaiting) { //if (!audioWaiting) {
toggleVideo(true); toggleVideo(true);
} //}
}); });
audio.addEventListener('waiting', () => { audio.addEventListener('waiting', () => {
toggleVideo(false); // toggleVideo(false);
audioWaiting = true; audioWaiting = true;
}); });
audio.addEventListener('playing', () => { audio.addEventListener('playing', () => {
audioWaiting = false; audioWaiting = false;
console.log(`videoWaiting ${videoWaiting}, audioWaiting ${audioWaiting}`); console.log(`videoWaiting ${videoWaiting}, audioWaiting ${audioWaiting}`);
if (!videoWaiting) { //if (!videoWaiting) {
toggleVideo(true); // toggleVideo(true);
} //}
}); });
video.addEventListener('timeupdate', () => updateTime()); video.addEventListener('timeupdate', () => updateTime());
video.addEventListener('ended', () => toggleVideo(false)); // just to change the classes video.addEventListener('ended', () => toggleVideo(false)); // just to change the classes