Safari:无法从 blob URL 动态加载视频

Safari: unable to dynamically load video from blob url

本文关键字：URL 动态 加载 视频 blob Safari      更新时间：2023-09-26

我正在尝试实现HTML5视频标签的动态加载。

当用户通过 <input type="file"> 元素选择视频文件时，我想将其动态加载到 <video> 元素，并将其附加到正文。

以下代码适用于Chrome，但不适用于Safari：

function load_video(file) { // this came from <input type="file"> change event
    var reader = new FileReader();
    reader.onload = function(event) {
        var blob = new Blob([event.target.result]);
        window.URL = window.URL || window.webkitURL;
        var blobURL = window.URL.createObjectURL(blob);
        $('body').append('<video controls width="320" src="' + blobURL + '" onloadedmetadata="alert('loaded meta data!')"></video>');
    }
}

现在如果我将src="' + blobURL + '"替换为本地文件路径，例如 - /media/videos/vid1.mp4 ，视频也会在 Safari 中加载，但我需要它来从 blobURL 加载视频。

有什么建议吗？

多谢。

更新：

正如Rod所说，不幸的是，这是Safari中的一个已知错误（它的媒体后端不支持）。

我不知道该解决方案是否适用于视频和音频，但我在 Safari 音频方面遇到了同样的问题，我发现解决方案是在构造 blob 时指定内容类型：

var blob = new Blob([arrayBuffer], {type: 'audio/mpeg'});
url = webkitURL.createObjectURL(blob);

我在使用 Safari 6.1 时遇到了同样的问题，在尝试从输入加载文件时遇到MEDIA_ERR_SRC_NOT_SUPPORTED，如下所示：

var fileInput = document.querySelector('#file'),
    video = document.querySelector('video');
fileInput.addEventListener('change', function(evt){
  evt.preventDefault();
  var file = evt.target.files[0];
  var url = window.URL.createObjectURL(file);
  video.src = url;
  video.addEventListener('error', function(err){
    // This craps out in Safari 6
    console.error(video.error, err);
    alert('nay :(');
  });
});

尝试video.addEventListener('error', logError)或其他方法来确定您是否遇到相同的问题。我怀疑 Safari 还不支持具有blob类型源的视频。

更新：是的，这是一个错误。请参阅 https://bugs.webkit.org/show_bug.cgi?id=101671 并帮助我们让 webkit 维护者这是需要修复的问题。

更新，

2015：它现在可以工作，更新了代码。

const blob = new Blob([arrayBuffer], {type: 'video/mp4'});
相关文章：