<!DOCTYPE html>
<html>
    <head>
        <script src=media-file.js></script>
        <script src=video-test.js></script>

        <script>
        var controller;
        var video2;

        function start()
        {
            var videos = document.getElementsByTagName('video');
            video = videos[0];
            video2 = videos[1];
            run('controller = video.controller');
            controller.addEventListener('canplaythrough', canplaythrough, true);
            var src = findMediaFile('video', 'content/test');
            video.src = src;
            video2.src = src;
        }

        function canplaythrough()
        {
            consoleWrite("EVENT(canplaythrough)");
            controller.removeEventListener('canplaythrough', canplaythrough, true);
            controller.addEventListener('pause', pause, true);
            run('controller.pause()');
        }

        function pause() {
            consoleWrite("EVENT(pause)");
            controller.removeEventListener('pause', pause, true);
            controller.addEventListener('play', play, true);
            run('controller.unpause()');
        }

        function play()
        {
            consoleWrite('EVENT(play)');
            controller.removeEventListener('play', play, true);
            testExpected('controller.playbackState', 'waiting');
            controller.addEventListener('playing', playing, true);
            run('controller.play()');
        }

        function playing()
        {
            consoleWrite("EVENT(playing)");
            controller.removeEventListener('playing', playing, true);
            endTest();
        }
        </script>
    </head>
    <body onload="start()">
        <video mediaGroup="group" controls></video>
        <video mediaGroup="group" controls></video>
    </body>
</html>