njpma/app/static/js/film.js

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()
    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) {
            video.removeEventListener('play', enterFullscreen);
            if (video.webkitRequestFullscreen) {
                video.requestFullscreen();
            } 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
                video.remove()
                if (document.fullscreenElement) {
                    document.exitFullscreen();
                }
                video = null
            }
        });
        video.addEventListener('pause', event => {
        })
        video.addEventListener('ended', event => {
            continueTimecode = 0
            video.remove()
            if (document.fullscreenElement) {
                document.exitFullscreen();
            }
            video = null
        });
        video.play()
    }
})