使用 Video.js 预览有关更改输入文件的视频答案

【问题标题】：Previewing video on change of input files with Video.js使用 Video.js 预览有关更改输入文件的视频
【发布时间】：2019-06-05 22:30:00
【问题描述】：

我正在准备在更改输入类型文件时预览视频，当我将输入类型文件获取的 src 放在 video.js 上时出现错误，这是我的代码：

<input type="file" class="custom-file-input" id="customFile">
<video id='my-video' class='video-js vjs-16-9' controls preload='none' data-setup='{}'>
         <source type='video/mp4' class="source-video" id="source-video">
    </video>

JS：

$("#customFile").change(function () {
    var input = document.getElementById('customFile');;

    var reader = new FileReader();
    reader.onload = function () {
        var dataURL = reader.result;
        var output = document.getElementById('source-video');
        output.src = dataURL;
    };
    reader.readAsDataURL(input.files[0]);

});

video.js播放器的错误是： 找不到此媒体的兼容来源。

【问题讨论】：

标签： javascript jquery html css video.js

【解决方案1】：

我不确定通过获取输入的值是否有效，您可能会得到类似文件的 localPath 的内容，SRC 属性无法访问。

有两种选择：

1 - 使用可以上传文件的后端，然后在服务器上检索 url 并设置 src 属性以显示它

2 - 我在一个项目中使用了 dropzone.js，它有点难以设置，但我知道你可以获取文件的数据，这将适用于你的 src 属性（我知道有图片的预览选项，但我不知道视频，但我知道您至少可以获得“data://”或 32 位（我不知道确切的名称）网址来获取所选内容）

【讨论】：