<!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();
            }
        }
    });

    runTest();
});

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

    video.src = 'hls/index.m3u8';
    video.addEventListener('canplaythrough', () => {
        video.play();
        var startTime = PerfTestRunner.now();

        video.addEventListener('resize', () => {
            if (!PerfTestRunner.measureValueAsync(PerfTestRunner.now() - startTime))
                return;

            document.body.removeChild(video);
            PerfTestRunner.gc();
            setTimeout(runTest, 0);
        })
    });
}

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