filepond 不适用于视频/* 在 safari 中键入

Question

我在 React 中使用 FilePond library，它在 chrome 中运行良好，但在 Safari 中却不行。我的问题是：

当我设置 acceptedFileTypes={['video/*']}

在 chrome - 它接受所有视频类型。
在 safari 中 - 它只接受 mov 文件，而不是所有视频类型的文件。

当我设置 acceptedFileTypes={['video/mp4']} 时：它对两者都执行预期的行为，并且只接受 mp4 文件。

我不想设置所有可能的视频类型，并且想使用 video/* 过滤器。

Safari 浏览器版本：13.1.1

<FilePond
  ref={fileRef}
  files={files}
  allowMultiple={false}
  labelIdle={labelIdle}
  className="video"
  instantUpload={false}
  onupdatefiles={(items) => {
    setFiles(items)
  }}
  onremovefile={() => toggleDisplayProgress(false)}
  acceptedFileTypes={['video/*']}
  required
/>

我可以在这里专门设置视频类型 - https://trac.webkit.org/browser/trunk/Source/WebCore/platform/MIMETypeRegistry.cpp as described in this ticket

Answer 1

浏览器检测文件的方式不尽相同。根据 OS 这可能会有所不同。 fileValidateTypeDetectType 钩子有助于检测正确的类型。您可以使用它根据（例如）文件扩展名手动设置正确的类型。

FilePond.create(document.querySelector('input'), {
    acceptedFileTypes: ['image/png'],
    fileValidateTypeDetectType: (source, type) => new Promise((resolve, reject) => {
        
        // Do custom type detection here and resolve promise

        resolve(type);
    })
});

参见：https://pqina.nl/filepond/docs/patterns/plugins/file-validate-type/#custom-type-detection

Answer 2

我最终使用了 quicktime 和 mp4，效果很好：

acceptedFileTypes={['video/quicktime', 'video/mp4']}.

无法在 Safari 中使用 video/*。

filepond 不适用于视频/* 在 safari 中键入

filepond doesn't work with video/* type in safari

filepond