javascript - 从 MediaSource 播放时无法搜索视频

Question

我可以通过使用 GET 请求和 Range header 请求数据 block 来播放 mp4 视频。

var FILE = 'Momokuri_Ep_09-10_SUB_ITA_dashinit.mp4';
var NUM_CHUNKS = 10;
var chunk_size = 256 * 1024; // 2Kb
var current_chunk = 0;
var file_size = 1;

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

var mediaSource = new MediaSource();
var sourceBuffer;

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

function callback(e) {
    sourceBuffer = mediaSource.addSourceBuffer('video/mp4; codecs="avc1.640029, mp4a.40.5"');

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

    var readChunk = function() {
        GET(FILE, current_chunk, function(uInt8Array) {
            sourceBuffer.appendBuffer(uInt8Array);
        });
    };

    sourceBuffer.addEventListener('update', function(e) {
        if (!sourceBuffer.updating) {
            if (current_chunk == Math.ceil(file_size/chunk_size)-1) {
                if ( mediaSource.readyState!='ended' )
                    mediaSource.endOfStream();
            } else {
                current_chunk++;
                readChunk();
                if (video.paused) {
                    video.play();
                }
            }
        }
    });
    readChunk();
}

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

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

function GET(url, chunk_index, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open('GET', url, true);
    xhr.setRequestHeader('Range', 'bytes='+(chunk_index*chunk_size)+'-'+(++chunk_index*chunk_size-1));
    xhr.responseType = 'arraybuffer';
    xhr.send();

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

        file_size = parseInt(this.getResponseHeader('content-range').split("/").pop());
        callback(new Uint8Array(xhr.response));
    };
}

但是我找不到视频。所以任何人都可以告诉我如何解决这些问题:

1. 当我寻找视频时，我可以获得 video.currentTime(比如 2.5)，如何将其转换为字节范围请求(如何获得字节偏移量)
2. 当我获得正确的偏移量并从 Range GET 请求加载正确的数据时，我如何才能在正确的偏移量处附加到 sourceBuffer

谢谢

Answer 1

我自己一直在寻找解决方案，我想我找到了。

看看这个example .

每当一个seeking event从视频元素发出，表示用户已请求搜索，使用 sourceBuffer.abort(); 关闭旧源缓冲区。

然后 mediasource 发出一个新的 sourceopen 事件，它允许你像第一次一样创建一个新的 sourcebuffer，但这次不是从文件的开头附加数据，你从与 videoElem.currentTime 对应的偏移量追加数据。

如何将时间偏移量转换为字节偏移量似乎由您自己决定，因为这取决于您播放的媒体格式。

在恒定比特率文件中，您可以基本上将文件长度(以字节为单位)除以视频长度(以秒为单位)(并增加一点安全余量)。对于其他任何事情，您可能需要解析文件并获取关键帧的时间戳和字节偏移量。