<!DOCTYPE html>
<html>
<head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <title>Video Player</title>
        <link rel="stylesheet" type="text/css" href="css/styles.css" />
</head>
<body>

    <div class="srt"></div>

    <div style="float:right; padding: 10px;">Events: <ol class="events" style="height: 390px; overflow: scroll;"></ol></div>

    <div id="video-container"></div>
    <div id="youtube-video-container"></div>

    <hr />

    <div>Current time/ Duration: <span class="time"></span>/<span class="duration"></span></div>
    <div>Speed: <span class="speed"></span></div>
    <div>Muted: <span class="mute"></span></div>
    <div>Volume level: <span class="volume"></span></div>
    <div>Quality: <span class="quality"></span></div>



    <!--script type="text/javascript" src="../build/VideoPlayer.min.js"></script-->
    <script>
        var requirejs = {
            baseUrl: 'js/',
            paths: {
                'jquery': '../../lib/1.7.2.jquery.min'
            }
        }
    </script>
    <script src="../lib/require.js"></script>


    <script type="text/javascript">
        // new s2js.Video('HTML5', $('#video-container'), {
        //     sources: [
        //         'https://s3.amazonaws.com/edx-course-videos/edx-intro/edX-FA12-cware-1_100.mp4.mp4',
        //         'https://s3.amazonaws.com/edx-course-videos/edx-intro/edX-FA12-cware-1_100.webm'],
        //     volume: 0.5,
        //     playbackRate: 2.0,
        //     autoplay: false,
        //     controls: true,
        //     loop: true,
        //     muted: true,
        // });
    </script>

    <script type="text/javascript">
require([
    'utils', 'player', 'controls/vcr', 'controls/play_button',
    'controls/mute_button', 'controls/progress_slider', 'controls/transcripts', 'components/menu'
], function (Utils, Video, VCR, PlayButton, MuteButton, ProgressSlider, Transcripts, Menu) {
    p = new Video('Youtube', $('#youtube-video-container'), {
        videoId: 'M7lc1UVf-VE',
        volume: 0.75,
        playbackRate: 1.0,
        autoplay: 0,
        controls: 1,
        loop: 1,
        muted: true,
        plugins: [
            VCR,
            PlayButton,
            MuteButton,
            ProgressSlider,
            Transcripts,
            Menu
        ]
    });

    var d = document.getElementById('s2js-player-0');

    var updateEvent = function (event) {
        $('.events').append('<li>' + event + '</li>')
    };

    d.addEventListener('timeupdate', function () {
        $('.time').html(Utils.Utils.secondsToTimecode(p.currentTime));
    });
    d.addEventListener('durationchange', function () {
        $('.duration').html(Utils.Utils.secondsToTimecode(p.duration));
    });
    d.addEventListener('volumechange', function () {
        $('.volume').html(p.volume);
        $('.mute').html(p.muted.toString());
    });
    d.addEventListener('ratechange', function () {
        $('.speed').html(p.playbackRate);
    });
    d.addEventListener('qualitychange', function () {
        $('.quality').html(p.playbackQuality);
    });


    ['canplay', 'ratechange', 'loadedmetadata', 'loadeddata', 'durationchange',
        'ended', 'play', 'playing', 'pause', 'progress', 'qualitychange', 'error',
        'volumechange'
    ].forEach(function (eventName) {
        d.addEventListener(eventName, function () {
            updateEvent(eventName);
        }, false);
    });
});
    </script>
</body>
</html>
