javascript - 尝试使用 MSE 播放 webm 时出错， block 未附加，视频停止

Question

我想玩持续时间 >5 秒(1.32 分钟)的 webm this webm .

我一直在尝试修改这个示例，当我运行它时， block 没有附加并且视频在某个时候停止，我收到了这个错误:

InvalidStateError:尝试使用一个不可用或不再可用的对象sourceBuffer.appendBuffer(new Uint8Array(e.target.result));

有人可以澄清一下吗？

<script>
    var FILE = 'test2.webm'; //that webm
    var NUM_CHUNKS = 10;
    var video = document.querySelector('video');

    window.MediaSource = window.MediaSource || window.WebKitMediaSource;
    if (!!!window.MediaSource) {
        alert('MediaSource API is not available');
    }

    var mediaSource = new MediaSource();

    //document.querySelector('[data-num-chunks]').textContent = NUM_CHUNKS;

    video.src = window.URL.createObjectURL(mediaSource);

    function callback(e) {
        var sourceBuffer = mediaSource.addSourceBuffer('video/webm; codecs="vorbis,vp8"');

        logger.log('mediaSource readyState: ' + this.readyState);

        GET(FILE, function(uInt8Array) {
            var file = new Blob([uInt8Array], {
                type: 'video/webm'
            });
            var chunkSize = Math.ceil(file.size / NUM_CHUNKS);

            logger.log('num chunks:' + NUM_CHUNKS);
            logger.log('chunkSize:' + chunkSize + ', totalSize:' + file.size);

            // Slice the video into NUM_CHUNKS and append each to the media element.
            var i = 0;
            (function readChunk_(i) {
                var reader = new FileReader();

                // Reads aren't guaranteed to finish in the same order they're started in,
                // so we need to read + append the next chunk after the previous reader
                // is done (onload is fired).
                reader.onload = function(e) {
                    sourceBuffer.appendBuffer(new Uint8Array(e.target.result));
                    logger.log('appending chunk:' + i);
                    if (i == NUM_CHUNKS - 1) {
                        mediaSource.endOfStream();
                    } else {
                        if (video.paused) {
                            video.play(); // Start playing after 1st chunk is appended.
                        }
                        readChunk_(++i);
                    }
                };

                var startByte = chunkSize * i;
                var chunk = file.slice(startByte, startByte + chunkSize);

                reader.readAsArrayBuffer(chunk);
            })(i); // Start the recursive call by self calling.
        });
    }

    mediaSource.addEventListener('sourceopen', callback, false);
    mediaSource.addEventListener('webkitsourceopen', callback, false);

    mediaSource.addEventListener('webkitsourceended', function(e) {
        logger.log('mediaSource readyState: ' + this.readyState);
    }, false);

    function GET(url, callback) {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'arraybuffer';
        xhr.send();

        xhr.onload = function(e) {
            if (xhr.status != 200) {
                alert("Unexpected status code " + xhr.status + " for " + url);
                return false;
            }
            callback(new Uint8Array(xhr.response));
        };
    }
</script>
<script>
    function Logger(id) {
        this.el = document.getElementById('log');
    }
    Logger.prototype.log = function(msg) {
        var fragment = document.createDocumentFragment();
        fragment.appendChild(document.createTextNode(msg));
        fragment.appendChild(document.createElement('br'));
        this.el.appendChild(fragment);
    };

    Logger.prototype.clear = function() {
        this.el.textContent = '';
    };

    var logger = new Logger('log');
</script>
<script>
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-22014378-1']);
    _gaq.push(['_trackPageview']);

    (function() {
        var ga = document.createElement('script');
        ga.type = 'text/javascript';
        ga.async = true;
        ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
        var s = document.getElementsByTagName('script')[0];
        s.parentNode.insertBefore(ga, s);
    })();
</script>

Answer 1

根据您提供的示例，您的视频在我的播放器中运行良好。我不调用 mediaSource.endOfStream();而且我没有使用 FileReader 类(无用)切片文件。

使用 Range http header 直接从您的网络服务器获取切片。

例子:

function GET(url, from = 0, to = '') {
    return new Promise((accept, reject) => {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.responseType = 'arraybuffer';
        xhr.setRequestHeader("Range", `bytes=${from}-${to}`);
        xhr.send();

        xhr.onload = function(e) {
            if (xhr.status != 200 && xhr.status != 206) {
                alert("Unexpected status code " + xhr.status + " for " + url);
                reject(e);
            }
            accept(xhr.response);
        };
    });
}