87 lines
3.1 KiB
JavaScript
87 lines
3.1 KiB
JavaScript
var videoExtension
|
|
var continueTimecode
|
|
|
|
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)
|
|
}
|
|
var video
|
|
|
|
document.querySelector('a#play-fullscreen').addEventListener('click', event => {
|
|
event.preventDefault()
|
|
event.stopPropagation()
|
|
|
|
// For some unknown reason, we need to set the timeline-video to display:none
|
|
// when playing the film in fullscreen, otherwise the fullscreen video
|
|
// shows a black screen on Safari (15.0.2 on a laptop)
|
|
document.getElementById('timeline-video').style.display = 'none'
|
|
if (!video) {
|
|
video = document.createElement('video')
|
|
video.classList.add('player')
|
|
video.classList.add('fullscreen')
|
|
setVideoSrc(video, 'https://pad.ma/' + film.id + '/480p.webm')
|
|
video.controls = true
|
|
document.querySelector('main').appendChild(video)
|
|
video.style.display = 'none'
|
|
if (continueTimecode) {
|
|
video.currentTime = continueTimecode
|
|
}
|
|
// function enterFullscreen(event) {
|
|
// console.log('enter fullscreen called')
|
|
// video.removeEventListener('play', enterFullscreen)
|
|
|
|
// // setTimeout(() => {
|
|
// // video.style.display = 'block'
|
|
// // }, 150)
|
|
// }
|
|
// video.addEventListener('play', enterFullscreen);
|
|
|
|
function onFullscreenChange (event) {
|
|
if (document.fullscreenElement === null || document.webkitFullscreenElement === null) {
|
|
continueTimecode = video.currentTime
|
|
video.remove()
|
|
document.getElementById('timeline-video').style.display = 'block'
|
|
if (document.fullscreenElement || document.webkitFullscreenElement) {
|
|
document.exitFullscreen();
|
|
}
|
|
video = null
|
|
}
|
|
}
|
|
video.addEventListener('webkitfullscreenchange', onFullscreenChange)
|
|
video.addEventListener('fullscreenchange', onFullscreenChange)
|
|
video.addEventListener('pause', event => {
|
|
})
|
|
video.addEventListener('ended', event => {
|
|
continueTimecode = 0
|
|
video.remove()
|
|
if (document.fullscreenElement) {
|
|
document.exitFullscreen();
|
|
}
|
|
video = null
|
|
});
|
|
video.play()
|
|
video.style.display = 'block'
|
|
if (video.webkitRequestFullscreen) {
|
|
console.log('webkitRequestFullscreen exists')
|
|
video.webkitRequestFullscreen()
|
|
} else {
|
|
video.requestFullscreen().catch(err => {
|
|
console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
|
|
video.remove()
|
|
video = null
|
|
});
|
|
}
|
|
|
|
}
|
|
})
|