html player
This commit is contained in:
parent
0c99e2b21a
commit
74f8e1a387
1 changed files with 27 additions and 11 deletions
|
|
@ -60,8 +60,8 @@
|
||||||
/* Grid container */
|
/* Grid container */
|
||||||
.grid {
|
.grid {
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: repeat(10, 70px);
|
grid-template-columns: repeat(10, 150px);
|
||||||
grid-template-rows: repeat(3, 70px);
|
grid-template-rows: repeat(3, 150px);
|
||||||
gap: 12px;
|
gap: 12px;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-content: center;
|
align-content: center;
|
||||||
|
|
@ -76,7 +76,7 @@
|
||||||
background: rgba(0,0,0, 0.6);
|
background: rgba(0,0,0, 0.6);
|
||||||
border: 2px solid #333;
|
border: 2px solid #333;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 18px;
|
font-size: 16px;
|
||||||
transition: background 0.2s ease, transform 0.2s ease;
|
transition: background 0.2s ease, transform 0.2s ease;
|
||||||
&.current {
|
&.current {
|
||||||
background: #909090;
|
background: #909090;
|
||||||
|
|
@ -269,11 +269,9 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
function play() {
|
function play() {
|
||||||
let blocked = false, loading
|
let blocked = false, loading
|
||||||
|
isPlaying = true
|
||||||
document.querySelectorAll("video,audio").forEach(async (media) => {
|
document.querySelectorAll("video,audio").forEach(async (media) => {
|
||||||
if (blocked) { return }
|
if (blocked) { return }
|
||||||
return media.play().then(() => {
|
return media.play().then(() => {
|
||||||
|
|
@ -305,11 +303,28 @@
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
function pause() {
|
function pause() {
|
||||||
document.createElementAll("video,audio").forEach(media => {
|
isPlaying = false
|
||||||
media.paused = true
|
document.querySelectorAll("video,audio").forEach(media => {
|
||||||
|
media.pause()
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
var isPlaying = false
|
||||||
|
|
||||||
|
function toggle() {
|
||||||
|
if (isPlaying) {
|
||||||
|
pause()
|
||||||
|
} else {
|
||||||
|
play()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
window.addEventListener('keydown', event => {
|
||||||
|
console.log('keydown')
|
||||||
|
if (event.key == " ") {
|
||||||
|
toggle()
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
function render() {
|
function render() {
|
||||||
name = document.location.hash.slice(1)
|
name = document.location.hash.slice(1)
|
||||||
console.log('on load', name)
|
console.log('on load', name)
|
||||||
|
|
@ -338,7 +353,8 @@
|
||||||
for (let i = 1; i <= 30; i++) {
|
for (let i = 1; i <= 30; i++) {
|
||||||
const box = document.createElement("div");
|
const box = document.createElement("div");
|
||||||
box.className = "box box" + i;
|
box.className = "box box" + i;
|
||||||
box.textContent = i;
|
box.textContent = titles[i - 1];
|
||||||
|
box.dataset.id = i - 1
|
||||||
|
|
||||||
box.addEventListener("mouseenter", () => {
|
box.addEventListener("mouseenter", () => {
|
||||||
titleEl.textContent = titles[i - 1];
|
titleEl.textContent = titles[i - 1];
|
||||||
|
|
@ -348,9 +364,9 @@
|
||||||
titleEl.textContent = "";
|
titleEl.textContent = "";
|
||||||
});
|
});
|
||||||
box.addEventListener("click", () => {
|
box.addEventListener("click", () => {
|
||||||
console.log("clicked", box.textContent)
|
console.log("clicked", box.dataset.id)
|
||||||
document.querySelector(".page").style.display = ""
|
document.querySelector(".page").style.display = ""
|
||||||
current = parseInt(box.textContent) - 1
|
current = parseInt(box.dataset.id) - 1
|
||||||
nextVideo.src = prefix + name + playlist[current]
|
nextVideo.src = prefix + name + playlist[current]
|
||||||
fetch(nextVideo.src.replace(/.mp4/, '.ass') + '?' +random).then(async (res) => {
|
fetch(nextVideo.src.replace(/.mp4/, '.ass') + '?' +random).then(async (res) => {
|
||||||
const content = await res.text()
|
const content = await res.text()
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue