Question

我可以通过使用GET请求和Range标头请求数据块来播放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));
    };
}

但我无法搜索视频。所以任何人都可以告诉我如何解决这些问题：

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

由于

Answer 1

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

看看这个example。

每当从视频元素发出seek事件，表明用户已请求搜索时，旧的源缓冲区将使用sourceBuffer.abort();关闭。

然后mediasource会发出一个新的sourceopen事件，它允许您以与第一次相同的方式创建新的源缓冲区，但这次不是从文件的开头追加数据，而是从与videoElem.currentTime对应的偏移量。

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

在一个恒定的比特率文件中，您可能能够基本上将文件长度（以字节为单位）除以视频长度（以秒为单位）（并添加一点安全余量）。除此之外，您可能需要解析文件并获取关键帧的时间戳和字节偏移量。

从MediaSource播放时无法搜索视频

1 个答案: