njpma/app/templates/film.html

{% extends "base.html" %}
{% block main %}

<div class="film">
<div class="info">
<h1>{{ film.data.title | safe }}</h1>
{% comment %}
<h2>{{ film.data.director|join:", "|safe }}</h2>
{% endcomment %}
<p>{{ film.data.summary|safe }}</p>
<div class="details">
Runtime: {{ film.duration }},
Year: {{ film.data.date}},
Artist Bio: {{ film.data.bio|safe }}
</div>
</div>

<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
<div class="play">
    <div>
        <a href="" id="play-fullscreen">Play</a>
    </div>
	<div class="texts">
		{% for text in film.related_texts %}
		<div class="text">
			<a href="{{ text.get_absolute_url }}">
				{{ text.title }}<br>
				{{ text.byline }}
			</a>
		</div>
		{% endfor %}
    </div>
</div>
{% endblock %}

{% block end %}
<script>
	var film = {
		id: "{{ film.padma_id }}",
	}
</script>
		<script>
document.querySelector('a#play-fullscreen').addEventListener('click', event => {
	var video = document.createElement('video')
	video.classList.add('player')
	video.src = '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.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()
	
	event.preventDefault()
	event.stopPropagation()
})
		</script>

{% endblock %}