Safari：无法从blob网址动态加载视频 [英] Safari: unable to dynamically load video from blob url

问题描述

我正在尝试为html5视频代码实现动态加载。

i'm trying to implement a dynamic loading for an html5 video tag.

当用户通过<<输入类型=文件> 元素，我想将其动态加载到< video> 元素，并将其附加到正文。

when a user picks a video file via the <input type="file"> element, i want to load it dynamically to a <video> element, and append it to body.

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

the following code works on Chrome but not on 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 加载视频。

now, if i'll replace src="' + blobURL + '" with a local filepath, say- /media/videos/vid1.mp4, the video loads in Safari as well, but I need it to load the video from blobURL.

有什么建议吗？

非常感谢。

更新：

很遗憾，这是Safari中的一个已知错误（不受媒体后端支持）。

as Rod says, unfortunately it's a known bug in Safari (not supported by it's media backend).

推荐答案

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

I have the same exact issue with Safari 6.1, getting MEDIA_ERR_SRC_NOT_SUPPORTED when trying to load a file from an input, like so:

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 -type source的视频。

Try video.addEventListener('error', logError) or something to figure out if you have the same issue. I suspect Safari doesn't support yet videos with blob-type source.

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

UPDATE: Yup, it's a bug. See https://bugs.webkit.org/show_bug.cgi?id=101671 and help us let the webkit maintainers this is something that needs to be fixed.

UPDATE，2015 ：现在可以使用，更新了代码。

UPDATE, 2015: It works now, updated the code.

这篇关于Safari：无法从blob网址动态加载视频的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！