update player
This commit is contained in:
parent
26988acd50
commit
6ba0f229be
1 changed files with 115 additions and 9 deletions
|
|
@ -17,6 +17,29 @@
|
|||
height: 100%;
|
||||
font-family: Menlo, sans-serif;
|
||||
}
|
||||
#click-to-play {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
background: #000000;
|
||||
color: white;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
z-index: 10;
|
||||
cursor: pointer;
|
||||
}
|
||||
#click-to-play .text {
|
||||
font-size: 16px;
|
||||
width: 80%;
|
||||
margin: auto;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
|
||||
/* Full page container */
|
||||
.page {
|
||||
|
|
@ -55,6 +78,9 @@
|
|||
cursor: pointer;
|
||||
font-size: 18px;
|
||||
transition: background 0.2s ease, transform 0.2s ease;
|
||||
&.current {
|
||||
background: #909090;
|
||||
}
|
||||
}
|
||||
|
||||
.box:hover {
|
||||
|
|
@ -106,6 +132,7 @@
|
|||
|
||||
<body>
|
||||
<script>
|
||||
const random = +new Date
|
||||
|
||||
const sub_handlers = {};
|
||||
var playlist = [
|
||||
|
|
@ -160,7 +187,7 @@
|
|||
nextVideo = currentVideo
|
||||
currentVideo = next
|
||||
sub_handlers[nextVideo.id]?.destroy()
|
||||
fetch(nextVideo.src.replace(/.mp4/, '.ass')).then(async (res) => {
|
||||
fetch(nextVideo.src.replace(/.mp4/, '.ass') + '?' +random ).then(async (res) => {
|
||||
const content = await res.text()
|
||||
const ass = new ASS(content, nextVideo, {
|
||||
container: subtitles,
|
||||
|
|
@ -203,6 +230,86 @@
|
|||
];
|
||||
|
||||
|
||||
function bindFullscreen() {
|
||||
window.addEventListener('keydown', event => {
|
||||
console.log('keydown')
|
||||
event.stopPropagation()
|
||||
});
|
||||
window.addEventListener('mousedown', event => {
|
||||
console.log('mousedown')
|
||||
toggleFullscreen()
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
});
|
||||
window.addEventListener('touchstart', event => {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
});
|
||||
}
|
||||
|
||||
function toggleFullscreen() {
|
||||
var body = document.querySelector('body')
|
||||
if (!(document.fullscreenElement === null || document.webkitFullscreenElement === null)) {
|
||||
|
||||
if (document.fullscreenElement) {
|
||||
document.exitFullscreen()
|
||||
}
|
||||
if (document.webkitFullscreenElement) {
|
||||
document.webkitExitFullscreen()
|
||||
}
|
||||
} else {
|
||||
console.log('enter fullscreen?')
|
||||
if (body.webkitRequestFullscreen) {
|
||||
body.webkitRequestFullscreen({navigationUI: 'hide'})
|
||||
} else {
|
||||
body.requestFullscreen({navigationUI: 'hide'}).catch(err => {
|
||||
console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
function play() {
|
||||
let blocked = false, loading
|
||||
document.querySelectorAll("video,audio").forEach(async (media) => {
|
||||
if (blocked) { return }
|
||||
return media.play().then(() => {
|
||||
if (media.classList.contains('next')) {
|
||||
media.pause()
|
||||
}
|
||||
}).catch(error => {
|
||||
if (blocked) {
|
||||
return
|
||||
}
|
||||
blocked = true
|
||||
loading = document.createElement('div')
|
||||
loading.id = 'click-to-play'
|
||||
loading.innerHTML = '<div class="text"><h1>P for Power</h1><p>click to start</p></div>'
|
||||
document.body.appendChild(loading)
|
||||
function removeBehaviorsRestrictions() {
|
||||
loading.remove()
|
||||
window.removeEventListener('keydown', removeBehaviorsRestrictions);
|
||||
window.removeEventListener('mousedown', removeBehaviorsRestrictions);
|
||||
window.removeEventListener('touchstart', removeBehaviorsRestrictions);
|
||||
blocked = false
|
||||
play()
|
||||
toggleFullscreen()
|
||||
}
|
||||
window.addEventListener('keydown', removeBehaviorsRestrictions);
|
||||
window.addEventListener('mousedown', removeBehaviorsRestrictions);
|
||||
window.addEventListener('touchstart', removeBehaviorsRestrictions);
|
||||
})
|
||||
})
|
||||
}
|
||||
function pause() {
|
||||
document.createElementAll("video,audio").forEach(media => {
|
||||
media.paused = true
|
||||
})
|
||||
}
|
||||
|
||||
function render() {
|
||||
name = document.location.hash.slice(1)
|
||||
console.log('on load', name)
|
||||
|
|
@ -211,7 +318,6 @@
|
|||
name = parts[0]
|
||||
current = parseInt(parts[1]) - 1
|
||||
}
|
||||
console.log('on load', name, parts, current)
|
||||
var body = document.querySelector('body')
|
||||
body.innerHTML = ``
|
||||
var stage = document.createElement("div")
|
||||
|
|
@ -231,7 +337,7 @@
|
|||
const titleEl = overlay.querySelector("#title");
|
||||
for (let i = 1; i <= 30; i++) {
|
||||
const box = document.createElement("div");
|
||||
box.className = "box";
|
||||
box.className = "box box" + i;
|
||||
box.textContent = i;
|
||||
|
||||
box.addEventListener("mouseenter", () => {
|
||||
|
|
@ -246,7 +352,7 @@
|
|||
document.querySelector(".page").style.display = ""
|
||||
current = parseInt(box.textContent) - 1
|
||||
nextVideo.src = prefix + name + playlist[current]
|
||||
fetch(nextVideo.src.replace(/.mp4/, '.ass')).then(async (res) => {
|
||||
fetch(nextVideo.src.replace(/.mp4/, '.ass') + '?' +random).then(async (res) => {
|
||||
const content = await res.text()
|
||||
const ass = new ASS(content, nextVideo, {
|
||||
container: subtitles,
|
||||
|
|
@ -289,7 +395,6 @@
|
|||
audio2.controls = false
|
||||
audio2.volume = 1
|
||||
audio2.loop = true
|
||||
audio2.autoplay = true
|
||||
audio2.classList.add("forest")
|
||||
body.appendChild(audio2)
|
||||
|
||||
|
|
@ -298,7 +403,6 @@
|
|||
audio3.controls = false
|
||||
audio3.volume = 1
|
||||
audio3.loop = true
|
||||
audio3.autoplay = true
|
||||
audio3.currentTime = Math.random() * 60
|
||||
audio3.classList.add("music")
|
||||
body.appendChild(audio3)
|
||||
|
|
@ -308,17 +412,19 @@
|
|||
media.addEventListener('pause', sync)
|
||||
media.addEventListener('click', () => {
|
||||
document.querySelector(".page").style.display = "flex"
|
||||
document.querySelectorAll('.box').forEach(box => { box.classList.remove('current') })
|
||||
document.querySelector('.box' + current).classList.add('current')
|
||||
})
|
||||
})
|
||||
fetch(video1.src.replace(/.mp4/, '.ass')).then(async (res) => {
|
||||
fetch(video1.src.replace(/.mp4/, '.ass') + '?' +random).then(async (res) => {
|
||||
const content = await res.text()
|
||||
const ass = new ASS(content, video1, {
|
||||
container: subtitles,
|
||||
});
|
||||
sub_handlers[video1.id] = ass
|
||||
sub_handlers[video1.id].show()
|
||||
video1.play()
|
||||
fetch(video2.src.replace(/.mp4/, '.ass')).then(async (res) => {
|
||||
play()
|
||||
fetch(video2.src.replace(/.mp4/, '.ass')+ '?' +random).then(async (res) => {
|
||||
const content = await res.text()
|
||||
const ass = new ASS(content, video2, {
|
||||
container: subtitles,
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue