Adición de reproductor de video fresón
This commit is contained in:
parent
6e67acc78c
commit
fa0b6c0fc6
|
@ -214,6 +214,29 @@
|
||||||
height: calc(100% - 3em);
|
height: calc(100% - 3em);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* Reproductor */
|
||||||
|
|
||||||
|
section#notice {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#notice div {
|
||||||
|
padding: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#notice p {
|
||||||
|
font-weight: bold;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
|
||||||
|
section#notice a {
|
||||||
|
display: block;
|
||||||
|
width: fit-content;
|
||||||
|
margin: auto;
|
||||||
|
}
|
||||||
|
|
||||||
/* ICONS; cfr: https://css.gg */
|
/* ICONS; cfr: https://css.gg */
|
||||||
|
|
||||||
.gg-time {
|
.gg-time {
|
||||||
|
|
File diff suppressed because one or more lines are too long
|
@ -0,0 +1,49 @@
|
||||||
|
// Deshabilita scroll con la tecla de espacio
|
||||||
|
// Esto es para que en 'player' quede habilitado para reproducción
|
||||||
|
window.addEventListener('keydown', (e) => {
|
||||||
|
if (e.keyCode === 32 && e.target === document.body) {
|
||||||
|
e.preventDefault();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
// Añade un aviso
|
||||||
|
function add_notice () {
|
||||||
|
const divs = document.querySelectorAll('.plyr');
|
||||||
|
// Ejecuta de nuevo hasta que esté implementado el reproductor
|
||||||
|
if (divs.length == 0) {
|
||||||
|
setTimeout(add_notice, 500);
|
||||||
|
} else {
|
||||||
|
let hero_sec = document.createElement('section'),
|
||||||
|
hero_div = document.createElement('div'),
|
||||||
|
hero_tit = document.createElement('p'),
|
||||||
|
hero_btn = document.createElement('a');
|
||||||
|
hero_sec.id = 'notice';
|
||||||
|
hero_sec.classList.add('hero', 'is-small', 'is-warning', 'has-text-centered');
|
||||||
|
hero_div.classList.add('hero-body');
|
||||||
|
hero_btn.classList.add('button', 'is-small', 'is-success');
|
||||||
|
hero_btn.addEventListener('click', remove_notice);
|
||||||
|
hero_tit.innerText = 'Mauflix funciona con pocos recursos. Para un uso más eficiente te recomendamos descargar la película.';
|
||||||
|
hero_btn.innerText = '¡Entendido!';
|
||||||
|
hero_tit.appendChild(hero_btn);
|
||||||
|
hero_div.appendChild(hero_tit);
|
||||||
|
hero_sec.appendChild(hero_div);
|
||||||
|
divs[0].appendChild(hero_sec);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Elimina aviso
|
||||||
|
function remove_notice () {
|
||||||
|
let notice = document.querySelector('#notice');
|
||||||
|
console.log('notice', notice)
|
||||||
|
if (notice !== null) {
|
||||||
|
notice.parentNode.removeChild(notice);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// Implementa el reproductor
|
||||||
|
const player = new Plyr('#player', {
|
||||||
|
keyboard: { focused: true, global: true },
|
||||||
|
controls: ['play-large', 'play', 'progress', 'current-time', 'mute',
|
||||||
|
'volume', 'pip', 'airplay', 'download', 'fullscreen'],
|
||||||
|
listeners: { seek: add_notice() },
|
||||||
|
});
|
File diff suppressed because one or more lines are too long
|
@ -60,9 +60,14 @@
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
{% if user.is_superuser %}
|
{% if user.is_superuser %}
|
||||||
<video controls>
|
<video id="player" playsinline controls data-poster="{{ movie.cartel }}">
|
||||||
<source src="{{ movie.file_name }}" type="video/mp4">
|
<source src="{{ movie.file_name }}" type="video/mp4">
|
||||||
</video>
|
</video>
|
||||||
|
{% load static %}
|
||||||
|
<!-- CSS y JS necesario paara el reproductor -->
|
||||||
|
<link rel="stylesheet" href="{% static 'css/plyr.css' %}">
|
||||||
|
<script type="text/javascript" src="{% static 'js/plyr.js' %}"></script>
|
||||||
|
<script type="text/javascript" src="{% static 'js/player.js' %}"></script>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue