{% extends "base.html" %}
{% block content %}
    <h1>{{ video.name }}</h1>
    {% if video.original %}
    <p><b>Original:</b> {{ video.original }}</p>
    {% endif %}
    {% if video.author %}
    <p><b>Autoría:</b> {{ video.author }}</p>
    {% endif %}
    {% if video.video %}
    <video id="{{ video.path.name }}-video" class="video-js"
        controls preload="auto" width="640" height="264"
        {% if video.cover %}poster="{{ video.cover|url }}"{% endif %}>
        <source src="{{ video.video|url }}" type='video/mp4'>
        {% if video.vtt %}
        <track kind="captions" src="{{ video.vtt|url }}" srclang="nm" label="Negro mate" default>
        {% endif %}
        <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>
    {% endif %}
    {% if video.files %}
    <ul class="files">
        {% for entry in video.files %}
            <li><a href="{{ entry|url }}">{{ entry.name }}</a></li>    
        {% endfor %}
    </ul>
    {% endif %}

<script>
videojs('{{ video.path.name }}-video', {
    plugins: {
        {% if video.ass %}
        ass: {
            'src': ["{{ video.ass|url }}"],
            // videoWidth: 640,
            // videoHeight: 360,
            // enableSvg: false
        }
        {% endif %}
    },
});
</script>
{% endblock %}