{% extends "/html/base.html" %}
{%block subtitle %}: {{page.title}}{% endblock %}


{% block head %}
<link rel="stylesheet" href="/assets/videojs/video-js.css">
<script src="/assets/videojs/video.js"></script>
<script src="/assets/videojs/videojs-contrib-hls.js"></script>
{% endblock %}

{% block content %}


<div id="custom-page">
    <div id="page-header">
        <h2>{{page.title}}</h2>
    </div>
    {% if page.toc %}{{page.toc|safe}}{% endif %}

<video id="video-player" width="640" height="360" class="video-js vjs-default-skin" 
controls poster="{{page.video-thumbnail-url}}" data-setyp='{"controls": "true", "loop": "false", "autoplay": "false", "preload": "false"}'>
  <source src="{{page.video-url}}" type="application/x-mpegURL">
  </source>
  <p class="vjs-no-js">The browser doesn't seem to support our video player... new browsers should.</p>
</video>

<p>{{page.video-description}}</p>

<script>
var player = videojs('video-player');
//player.play();
</script>

    {{page.content|safe}}



    <div id="prev-next">
        {% if page.prev %}
        <a href="{{page.prev.uri}}">&laquo; {{page.prev.title}}</a>
        {% endif %}
        {% if all page.prev page.next %}
        ||
        {% endif %}
        {% if page.next %}
        <a href="{{page.next.uri}}">{{page.next.title}} &raquo;</a>
        {% endif %}
    </div>
</div>
{% endblock %}