Question

我正在尝试将选定的视频文件加载到html5中，以便用户在将视频发送到服务器之前对其进行预览。

问题在于，它在桌面和移动设备（ios12）上使用Chrome和Safari浏览器时，只能在桌面版Chrome上运行。

请注意，一旦我将此文件发送到服务器（用CarrierWave保存并上传到S3），然后使用新的src url更新视频，它就可以在所有浏览器和设备上使用。

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”解码失败”

为什么解码失败？谢谢

Answer 1

选项1：

尝试更换

this.filePreview = e.target.result;

有了这个

this.filePreview = (window.URL || window.webkitURL).createObjectURL(file);

选项2：

您可以尝试将视频加载到动态视频标签中的另一种方法，看看该方法是否适用于所有HTML5浏览器...

可测试的代码（根据需要动态创建/删除<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>

Answer 2

我最终只是不使用FileReader来播放视频，而只是直接在文件上使用URL.createObjectURL(file)并可以正常工作。

onFileUpload({ file }) {
  const URL = window.URL || window.webkitURL;
  const vid = document.getElementById('#id-for-video-preview-element');
  vid.src = URL.createObjectURL(file);
  vid.load();
}

如何将FileReader结果加载到HTML5视频中，以实现跨浏览器和设备的最佳兼容性

2 个答案: