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 => {
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')
@ -32,32 +37,29 @@ document.querySelector('a#play-fullscreen').addEventListener('click', event => {
if (continueTimecode) {
video.currentTime = continueTimecode
}
function enterFullscreen(event) {
video.removeEventListener('play', enterFullscreen);
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
});
}
setTimeout(() => {
video.style.display = 'block'
}, 150)
}
video.addEventListener('play', enterFullscreen);
video.addEventListener('fullscreenchange', event => {
if (document.fullscreenElement === null) {
// 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()
if (document.fullscreenElement) {
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 => {
@ -69,5 +71,17 @@ document.querySelector('a#play-fullscreen').addEventListener('click', event => {
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
});
}
}
})

12
app/templates/film.html
View file

@ -33,7 +33,17 @@ body {
</div>
<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 class="summary-block">
<p>{{ film.data.summary|safe }}</p>