add links
This commit is contained in:
parent
4faf546335
commit
0232f6fe87
3 changed files with 62 additions and 0 deletions
2
app/static/css/partials/_film.scss
Normal file
2
app/static/css/partials/_film.scss
Normal file
|
@ -0,0 +1,2 @@
|
||||||
|
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
@import "partials/reset";
|
@import "partials/reset";
|
||||||
@import "partials/layout";
|
@import "partials/layout";
|
||||||
@import "partials/burger";
|
@import "partials/burger";
|
||||||
|
@import "partials/film";
|
||||||
@import "partials/ascroll";
|
@import "partials/ascroll";
|
||||||
|
|
|
@ -6,4 +6,63 @@
|
||||||
<h1>{{ film.data.title | safe }}</h1>
|
<h1>{{ film.data.title | safe }}</h1>
|
||||||
<h2>{{ film.data.director|join:", "|safe }}</h2>
|
<h2>{{ film.data.director|join:", "|safe }}</h2>
|
||||||
<p>{{ film.data.summary|safe }}</p>
|
<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 %}
|
{% endblock %}
|
||||||
|
|
Loading…
Reference in a new issue