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

Question

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

在 iOS 上

文件上传按钮直接打开设备摄像头，“图库/照片”没有选项可供选择。 虽然，录制的视频已成功上传。

在安卓上

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

我的文件上传按钮

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

PS：我也尝试过使用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" />