FileReader readAsDataURL读取视频文件 一直预览失败 怎么解决？

Question

使用FileReader readAsDataURL读取本地上传的视频文件 很多时候预览不到 如图

猜测是因为视频大小的问题 不知道这里到底是因为什么 菜鸟求带
正常应该是

代码 如下
var reader = new FileReader();

            reader.onload = (evt) => {
                if (videoType.indexOf(fileType.toLocaleLowerCase()) !== -1) {
                    $('.waitUpload .nullVideo').remove();
                    $('.waitUpload').html(
                        '<div data-filename="' + fileName +
                        '">\
                    <div>\
                        <div class="videoCtn"><video src="' +
                        evt.target.result +
                        '" controls></video></div>\
                    </div>\
                    <div class="videoInfo">\
                        <span class="videoName" title="' +
                        fileName + '">' +
                        fileName + '</span>\
                        <span class="videoSize">' +
                        size +
                        'M</span>\
                    </div>\
                    <div class="btnCtn">\
                        <span class="btn" data-toggle="modal" data-target=".modal">上传</span>\
                    </div>\
                </div>'
                    );
                    file = _this.files[0];
                    localAddress = evt.target.result;
                } else {
                    alert('请选择视频文件');
                }
                $(this).val('');
            };
            reader.readAsDataURL(this.files[0]);

Answer 1

FileReader.readAsDataURL 读取文件之后是 base64 编码的字符串，这个是不能直接作为 src 使用的，要直接使用还应当拼接响应的 MIME Type 前缀，比如 data:audio/ogg; 这是 .ogg 格式的前缀，具体是什么前缀取决于你上传文件的扩展类型了。

其实这里没必要非使用 FileReader 来完成这个需求，读一些小的文件还可以，读大的文件其实不是很好。不如直接使用 URL.createObjectURL() 来创建一个 DOMString，然后直接使用这个 DOMString 即可，不过不要忘记使用完之后通过 URL.revokeObjectURL()方法来释放。

我之前做过一个很简单的预览器组件，就是通过后者完成的，基本简单的格式(音频、视频、图片等等)都可以预览，不过是基于 Angular 的，链接。

Answer 2

楼上其实已经说了，我再说说我知道的。

base64转码其实很费时间，还会卡，大了之后就解不出来了，你使用三五秒的视频，是可以解出来的。

demo地址