{{ extends 'global/Page.html' }}
{{ block title }}Video 1 von 2{{ endblock }}

{{ block content }}

<input type="hidden" name="ms_spent_video_1" id="ms_spent_video_1" />

<p>
    Bitte sehen Sie sich das erste Video an.
</p>

<div class="videowrapper">
    <video controls playsinline>
        <source src="{{ media_url }}" type="video/mp4">
        Ihr Browser unterstützt leider kein HTML5 Video.
    </video>
</div>

<button class='otree-btn-next btn btn-primary' id='next' onclick='nextPage()' disabled>Weiter</button>

<script>
    var loadTime = 0;

    window.onload = function () { // page loaded including media
        loadTime = Date.now();

        const media = document.querySelector('video');
        media.addEventListener('ended', (event) => {
            const button = document.getElementById('next');
            button.disabled = false;
        });
    };

    function nextPage() {
        document.getElementById('ms_spent_video_1').value = Date.now() - loadTime;
    };
</script>

{{ endblock }}