0x2620/phantasma
2
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

add video fallback

Browse source
This commit is contained in:
imohkay 2021-10-27 14:56:53 +05:30
commit 805752169b
2 changed files with 42 additions and 24 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

52
app/static/js/film.js
View file

@ -21,6 +21,11 @@ var video
document.querySelector('a#play-fullscreen').addEventListener('click', event => { document.querySelector('a#play-fullscreen').addEventListener('click', event => {
event.preventDefault() event.preventDefault()
event.stopPropagation() 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 an m1 laptop)
document.getElementById('timeline-video').style.display = 'none'
if (!video) { if (!video) {
video = document.createElement('video') video = document.createElement('video')
video.classList.add('player') video.classList.add('player')
@ -32,42 +37,47 @@ document.querySelector('a#play-fullscreen').addEventListener('click', event => {
if (continueTimecode) { if (continueTimecode) {
video.currentTime = continueTimecode video.currentTime = continueTimecode
} }
function enterFullscreen(event) {
video.removeEventListener('play', enterFullscreen); function onFullscreenChange (event) {
if (video.webkitRequestFullscreen) { if (document.fullscreenElement === null || document.webkitFullscreenElement === null) {
video.webkitRequestFullscreen();
} else {
video.requestFullscreen().catch(err => {
console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
video.remove()
video = null
});
}
setTimeout(() => {
video.style.display = 'block'
}, 150)
}
video.addEventListener('play', enterFullscreen);
video.addEventListener('fullscreenchange', event => {
if (document.fullscreenElement === null) {
continueTimecode = video.currentTime continueTimecode = video.currentTime
video.remove() video.remove()
document.getElementById('timeline-video').style.display = 'block'
if (document.fullscreenElement) { if (document.fullscreenElement) {
document.exitFullscreen(); document.exitFullscreen()
}
if (document.webkitFullscreenElement) {
document.webkitExitFullscreen()
} }
video = null video = null
} }
}); }
video.addEventListener('webkitfullscreenchange', onFullscreenChange)
video.addEventListener('fullscreenchange', onFullscreenChange)
video.addEventListener('pause', event => { video.addEventListener('pause', event => {
}) })
video.addEventListener('ended', event => { video.addEventListener('ended', event => {
continueTimecode = 0 continueTimecode = 0
video.remove() video.remove()
document.getElementById('timeline-video').style.display = 'block'
if (document.webkitFullscreenElement) {
document.webkitExitFullscreen()
}
if (document.fullscreenElement) { if (document.fullscreenElement) {
document.exitFullscreen(); document.exitFullscreen();
} }
video = null video = null
}); })
video.play() video.play()
video.style.display = 'block'
if (video.webkitRequestFullscreen) {
video.webkitRequestFullscreen()
} else {
video.requestFullscreen().catch(err => {
console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
video.remove()
video = null
});
}
} }
}) })

14
app/templates/film.html
View file

@ -32,9 +32,17 @@ body {
</div> </div>
</div> </div>
<div class="video-block"> <div class="video-block">
<img src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.jpg" class="video-fallback-block"> <img src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.jpg" class="video-fallback-block">
<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" poster="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.jpg" autoplay loop muted playsinline></video> <video
id="timeline-video"
src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4"
poster="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.jpg"
autoplay
loop
muted
playsinline>
</video>
</div> </div>
<div class="summary-block"> <div class="summary-block">
<p>{{ film.data.summary|safe }}</p> <p>{{ film.data.summary|safe }}</p>