mp4/webm
This commit is contained in:
parent
81f50b743b
commit
b2fdabeb59
3 changed files with 37 additions and 4 deletions
|
@ -8,5 +8,5 @@ document.querySelectorAll('.animated-title').forEach(element => {
|
||||||
var randomDuration = Math.random() * animationDuration;
|
var randomDuration = Math.random() * animationDuration;
|
||||||
element.querySelectorAll('.text').forEach(text => {
|
element.querySelectorAll('.text').forEach(text => {
|
||||||
text.style.animationDelay = -randomDuration + 's';
|
text.style.animationDelay = -randomDuration + 's';
|
||||||
}
|
})
|
||||||
})
|
})
|
||||||
|
|
|
@ -2,6 +2,7 @@ var cache = cache || {}
|
||||||
var layer = 'descriptions'
|
var layer = 'descriptions'
|
||||||
var baseURL = 'https://pad.ma'
|
var baseURL = 'https://pad.ma'
|
||||||
var imageResolution = 480
|
var imageResolution = 480
|
||||||
|
var videoExtension
|
||||||
|
|
||||||
async function pandoraAPI(action, data) {
|
async function pandoraAPI(action, data) {
|
||||||
var url = baseURL + '/api/'
|
var url = baseURL + '/api/'
|
||||||
|
@ -21,13 +22,29 @@ async function pandoraAPI(action, data) {
|
||||||
return cache[key]
|
return cache[key]
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function setVideoSrc(video, src) {
|
||||||
|
var ext
|
||||||
|
if (!videoExtension) {
|
||||||
|
[
|
||||||
|
['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
|
||||||
|
['video/webm; codecs="vp8, vorbis"', '.webm'],
|
||||||
|
].forEach(opt => {
|
||||||
|
if (videoExtension) { return }
|
||||||
|
if (video.canPlayType(opt[0]).replace('no', '')) {
|
||||||
|
videoExtension = opt[1]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
video.src = src.replace('.webm', videoExtension)
|
||||||
|
}
|
||||||
|
|
||||||
function updatePlayer(video, frame, currentTime, out, src) {
|
function updatePlayer(video, frame, currentTime, out, src) {
|
||||||
var rect = frame.getBoundingClientRect();
|
var rect = frame.getBoundingClientRect();
|
||||||
video.style.opacity = 0
|
video.style.opacity = 0
|
||||||
video.style.top = (rect.top + window.scrollY) + 'px'
|
video.style.top = (rect.top + window.scrollY) + 'px'
|
||||||
video.style.display = 'block';
|
video.style.display = 'block';
|
||||||
if (src) {
|
if (src) {
|
||||||
video.src = src
|
setVideoSrc(video, src)
|
||||||
}
|
}
|
||||||
//video.poster = frame.querySelector('img').src
|
//video.poster = frame.querySelector('img').src
|
||||||
var muted = video.muted
|
var muted = video.muted
|
||||||
|
@ -225,7 +242,7 @@ function loadItem(config) {
|
||||||
var video = document.createElement('video')
|
var video = document.createElement('video')
|
||||||
video.classList.add('player')
|
video.classList.add('player')
|
||||||
video.muted = true
|
video.muted = true
|
||||||
video.src = `${baseURL}/${config.item}/480p.webm`
|
setVideoSrc(video, `${baseURL}/${config.item}/480p.webm`)
|
||||||
video.addEventListener('timeupdate', timeupdate)
|
video.addEventListener('timeupdate', timeupdate)
|
||||||
video.addEventListener('touchstart', showOverlay)
|
video.addEventListener('touchstart', showOverlay)
|
||||||
video.addEventListener('mouseover', showOverlay)
|
video.addEventListener('mouseover', showOverlay)
|
||||||
|
|
|
@ -1,7 +1,23 @@
|
||||||
|
function setVideoSrc(video, src) {
|
||||||
|
var ext
|
||||||
|
if (!videoExtension) {
|
||||||
|
[
|
||||||
|
['video/mp4; codecs="avc1.42E01E, mp4a.40.2"', '.mp4'],
|
||||||
|
['video/webm; codecs="vp8, vorbis"', '.webm'],
|
||||||
|
].forEach(opt => {
|
||||||
|
if (videoExtension) { return }
|
||||||
|
if (video.canPlayType(opt[0]).replace('no', '')) {
|
||||||
|
videoExtension = opt[1]
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
video.src = src.replace('.webm', videoExtension)
|
||||||
|
}
|
||||||
|
|
||||||
document.querySelector('a#play-fullscreen').addEventListener('click', event => {
|
document.querySelector('a#play-fullscreen').addEventListener('click', event => {
|
||||||
var video = document.createElement('video')
|
var video = document.createElement('video')
|
||||||
video.classList.add('player')
|
video.classList.add('player')
|
||||||
video.src = 'https://pad.ma/' + film.id + '/480p.webm'
|
setVideoSrc(video, 'https://pad.ma/' + film.id + '/480p.webm')
|
||||||
video.controls = true
|
video.controls = true
|
||||||
document.querySelector('main').appendChild(video)
|
document.querySelector('main').appendChild(video)
|
||||||
video.style.display = 'none'
|
video.style.display = 'none'
|
||||||
|
|
Loading…
Reference in a new issue