我正在尝试将选定的视频文件加载到html5中，以便用户在将视频发送到服务器之前预览视频。
问题是在桌面和移动设备（ios12）上使用浏览器Chrome和Safari，它只适用于桌面版Chrome。
请注意，一旦我将此文件发送到我的服务器（使用CarrierWave保存并上传到S3），然后使用新的src网址更新视频，它就适用于所有浏览器和设备。
const reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = (e) => {
this.$scope.$applyAsync(() => {
this.filePreview = e.target.result;
})
}
<video class="video-previewer" ng-if="$ctrl.filePreview" width="{{$ctrl.width}}" height="{{$ctrl.height}}" controls playsinline preload="metadata">
<source ng-src="{{$ctrl.filePreview + '#t=0.5'}}" type="video/mp4">
</video>
我在桌面和移动设备上的safari日志中看到的错误是记录的base64字符串（“data：video / mp4; base64，... etc ...”）和“无法加载资源：数据URL解码失败”
为什么解码失败？谢谢
选项1：
尝试更换
this.filePreview = e.target.result;
有了这个
this.filePreview = (window.URL || window.webkitURL).createObjectURL(file);
选项2：
您可以尝试另一种方法将视频加载到动态视频标记中，看看它是否适用于所有HTML5浏览器...
可测试代码（根据需要动态创建/销毁qazxsw poi标签）：
<video>我最终只是没有使用<!DOCTYPE html>
<html>
<body>
<p> Choose a video file...</p>
<input type="file" id="fileChooser" accept="*/*"/>
<div>
<a id="aTag"> </a>
</div>
<script>
document.getElementById('fileChooser').addEventListener('change', onFileSelected, false);
function onFileSelected(evt)
{
var file = evt.target.files[0]; // FileList object
var type = file.type;
//alert("file TYPE is : " + type);
var fileURL = URL.createObjectURL(file);
var reader = new FileReader();
reader.readAsDataURL(file);
var tmpElement; //will container the video content....
var path; //will hold URL of file BLOB (is not file path)....
reader.onloadend = function(evt)
{
if (evt.target.readyState == FileReader.DONE)
{
//# update file path...
path = (window.URL || window.webkitURL).createObjectURL(file);
//# remove any other existing media element...
var container = document.getElementById("aTag");
if (container.hasChildNodes())
{ container.removeChild(container.childNodes[0]); }
if ( type == "video/mp4" )
{
tmpElement = document.createElement( "video");
tmpElement.setAttribute("controls", "true" );
tmpElement.setAttribute("width", "800");
}
else
{ return 0; } //break out / cancel
//# add newly created HTML5 element with file path
tmpElement.setAttribute("src", path);
container.appendChild(tmpElement);
}
};
}
</script>
</body>
</html>
视频，只是直接在文件上使用FileReader它正在工作。
URL.createObjectURL(file)