<!DOCTYPE html>
<html>
<head>
<script src="../resources/runner.js"></script>
<script>
var video;
var url;

window.addEventListener('load', () => {
    PerfTestRunner.prepareToMeasureValuesAsync({
        unit: 'ms',
        done: function () {
            if (video) {
                video.src = null;
                video.load();
            }
        }
    });

    loadMediaData('test.mp4').then((blob) => {
        url = URL.createObjectURL(blob);
        runTest();
    });
});

function loadMediaData(url) {
    return new Promise((resolve, reject) => {
        var request = new XMLHttpRequest();
        request.open('GET', url, true);
        request.responseType = 'blob';
        request.addEventListener('load', (event) => {
            resolve(event.target.response);
        });
        request.addEventListener('error', (event) => {
            reject(event.error);
        });
        request.send();
    })
}

function runTest() {   
    video = document.createElement('video');

    if (navigator.userAgent.match(/iPod|iPhone|iPad/) && !window.MSStream) {
        video.setAttribute('muted', 'true');
        video.setAttribute('autoplay', 'allowed');
    }

    var startTime = PerfTestRunner.now();
    video.src = url;
    video.addEventListener('canplaythrough', () => {
        if (!PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime))
            return;

        PerfTestRunner.gc();
        setTimeout(runTest, 0);
    });
}

</script>
</head>
<body>
    <button onclick="pauseAll()">pause</button><button onclick="playAll()">play</button><br>
</body>
</html>