【发布时间】：2022-01-02 01:17:34
【问题描述】：
我有一个 React Web 应用程序，它从服务器获取视频 URL，然后将视频作为 blob 请求并尝试在 HTML 视频标签上播放它。我这样做是因为客户端有时会遇到互联网问题，并且视频在播放时可能会卡顿，他们宁愿等待更长的时间等待视频加载然后顺利播放，而不是视频断断续续。 （我还将 blob 作为缓存保存到 IndexedDB，但这与我现在遇到的问题无关，我只是将其添加为上下文，但在我试图找出这个 iOS 问题时它已被禁用）
我有一个下载视频的函数，然后返回 Blob 和从该 blob 对象创建的 URL。
async function downloadVideo(videoUrl) {
return new Promise(function(resolve, reject) {
var req = new XMLHttpRequest();
req.open('GET', videoUrl, true);
req.responseType = 'blob';
req.onload = function() {
// Onload is triggered even on 404
// so we need to check the status code
if (this.status === 200) {
var videoBlob = new Blob([this.response], { type: 'video/mp4' });
console.log('Video blob?', videoBlob);
var vid = { objBlob: videoBlob, vidURL: URL.createObjectURL(videoBlob) };
// Video is now downloaded and converted into ObjectURL
resolve(vid);
} else {
reject('Video download failed with status ', this.status);
}
};
req.onerror = function() {
reject('Unable to Download Video');
};
req.send();
});
}
然后我有了播放 blob 视频的元素：
<video
muted={true}
autoPlay={true}
loop={false}
onError={err => {
alert('Video load error. ' + err.target.error.iosMessage);
}}
src={downloadedVideo.url}
/>
downloadedVideo.url 是在 DownloadVideo 函数上创建的 blob 对象 URL
所有这些都可以在桌面 (Linux) 和 Android 上正常运行，但视频无法从 iOS 设备上的 Blob 播放。我试过 Safari、Chrome 和 Firefox，但问题是一样的。 在 iOS 上，我可以获取视频 Blob 并从中创建一个 URL，但是当我将其作为 src 传递时它不起作用，我只能从错误（MediaError 对象）中得到代码 4，但消息是未定义。
如果我将原始视频 URL 作为 src 而不是 blob，则它可以在所有设备上运行，但是我无法缓存视频，并且必须删除此功能。
我已经尝试了几个视频，并确保编码与 iOS 兼容。
我找不到任何说明 iOS 与视频的 Blob URL 不兼容的内容，所以这应该可以，但我不知道为什么不兼容。
【问题讨论】：
标签： javascript ios reactjs video blob