Safari:无法从 blob url 动态加载视频
Posted
技术标签:
【中文标题】Safari:无法从 blob url 动态加载视频【英文标题】:Safari: unable to dynamically load video from blob url 【发布时间】:2013-10-05 23:20:48 【问题描述】:我正在尝试为 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 src="' + blobURL + '" onloadedmetadata="alert('loaded meta data!')"></video>');
现在,
如果我将src="' + blobURL + '"
替换为本地文件路径,比如/media/videos/vid1.mp4
,视频也会加载到Safari 中,但我需要它从blobURL
加载视频。
有什么建议吗?
非常感谢。
更新:
正如 Rod 所说,不幸的是,这是 Safari 中的一个已知错误(它的媒体后端不支持)。
【问题讨论】:
【参考方案1】:我不知道该解决方案是否适用于视频和音频,但我对 Safari 音频也有同样的问题,我发现解决方案是在构造 blob 时指定内容类型:
var blob = new Blob([arrayBuffer], type: 'audio/mpeg');
url = webkitURL.createObjectURL(blob);
【讨论】:
当我尝试使用内置音频的加载元数据事件从 blob url 获取持续时间时,似乎这个刚刚解决了我的问题。谢谢!【参考方案2】:我在 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
-type 来源的视频。
更新:是的,这是一个错误。请参阅https://bugs.webkit.org/show_bug.cgi?id=101671 并帮助我们让 webkit 维护人员这是需要修复的问题。
2015 年更新:现在可以使用,更新了代码。
【讨论】:
这个问题在后来的 ios Safari 中修复了吗?我找不到任何信息,并且该错误尚未更新 哥们,给你一个发现自己的方法:bl.ocks.org/unRob/3bd07a012597aa959c92 那是什么?它是运行 Safari 后端的页面,还是只是将 blob url 放入视频标签的代码? 对不起,我认为代码是不言自明的。这是一种测试该错误是否已在您愿意测试的任何 iOS 中修复的方法;虽然我已经看到它在 v9.0 中工作,但不能真正说出任何其他版本会发生什么。 好的,代码与我测试过的完全一样,我无法让它在 iOS 7.1 上运行,所以我猜它不受支持。谢谢!以上是关于Safari:无法从 blob url 动态加载视频的主要内容,如果未能解决你的问题,请参考以下文章
SafariView 只加载一个 url,似乎无法加载另一个
Safari 10.1:由于访问控制检查,无法加载带有查询参数的 XMLHttpRequest
Safari:重新加载后“由于访问控制检查而无法加载 Fetch API”