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

slightly weird things to make play button work in safari

Browse source
This commit is contained in:
Sanjay B 2021-10-26 18:34:08 +05:30
parent 7fb6fcea4a
commit 410494d1ae
2 changed files with 46 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

54
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 a 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,32 +37,29 @@ document.querySelector('a#play-fullscreen').addEventListener('click', event => {
if (continueTimecode) { if (continueTimecode) {
video.currentTime = continueTimecode video.currentTime = continueTimecode
} }
function enterFullscreen(event) { // function enterFullscreen(event) {
video.removeEventListener('play', enterFullscreen); // console.log('enter fullscreen called')
if (video.webkitRequestFullscreen) { // video.removeEventListener('play', enterFullscreen)
video.webkitRequestFullscreen();
} else { // // setTimeout(() => {
video.requestFullscreen().catch(err => { // // video.style.display = 'block'
console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`); // // }, 150)
video.remove() // }
video = null // video.addEventListener('play', enterFullscreen);
});
} function onFullscreenChange (event) {
setTimeout(() => { if (document.fullscreenElement === null || document.webkitFullscreenElement === null) {
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()
if (document.fullscreenElement) { document.getElementById('timeline-video').style.display = 'block'
if (document.fullscreenElement || document.webkitFullscreenElement) {
document.exitFullscreen(); document.exitFullscreen();
} }
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 => {
@ -69,5 +71,17 @@ document.querySelector('a#play-fullscreen').addEventListener('click', event => {
video = null video = null
}); });
video.play() 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
});
}
} }
}) })

14
app/templates/film.html
View file

@ -32,8 +32,18 @@ body {
</div> </div>
</div> </div>
<div class="video-block"> <div class="video-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>