player that is very buggy but supports formats others than 18
This commit is contained in:
parent
612e6243f9
commit
c4757e3657
|
@ -1,58 +1,78 @@
|
||||||
window.addEventListener('DOMContentLoaded', (event) => {
|
window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
var video = document.getElementById('player');
|
const video = document.getElementById('player_video');
|
||||||
|
const audio = document.getElementById('player_audio');
|
||||||
if (localStorage.getItem("volume") != null) {
|
if (localStorage.getItem("volume") != null) {
|
||||||
setVolume(localStorage.getItem("volume"));
|
setVolume(localStorage.getItem("volume"));
|
||||||
}
|
}
|
||||||
function toggleVideo() {
|
const playButton = document.querySelector('.ytp-button[aria-label="Play"]');
|
||||||
if (video.paused) {
|
function toggleVideo(play) {
|
||||||
const classList = document.querySelector('.ytp-button-play').classList;
|
const { classList } = playButton;
|
||||||
classList.remove('ytp-button-play');
|
const shouldPlay = typeof play === 'boolean' ? play : video.paused;
|
||||||
classList.add('ytp-button-pause');
|
try {
|
||||||
return video.play();
|
if (shouldPlay) {
|
||||||
} else {
|
classList.remove('ytp-button-play');
|
||||||
const classList = document.querySelector('.ytp-button-pause').classList;
|
classList.add('ytp-button-pause');
|
||||||
classList.remove('ytp-button-pause');
|
if (video.ended) {
|
||||||
classList.add('ytp-button-play');
|
video.currentTime = 0;
|
||||||
return video.pause();
|
audio.currentTime = 0;
|
||||||
|
}
|
||||||
|
video.play();
|
||||||
|
if (audio.src) {
|
||||||
|
audio.play();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
classList.remove('ytp-button-pause');
|
||||||
|
classList.add('ytp-button-play');
|
||||||
|
video.pause();
|
||||||
|
if (audio.src) {
|
||||||
|
audio.pause();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.error(e);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
function updateTime() {
|
function updateTime() {
|
||||||
v = document.querySelector('.html5-main-video');
|
|
||||||
document.querySelector('.ytp-time-current').innerHTML =
|
document.querySelector('.ytp-time-current').innerHTML =
|
||||||
Math.floor(v.currentTime / 60) +
|
Math.floor(video.currentTime / 60) +
|
||||||
':' +
|
':' +
|
||||||
Math.floor(v.currentTime % 60)
|
Math.floor(video.currentTime % 60)
|
||||||
.toString()
|
.toString()
|
||||||
.padStart(2, '0');
|
.padStart(2, '0');
|
||||||
document.querySelector('.ytp-time-duration').innerHTML =
|
document.querySelector('.ytp-time-duration').innerHTML =
|
||||||
Math.floor(v.duration / 60) +
|
Math.floor(video.duration / 60) +
|
||||||
':' +
|
':' +
|
||||||
Math.floor(v.duration % 60)
|
Math.floor(video.duration % 60)
|
||||||
.toString()
|
.toString()
|
||||||
.padStart(2, '0');
|
.padStart(2, '0');
|
||||||
document.querySelector('.ytp-play-progress').style.transform = 'scaleX(' + v.currentTime / v.duration + ')';
|
document.querySelector('.ytp-play-progress').style.transform = 'scaleX(' + video.currentTime / video.duration + ')';
|
||||||
document.querySelector('.html5-scrubber-button').style.left = (v.currentTime / v.duration) * 100 + '%';
|
document.querySelector('.html5-scrubber-button').style.left = (video.currentTime / video.duration) * 100 + '%';
|
||||||
}
|
}
|
||||||
|
|
||||||
function scrub(e) {
|
function scrub(e) {
|
||||||
w = document.querySelector('.ytp-progress-list').getBoundingClientRect();
|
const w = document.querySelector('.ytp-progress-list').getBoundingClientRect();
|
||||||
amount = (e.clientX - w.x) / w.width;
|
const amount = (e.clientX - w.x) / w.width;
|
||||||
video.currentTime = video.duration * amount;
|
video.currentTime = video.duration * amount;
|
||||||
|
audio.currentTime = audio.duration * amount;
|
||||||
console.log(e);
|
console.log(e);
|
||||||
}
|
}
|
||||||
|
|
||||||
function volume(e) {
|
function volume(e) {
|
||||||
v = document.querySelector('.ytp-volume-slider').getBoundingClientRect();
|
const v = document.querySelector('.ytp-volume-slider').getBoundingClientRect();
|
||||||
amount = (e.clientX - v.x) / v.width;
|
const amount = (e.clientX - v.x) / v.width;
|
||||||
setVolume(amount)
|
setVolume(amount);
|
||||||
localStorage.setItem("volume", video.volume);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function setVolume(amount) {
|
function setVolume(amount) {
|
||||||
video.volume = amount;
|
if (audio.src) {
|
||||||
|
audio.volume = amount;
|
||||||
|
} else {
|
||||||
|
video.volume = amount;
|
||||||
|
}
|
||||||
document.querySelector('.ytp-volume-slider-foreground').style.left = amount * 51 + 'px';
|
document.querySelector('.ytp-volume-slider-foreground').style.left = amount * 51 + 'px';
|
||||||
icon = document.querySelector('.ytp-button-volume');
|
localStorage.setItem("volume", video.volume);
|
||||||
|
const icon = document.querySelector('.ytp-button-volume');
|
||||||
if (amount == 0) {
|
if (amount == 0) {
|
||||||
icon.dataset.value = 'off';
|
icon.dataset.value = 'off';
|
||||||
} else if (amount < 0.2) {
|
} else if (amount < 0.2) {
|
||||||
|
@ -90,14 +110,66 @@ window.addEventListener('DOMContentLoaded', (event) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
toggleVideo();
|
const formats = JSON.parse(document.getElementById('yt_formats').innerText)
|
||||||
|
.filter((fmt) => !['m3u8'].includes(fmt.protocol))
|
||||||
|
.sort((a, b) => {
|
||||||
|
if (a.vcodec === 'none' && b.vcodec !== 'none') {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
if (a.vcodec !== 'none' && b.vcodec === 'none') {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (a.vcodec !== 'none' && b.vcodec !== 'none') {
|
||||||
|
return b.width - a.height;
|
||||||
|
}
|
||||||
|
if (a.acodec !== 'none' && b.acodec !== 'none') {
|
||||||
|
return b.abr - a.abr;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
console.log(formats);
|
||||||
|
const videoFormat = formats.find((fmt) => fmt.vcodec !== 'none');
|
||||||
|
const audioFormat = videoFormat.acodec === 'none' ? formats.find((fmt) => fmt.acodec !== 'none') : null;
|
||||||
|
|
||||||
|
video.src = videoFormat.url;
|
||||||
|
if (audioFormat) {
|
||||||
|
audio.src = audioFormat.url;
|
||||||
|
}
|
||||||
|
|
||||||
// document.querySelector('.ytp-button-play').addEventListener('click', () => toggleVideo());
|
// document.querySelector('.ytp-button-play').addEventListener('click', () => toggleVideo());
|
||||||
document.querySelector('.ytp-button-pause').addEventListener('click', () => toggleVideo());
|
playButton.addEventListener('click', () => toggleVideo());
|
||||||
document.getElementById('player').addEventListener('click', () => toggleVideo());
|
video.addEventListener('click', () => toggleVideo());
|
||||||
document.getElementById('player').addEventListener('dblclick', () => toggleFullscreen());
|
video.addEventListener('dblclick', () => toggleFullscreen());
|
||||||
document.querySelector('.html5-main-video').addEventListener('timeupdate', () => updateTime());
|
let videoWaiting = false;
|
||||||
|
let audioWaiting = false;
|
||||||
|
video.addEventListener('waiting', () => {
|
||||||
|
toggleVideo(false);
|
||||||
|
videoWaiting = true;
|
||||||
|
});
|
||||||
|
video.addEventListener('playing', () => {
|
||||||
|
videoWaiting = false;
|
||||||
|
console.log(`videoWaiting ${videoWaiting}, audioWaiting ${audioWaiting}`);
|
||||||
|
if (!audioWaiting) {
|
||||||
|
toggleVideo(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
audio.addEventListener('waiting', () => {
|
||||||
|
toggleVideo(false);
|
||||||
|
audioWaiting = true;
|
||||||
|
});
|
||||||
|
audio.addEventListener('playing', () => {
|
||||||
|
audioWaiting = false;
|
||||||
|
console.log(`videoWaiting ${videoWaiting}, audioWaiting ${audioWaiting}`);
|
||||||
|
if (!videoWaiting) {
|
||||||
|
toggleVideo(true);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
video.addEventListener('timeupdate', () => updateTime());
|
||||||
|
video.addEventListener('ended', () => toggleVideo(false)); // just to change the classes
|
||||||
document.querySelector('.ytp-progress-list').addEventListener('click', (e) => scrub(e));
|
document.querySelector('.ytp-progress-list').addEventListener('click', (e) => scrub(e));
|
||||||
// document.querySelector('.ytp-play-progress').addEventListener('click', (e) => scrub(e));
|
// document.querySelector('.ytp-play-progress').addEventListener('click', (e) => scrub(e));
|
||||||
document.querySelector('.ytp-volume-slider').addEventListener('click', (e) => volume(e));
|
document.querySelector('.ytp-volume-slider').addEventListener('click', (e) => volume(e));
|
||||||
document.querySelector('.ytp-button-fullscreen-enter').addEventListener('click', () => toggleFullscreen());
|
document.querySelector('.ytp-button-fullscreen-enter').addEventListener('click', () => toggleFullscreen());
|
||||||
|
|
||||||
|
// autoplay
|
||||||
|
toggleVideo(true);
|
||||||
});
|
});
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -32,6 +32,10 @@ if [[ "${get_data[v]}" ]]; then
|
||||||
meta[title]="${strings[title]}"
|
meta[title]="${strings[title]}"
|
||||||
source templates/head.sh
|
source templates/head.sh
|
||||||
fi
|
fi
|
||||||
|
formats=$(jq '.formats' <<< "$video")
|
||||||
|
fi
|
||||||
|
|
||||||
|
if [[ "${r[host]}" == "${cfg[flash_host]}" ]]; then
|
||||||
IFS=$'\n'
|
IFS=$'\n'
|
||||||
urls=($(jq -r '.formats[] | select(.format_id == "22" or .format_id == "18").url' <<< "$video"))
|
urls=($(jq -r '.formats[] | select(.format_id == "22" or .format_id == "18").url' <<< "$video"))
|
||||||
unset IFS
|
unset IFS
|
||||||
|
@ -40,9 +44,6 @@ if [[ "${get_data[v]}" ]]; then
|
||||||
else
|
else
|
||||||
url=${urls[0]}
|
url=${urls[0]}
|
||||||
fi
|
fi
|
||||||
fi
|
|
||||||
|
|
||||||
if [[ "${r[host]}" == "${cfg[flash_host]}" ]]; then
|
|
||||||
strings[player]=$(source "${cfg[namespace]}/webroot/player_flash.shs")
|
strings[player]=$(source "${cfg[namespace]}/webroot/player_flash.shs")
|
||||||
else
|
else
|
||||||
strings[player]=$(source "${cfg[namespace]}/webroot/player.shs")
|
strings[player]=$(source "${cfg[namespace]}/webroot/player.shs")
|
||||||
|
|
Loading…
Reference in a new issue