41 lines
1.3 KiB
HTML
41 lines
1.3 KiB
HTML
|
{% extends "base.html" %}
|
||
|
{% block page %}
|
||
|
<div id="song-playlist">
|
||
|
<video id="video-playlist" class="video-js"
|
||
|
controls preload="auto" width="600" height="400"
|
||
|
>
|
||
|
<p class="vjs-no-js">
|
||
|
To view this video please enable JavaScript, and consider upgrading to a web browser that
|
||
|
<a href="https://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a>
|
||
|
</p>
|
||
|
</video>
|
||
|
<div class="vjs-playlist"></div>
|
||
|
</div>
|
||
|
|
||
|
<script>
|
||
|
var player = videojs('video-playlist', {});
|
||
|
player.playlist([
|
||
|
{% for song in songs %}
|
||
|
{% if song.video %}
|
||
|
{
|
||
|
sources: [{
|
||
|
src: '{{ song.video|url }}',
|
||
|
type: '{{ song.video_type }}'
|
||
|
}],
|
||
|
poster: '{{ song.cover|url }}',
|
||
|
thumbnail: '{{ song.thumbnail|url }}',
|
||
|
name: '{{ song.name }}',
|
||
|
{% if song.vtt %}
|
||
|
textTracks:[ { "kind":"captions", "label":"Negro mate", "src":"{{ song.vtt|url}}", "default":true } ]
|
||
|
{% endif %}
|
||
|
},
|
||
|
{% endif %}
|
||
|
{% endfor %}
|
||
|
]);
|
||
|
|
||
|
// Play through the playlist automatically.
|
||
|
player.playlist.autoadvance(0);
|
||
|
player.playlistUi();
|
||
|
</script>
|
||
|
{% endblock %}
|