JSFiddle - React, Tailwind, and code Playground

forked from jsfiddle.net/jPlayer/HK34C/ ,,,,, iOS6 Bug: Media element: readyState=4 but seekable.length=0 and changing currentTime ignored ,,,,,,,, jsFiddle shows 3 situations: Kick the process off with a media.load() then either: 1) Polling a currentTime change until it does not throw an exception. (No effect.) 2) Polling readyState until it equals 4 and then changing currentTime. (No effect.) 3) Polling seekable.length until is it greater than 0 and then changing currentTime. (Works!) While in many ways it does make sense that you cannot change currentTime before seekable.length>0, on the other hand, it does not make sense that the readyState=4 when seekable.length=0.

by dledle2

HTML

<div id="video-anchor"></div>
<p>
    Testing effect of changing currentTime=10 after a load() WRT readyState and seekable.length.<br/>
    Test one per page reload.
</p>
<button id="go-1">Change only currentTime</button> &larr; Bugged<br/>
<button id="go-2">Change currentTime when readyState=4</button> &larr; Bugged<br/>
<button id="go-3">Change currentTime when seekable.length&gt;0</button> &larr; Works<br/>
<button id="stop">stop test</button> (Video stops at 12s by default.)
<div id="log"></div>

CSS

video {
    width:240px;
    height:135px;
}
#log {
    border:1px solid #000;
    height:240px;
    overflow: scroll;
}

JavaScript

var video = document.createElement('video'),
    anchor = document.getElementById('video-anchor'),
    log = document.getElementById('log'),
    startTime = 0,
    logMsg = function(msg) {
        var time = startTime ? (Date.now() - startTime)/1000 : -1,
            textNode = document.createTextNode(time + ' : ' + msg),
            brElem = document.createElement('br');
        log.appendChild(textNode);
        log.appendChild(brElem);
    },
    getInfo = function(media) {
        var msg = 'readyState=' + media.readyState;
        msg += ' | seekable.length=' + media.seekable.length;
        msg += ' | currentTime=' + media.currentTime;
        return msg;
    },
    checkTime = function(media, t) {
        return media.currentTime === t;
    },
    test1 = function(t) {
        try {
            video.currentTime = t;
            video.play();
            logMsg((checkTime(video, t)?'pass: ':'BUG: ') + getInfo(video) + ' | t=' + t);
        } catch(err) {
            logMsg('exception on changing currentTime: ' + getInfo(video) + ' | t=' + t);
            setTimeout(function() {
                test1(t);
            }, 100);
        }
    },
    test2 = function(t) {
        if(video.readyState === 4) {
            try {
                video.currentTime = t;
                video.play();
                logMsg((checkTime(video, t)?'pass: ':'BUG: ') + getInfo(video) + ' | t=' + t);
            } catch(err) {
                logMsg('exception on changing currentTime: ' + getInfo(video) + ' | t=' + t);
                setTimeout(function() {
                    test2(t);
                }, 100);
            }
        } else {
            logMsg('waiting on readyState: ' + getInfo(video) + ' | t=' + t);
            setTimeout(function() {
                test2(t);
            }, 100);
        }
    },
    test3 = function(t) {
        if(video.seekable.length > 0) {
            try {
                video.currentTime = t;
                video.play();
        ...