<!DOCTYPE html>
<html>
<head>
    <script src="../video-test.js"></script>
    <script src="../media-file.js"></script>
    <script type="text/javascript">
        var session, video1, video2;

        function runTest() 
        {
            session = new MediaSession("content");

            video1 = document.getElementById("video1");
            waitForEvent('canplaythrough', beginPlayingVideo1, false, true, video1);
            video1.src = findMediaFile("video", "../content/counting");
            video1.session = session;
            waitForEvent('playing', beganPlayingVideo1, false, true, video1);
        }

        function beginPlayingVideo1(event)
        {
            testExpected('video1.paused', true);

            consoleWrite("Begin playing first video.");
            video1.play();
        }

        function beganPlayingVideo1(event)
        {
            consoleWrite("First video began playing.");
            testExpected('video1.paused', false);
            
            consoleWrite("");
            consoleWrite("Setting up second video.");
            
            video2 = document.getElementById("video2");
            waitForEvent('canplaythrough', beginPlayingVideo2, false, true, video2);
            video2.src = findMediaFile("video", "../content/counting");
            video2.session = session;
            waitForEvent('playing', beganPlayingVideo2, false, true, video2);
        }
        
        function beginPlayingVideo2(event)
        {
            testExpected('video1.paused', false);
            testExpected('video2.paused', true);
            waitForEvent('pause', pausedVideo1, false, true, video1);

            consoleWrite("Begin playing second video.");
            video2.play();
        }
        
        function pausedVideo1(event)
        {
            testExpected('video1.paused', true);
            endTest();
        }

        function beganPlayingVideo2(event)
        {
            consoleWrite("Second video began playing.");
            testExpected('video2.paused', false);
        }
    </script>
</head>
<body onload="runTest()">
    <p>Playing a media element belonging to a Content media session should pause other playing Content media elements.</p>
    <video id="video1" />
    <video id="video2" />
</body>
</html>