我正在尝试使用 javascript mediasource 播放视频以向用户隐藏视频 URL。但我收到一个错误，
未捕获的InvalidStateError:无法在“MediaSource”上执行“endOfStream”:MediaSource 的readyState 不是“open”。如果视频类型和代码动态传递也会很有帮助。
下面是我的代码，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<video controls></video>
<script>
var video = document.querySelector('video');
var assetURL = 'adsss.mp4';
// Need to be specific for Blink regarding codecs
// ./mp4info frag_bunny.mp4 | grep Codec
var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';
if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
var mediaSource = new MediaSource;
//console.log(mediaSource.readyState); // closed
video.src = URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', sourceOpen);
} else {
console.error('Unsupported MIME type or codec: ', mimeCodec);
}
function sourceOpen (_) {
console.log(this.readyState); // open
var mediaSource = this;
console.log(mediaSource);
var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
console.log(sourceBuffer);
fetchAB(assetURL, function (buf) {
sourceBuffer.addEventListener('updateend', function (_) {
mediaSource.endOfStream();
video.play();
console.log(mediaSource.readyState); // ended
});
sourceBuffer.appendBuffer(buf);
});
};
function fetchAB (url, cb) {
console.log(url);
var xhr = new XMLHttpRequest;
xhr.open('get', url);
console.log(xhr);
xhr.responseType = 'arraybuffer';
xhr.onload = function () {
cb(xhr.response);
console.log(xhr.response);
};
xhr.send();
};
</script>
最佳答案
上述代码不起作用的原因是，只有开头移动了 moov(电影标题框)的碎片 mp4 视频才会使用媒体源播放。
请引用以下链接， 1) Unable to get MediaSource working with mp4 format in chrome 2) What exactly is Fragmented mp4(fMP4)? How is it different from normal mp4?
您可以使用 MP4box 工具通过以下命令对视频进行分段，
MP4Box -dash 1000 -rap -frag-rap test.mp4
关于JavaScript 媒体源元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39656801/