我有这个网页（参见代码），脚本运行没有错误，块在控制台中显示为 Uint8Arrays，但视频不显示。服务器端有 13 个 .mp4 视频。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Video</title>
<!--<link rel="stylesheet" href="styles.css">-->
</head>
<body>
<div class="content">
<h1>My Video</h1>
<video id="video" width="640" height="480" type="video/mp4" autoplay muted decoration></video>
<script>
'use strict';
var video = document.querySelector('video');
var i = 0;
var url = "0.mp4";
if (!window.MediaSource) {
alert('The MediaSource API is not available on this platform');
}
var mediaSource = new MediaSource();
var sourceBuffer;
video.src = window.URL.createObjectURL(mediaSource);
mediaSource.addEventListener('sourceopen', function() {
sourceBuffer = mediaSource.addSourceBuffer('video/mp4'); // ; codecs="h264"
get(url, MyCallback);
});
function MyCallback(chunk)
{
console.log(chunk);
sourceBuffer.appendBuffer(chunk);
if (video.paused) {
video.play(); // Start playing after 1st chunk is appended.
}
i++;
if(i===14)
i = 0;
url = i.toString()+".mp4";
get(url, MyCallback);
}
function get(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.send();
xhr.onload = function() {
if (xhr.status !== 200) {
alert('Unexpected status code ' + xhr.status + ' for ' + url);
return false;
}
callback(new Uint8Array(xhr.response));
};
}
</script>
</div>
</body>
</html>
我确实尝试设置视频 scr= 其中一个 mp4 并且它播放正确，只是说 mp4 格式似乎适合 Firefox。
确保您的文件和代码满足以下条件。
(1) 您的 MP4 视频文件需要保存为 碎片 MP4 格式（又名 ISO-BMFF）。
一个片段可以是 N 帧、N 秒、N 分钟或任何您想要的长度。
使用 FFmpeg、Handbrake 或 Bento 等工具从文件中生成碎片 MP4。
(2) 对 MP4 视频文件使用右侧的
codec