在移动设备上使用 <input type="file" capture /> 的正确方法

Question

我正在创建一个表单，它有一个文件上传按钮来上传视频。在 Web 上一切正常，但在移动设备（Android 和 iOS）上我遇到了问题。

在 iOS 上

文件上传按钮是直接打开设备相机，没有“图库/照片”选项。虽然，录制的视频上传成功。

在 Android 上

这里的情况不同。上传按钮显示所有选项，如相机、摄像机、文件等，但选择Camcorder 后，文件无法上传到服务器。虽然，从图库中拍摄的视频正在成功上传。

我的文件上传按钮

<input type="file" class="form-input-file" id="input-video-file" accept="video/mp4,video/x-m4v,video/quicktime,video/*" capture="capture">

附： ：我也尝试过使用capture 和capture="camcorder"，但没有任何运气。

感谢您的帮助。

Answer 1

capture 属性有 2 个可能的字符串

• 用户
• 环境

如果输入类型是“文件”，它会告诉浏览器使用指向用户或远离用户的麦克风或摄像头捕获一个由“接受”属性指定的类型的新文件，如果有是一个。

例如，使用外向设备捕获新的视频文件。

<input type="file" id="video-file" capture="environment" accept="video/*" />

使用面向用户的设备捕获新的视频文件。

<input type="file" id="video-file" capture="user" accept="video/*" />

要捕获现有的视频文件删除“捕获”和“接受”属性，让用户导航到他们想要的文件。

    <input type="file" id="video-file" />