Safari：無法從 blob url 動態加載視頻

Question

我正在嘗試為 html5 視頻標簽實現動態加載。

當用戶通過<input type="file">元素選擇視頻文件時，我想將其動態加載到<video>元素，並將 append 加載到 body 中。

以下代碼適用於 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 中的一個已知錯誤（它的媒體后端不支持）。

Answer 1

我在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年 ：它現在有效，更新了代碼。

Answer 2

我不知道該解決方案是否適用於視頻和音頻，但我遇到了與Safari音頻相同的問題，我發現解決方案是在構造blob時指定內容類型：

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

Answer 3

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