phantasma/app/templates/film.html
2021-09-30 18:30:36 +01:00

68 lines
1.7 KiB
HTML

{% extends "base.html" %}
{% block main %}
<video src="{{ settings.TIMELINE_PREFIX }}{{ film.padma_id }}/loop.mp4" autoplay loop muted></video>
<h1>{{ film.data.title | safe }}</h1>
<h2>{{ film.data.director|join:", "|safe }}</h2>
<p>{{ film.data.summary|safe }}</p>
<div>
<a href="" id="play-fullscreen">Watch Fullscreen</a>
</div>
<div>
<a href="play/en">Watch with Annotations</a>
</div>
<div>
<a href="play/zh">Watch with Annotations (Mandarin title)</a>
</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 %}