njpma/app/static/js/film.js

var videoExtension

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)
}

document.querySelector('a#play-fullscreen').addEventListener('click', event => {
    event.preventDefault()
    event.stopPropagation()
    var video = document.createElement('video')
    video.classList.add('player')
    setVideoSrc(video, 'https://pad.ma/' + film.id + '/480p.webm')
    video.controls = true
    document.querySelector('main').appendChild(video)
    video.style.display = 'none'
    function enterFullscreen(event) {
        video.requestFullscreen().catch(err => {
            console.log(`Error attempting to enable full-screen mode: ${err.message} (${err.name})`);
            video.remove()
        });
        video.removeEventListener('play', enterFullscreen);
        setTimeout(() => {
            video.style.display = 'block'
        }, 150)
    }
    video.addEventListener('play', enterFullscreen);
    video.addEventListener('fullscreenchange', event => {
        if (!document.fullscreen) {
            video.remove()
            if (document.fullscreenElement) {
                document.exitFullscreen();
            }
        }
    });
    video.addEventListener('pause', event => {
    })
    video.addEventListener('ended', event => {
        video.remove()
        if (document.fullscreenElement) {
            document.exitFullscreen();
        }
    });
    video.play()
})