Skip to main content

验证用户视频

在构建一个接受用户视频上传的应用时，你可能想在上传之前验证浏览器是否可以播放该视频。

🌐 When building an app that accepts user video uploads, you might want to validate whether the browser can play the video before uploading it.

检查视频兼容性​

🌐 Checking video compatibility

使用 canDecode() 代码片段来检查浏览器是否可以解码视频。

🌐 Use the canDecode() snippet to check if a video can be decoded by the browser.

canDecode() 函数检查视频是否可以在浏览器中播放，并从 @remotion/media 加载到 <Video> 中。

🌐 The canDecode() function checks if a video can be played in the browser and loaded into <Video> from @remotion/media.

note

不同的 Remotion 视频组件具有不同的格式兼容性：

  • <Video>：基于 Mediabunny 的自定义视频标签，支持最重要的视频格式。
  • <Html5Video>：使用浏览器的原生解码，通过 <video> 元素
  • <OffthreadVideo>：在渲染时支持更多格式，在播放器和工作室中使用 <Html5Video> 进行预览

了解更多关于支持的媒体格式：视频格式

🌐 Learn more about the supported media formats: Video formats :::

note

注意：在 @remotion/media 中，带有 H.265 编解码器的视频在普通浏览器中是受支持的，但在渲染过程中，它们会回退到 <OffthreadVideo>。

React中的验证示例​

🌐 Validation example in React

note

这是一个展示验证流程的简化示例。在实际应用中，具体实现会根据你的上传策略（直接上传、预签名URL、分片上传等）以及你存储视频的位置（S3、GCS、你自己的服务器等）而有所不同。

ValidatedUploader.tsx

const handleUpload = async (file: File) => {
  const isCompatible = await canDecode(file);

  if (!isCompatible) {
    // Either notify user or reject the video
    alert('Video format not supported.');
    return;
  }

  try {
    const url = await upload(file);
    console.log('Video uploaded successfully:', url);
  } catch (error) {
    console.error('Failed to process video:', error);
    alert('Failed to upload video');
  }
};

处理不兼容的视频​

🌐 Handling incompatible videos

当视频无法解码时，或者：

🌐 When a video cannot be decoded, either:

  • 拒绝该视频，并要求用户上传其他视频
  • 在后台重新编码视频。

另请参阅​

🌐 See also

Last updated on