<!doctype html>
<html>
    <head>
    <title>preload test</title>
    <meta name="viewport" content="width=device-width">
    <style type="text/css" media="screen">
        body { font-family: georgia, serif; background: gray; }
        video { background: yellow; }
        .info { background-color:#e3e3f3; padding:10px; border:1px solid #9c9; width:600px; }
        .info table { background: #fff; width:600px; }
        .info td { border:1px solid; border-color:#fff #bbb #bbb #fff; background-color:#fff; padding:2px; font-size:.7em; width:50%;}
        #event_log { background: #fff; font-size:.5em; width: 100%; }
        #refresh { margin-top:10px; }
    </style>

    <script>
        document.addEventListener('loadedmetadata', querymovie);
        document.addEventListener('waiting', querymovie);
        document.addEventListener('error', querymovie);
        document.addEventListener('durationchange', querymovie);
        document.addEventListener('error', querymovie);
        document.addEventListener('stalled', querymovie);
        document.addEventListener('canplay', querymovie);

        // log all events
        var events = ["abort", "beforeload", "canplay", "canplaythrough", "durationchange", "emptied", "ended", "error", "loadeddata", "loadedmetadata", "loadstart", "pause", "play", "playing", "progress", "ratechange", "seeked", "seeking", "stalled", "suspend", "timeupdate", "volumechange", "waiting", "webkitbeginfullscreen", "webkitendfullscreen"];
        for (var i=0; i < events.length; i++)
            document.addEventListener(events[i], logProgress, true);

        function printTimeRangeValue(element, prop)
        {
            var range;
    
            if (prop == 'Max time buffered')
                range = element.buffered;
            else if (prop == "Max time seekable")
                range = element.seekable;
            else
                alert(prop);
            if (!range)
                return "undefined";

            if (range.length)
                return range.start(0).toFixed(2) + ".." + range.end(0).toFixed(2) + " [length =" + range.length + "]";
            return "[range length = " + range.length + "]";
        }
        
        function statePropertyValue(element, prop)
        {
            var readyNames = ['HAVE_NOTHING', 'HAVE_METADATA', 'HAVE_CURRENT_DATA', 'HAVE_FUTURE_DATA', 'HAVE_ENOUGH_DATA'];
            var networkNames = ['NETWORK_EMPTY', 'NETWORK_IDLE', 'NETWORK_LOADING', 'NETWORK_LOADED', 'NETWORK_NO_SOURCE'];
            var value;

            if (prop== 'Ready State')
                value = readyNames[element.readyState];
            else
                value = networkNames[element.networkState];
            return value;
        }

        function querymovie(evt)
        {
            var movieProperties = 
            [ 
                ["Source", "src"], 
                ["Current Source", "currentSrc"], 
                ["Duration", "duration"], 
                ["Video Width", "videoWidth"], 
                ["Video Height", "videoHeight"], 
                ["Default Playback Rate", "defaultPlaybackRate"], 
                ["Volume", "volume"], 
                ["Preload", "preload"], 
                ["Ready State", statePropertyValue], 
                ["Network State", statePropertyValue],
                ["Max time buffered", printTimeRangeValue], 
                ["Max time seekable", printTimeRangeValue]
            ];

            var vid = evt ? evt.target : document.getElementById('vid');
            for (var i = 0; i < movieProperties.length; i++)
            {
                var prop = movieProperties[i];
                var val;
                
                if (typeof prop[1] == 'function')
                    val = prop[1](vid, prop[0]);
                else
                    val = vid[prop[1]];
    
                if (typeof val == 'number')
                    val = val.toFixed(2);
                else if (typeof val == "undefined")
                    val = "undefined";
                document.getElementById(prop[0]).innerHTML = val;
            }
        }

        function setURL(url)
        {
            var vid = document.getElementById("vid");

            logMsg(vid, "###############");
            logMsg(vid, "##### setting url to " + url);
            if ( url != "" )
            {
                vid.src = url;
                vid.load();
            }
         }

        function clockTime()
        {
            var now = new Date();
            var hour = now.getHours();
            var minute = now.getMinutes();
            var second = now.getSeconds();
            var milli = now.getMilliseconds();
            if (hour > 12) 
                hour = hour - 12;
            else if (hour == 0) 
                hour = 12;
            if (hour   < 10) 
                hour = "0" + hour;
            if (minute < 10)
                minute = "0" + minute;
            if (second < 10) 
                second = "0" + second;
            if (milli < 10) 
                milli = "00" + milli;
            else if (milli < 100) 
                milli = "0" + milli;

            return hour + ':' + minute + ':' + second + '.' + milli;
        } 

        function logMsg(vid, msg)
        {
            document.getElementById('event_log').value += clockTime() + " - " + msg + ' \r';
        }
        
        function clearlog()
        {
            document.getElementById('event_log').value = '';
        }
        
        function logProgress(ev)
        {
            var vid = ev.target;
            
            if (ev.type == 'timeupdate')
            {
                var logTimeupdate = document.getElementById('log-timeupdate');
                if (!logTimeupdate.checked)
                    return;
            }
            if (ev.type == 'progress')
            {
                var logTimeupdate = document.getElementById('log-progress');
                if (!logTimeupdate.checked)
                    return;
            }

            logMsg(vid, ev.type + ' (time = ' + vid.currentTime.toFixed(2) + ')');
        }
        
        function logError(ev)
        {
            var vid = ev.target;
            logMsg(vid, "vid.error = " + vid.error.code);
        }


        function preload(value)
        {
            var vid = document.getElementById("vid");
            var old = vid.preload;
            vid.preload=value;
            querymovie();
        }
    </script>

</head>

<body onload="querymovie()">
    <p>
        <video id="vid" src="http://trailers.apple.com/movies/weinstein/submarine/submarine-tlr1_480p.mov" height="391" 
            controls preload="metadata">
        </video>
    </p>
    <p>
        <button id="controls" onclick="preload('none')">preload=none</button>
        <button id="controls" onclick="preload('metadata')">preload=metadata</button>
        <button id="controls" onclick="preload('auto')">preload=auto</button>
    </p>

    <div class="info">
        <input id="querymovie" type="button" value="Refresh" onclick="querymovie()">
        <br>
        <table>
            <tbody>
                <tr><td>Preload</td><td id="Preload"></td></tr>
                <tr><td>Error</td><td id="Error"></td></tr>
                <tr><td>Duration</td> <td id="Duration"></td></tr>
                <tr><td>Video Width</td><td id="Video Width"></td></tr>
                <tr><td>Video Height</td><td id="Video Height"></td></tr>
                <tr><td>Default Playback Rate</td><td id="Default Playback Rate"></td></tr>
                <tr><td>Volume</td><td id="Volume"></td></tr>
                <tr><td>Ready State</td><td id="Ready State"></td></tr>
                <tr><td>Network State</td><td id="Network State"></td></tr>
                <tr><td>Max time buffered</td><td id="Max time buffered"></td></tr>
                <tr><td>Max time seekable</td><td id="Max time seekable"></td></tr>
                <tr><td>Source</td><td id="Source"></td></tr>
                <tr><td>Current Source </td> <td id="Current Source"></td></tr>
            </tbody>
        </table>
    </div>

    <br>
    <div class="info">
        Enter a url:<input  type="text" size="90" maxlength="2048" onchange="setURL(this.value)" >
        <br>
        <input id="clear_log" type="button" value="Clear" onclick="clearlog()"> 
        <input type="checkbox" id="log-progress"> log 'progress' events
        <input type="checkbox" checked id="log-timeupdate"> log 'timeupdate' events
        <textarea rows=30 cols=30 id=event_log></textarea>
        <div id="event_log"></div>
    </div>

</body>
</html>