「B5试坑」react 中展示播放预览video

先尝试原生 <video> 标签

step1：基础代码实现

增加 controls，是增加可以控制的进度条

function VideoUpload() {
  return (
      <video className={styles.videoContainer} controls>
        <source src={require('@/assets/test.mp4')} type="video/mp4" />
      </video>
export default VideoUpload;

step2：webpack 缺少对应 .mp4 类型文件的 loader

You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https:// webpack.js.org/concepts# loaders

如果你是 antd design pro 或者 umi 项目，可以用 chainWebpack 配置如下：

const config = defineConfig({
  esbuild: {},
  chainWebpack: (config) => {
    config.module
      .rule('mp4')
      .test(/\.(mp4|zip)(\?.*)?$/)
      .use('file-loader')
      .loader(require.resolve('file-loader'))
      .options({