<!DOCTYPE html>
<html>
    <head>
        <script src=video-test.js></script>
        <script src=media-file.js></script>
        <script>
            var canPlayThroughCount = 0;
            function onCanPlayThrough() {
                if (++canPlayThroughCount == document.getElementsByTagName('video').length + document.getElementsByTagName('audio').length) {
                    endTest();
                    return;
                }
            }
            function onError(e) {
                var type = e.target.type;
                if (!type) {
                    var src = e.target.src;
                    var semicolon;
                    if ((src.substr(0,5) == "data:") && ((semicolon = src.substr(5).indexOf(';')) > 0))
                        type = src.substr(5).substr(0, semicolon);
                    if (!type) {
                        failTest("Couldn't find type");
                        return;
                    }
                }

                if (e.target.tagName == 'SOURCE' && !e.target.parentNode.canPlayType(type)) {
                    // Expected error; ignore.
                    return;
                }
                var id = (e.target.tagName == 'SOURCE' ? e.target.parentNode.id : e.target.id);
                failTest("tag: " + e.target.tagName + ", id: " + id + ", src: " + e.target.src);
            }
            
            function createSourceOfType(type)
            {
                const source = document.createElement('source');
                source.type = `video/${type}`;
                source.src = dataURL(type);
                return source;
            }

            function setup()
            {
                let video = document.getElementById('v3');
                video.appendChild(createSourceOfType('mp4'));
                video.appendChild(createSourceOfType('ogg'));

                video = document.getElementById('v4');
                video.appendChild(createSourceOfType('mp4'));
                video.appendChild(createSourceOfType('ogg'));
            }
            </script>
    </head>
    <body onload="setup()">
        Test that fallback among codecs is done correctly regardless of their order.
        <!-- This could be made far more general, testing all permutations of
             (audio|video)Codecs and so on, but in reality we only have these 4
             test files, so simply enumerating them manually and testing they
             all hit canplaythrough is good enough.  Someday when many more
             files are present, consider generalizing this.
        -->

        <video id='v1' controls oncanplaythrough='onCanPlayThrough()' onerror='onError(event)'>
            <source onerror='onError(event)' type="video/mp4" src="content/test.mp4"/>
            <source onerror='onError(event)' type="video/ogg" src="content/test.ogv"/>
        </video>

        <video id='v2' controls oncanplaythrough='onCanPlayThrough()' onerror='onError(event)'>
            <source onerror='onError(event)' type="video/ogg" src="content/test.ogv"/>
            <source onerror='onError(event)' type="video/mp4" src="content/test.mp4"/>
        </video>

        <audio id='a1' controls oncanplaythrough='onCanPlayThrough()' onerror='onError(event)'>
            <source onerror='onError(event)' type="audio/wav" src="content/test.wav"/>
            <source onerror='onError(event)' type="audio/ogg" src="content/test.oga"/>
        </audio>

        <audio id='a2' controls oncanplaythrough='onCanPlayThrough()' onerror='onError(event)'>
            <source onerror='onError(event)' type="audio/ogg" src="content/test.oga"/>
            <source onerror='onError(event)' type="audio/wav" src="content/test.wav"/>
        </audio>

        <video id="v3" controls oncanplaythrough='onCanPlayThrough()' onerror='onError(event)'>
        </video>

        <video id="v4" controls oncanplaythrough='onCanPlayThrough()' onerror='onError(event)'>
        </video>

    </body>
</html>