无法使用 React 加载本地视频

Posted 2023-05-08

【中文标题】无法使用 React 加载本地视频

【英文标题】：Can't load local video with React

【发布时间】：2017-04-05 04:13:36

【问题描述】：

我。我已将视频放在我的文件夹“app/assets/video/concert.mp4”中。在我的 React 文件“search_bar.jsx”中，我有一个 html5 视频标签，我将视频来源为：

render() return (<video src="../../app/assets/videos/concert.mp4" controls />);

这是我的文件结构：

MusicianHub 应用程序 资产 视频 音乐会.mp4 前端 组件 search_bar.jsx

如果您加载外部视频，则视频标签有效。这是我的 webpack.config.js

 module: 
    loaders: [
      
        test: /\.jsx?$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel',
        query: 
          presets: ['react', 'es2015']
        
      ,
      
      test: /\.html$/,
      loader: 'html-loader?attrs[]=video:src'
    , 
      test: /\.mp4$/,
      loader: 'url?limit=10000&mimetype=video/mp4'
    
    ]
  

【问题讨论】：

你能发布你的 webpack 配置吗？另外，尝试使用 import video from '../../app/assets/videos/convert.mp4 和 <video src=video />，这样 webpack 会识别它必须拉入视频文件

使用 webpack-dev-server 嗯？

@erichardson30 我已经上传了我的 webpack.config 并包含了 import 语句，但看起来 webpack 对我提供的加载器不满意：加载器 /Users/briantsai/Desktop/MusicianHub/node_modules 中的错误/url/url.js?limit=10000&mimetype=video/mp4 没有返回函数@ ./frontend/components/search_bar.jsx 15:15-61

我已经从 webpack 加载了 url-loader 和 file-loader 模块，所以错误消失了，但现在在 Chrome 开发工具中它说：加载资源失败：服务器响应状态为404（未找到）localhost:3000/a740242064c86421e8ff988502f202a8.mp4

我认为应该是url-loader 而不仅仅是url。

【参考方案1】：

这适用于本地文件：

import videos from '../../app/assets/videos/concert.mp4'

render()
return (
 <video loop autoPlay>
      <source src=videos type="video/mp4"/>
 </video>
); 

【讨论】：

如果本地路径以前不知道怎么办？ （或在地图内？）

【参考方案2】：

我决定将视频上传到远程源 Cloudinary。感谢大家的帮助。

【参考方案3】：

这对我来说是一个修复。 https://github.com/facebook/create-react-app/issues/6822#issuecomment-483079845

你可以使用 src/react-app-env.d.ts 来测试一下：

declare module '*.mp4' 
  const src: string;
  export default src;

【参考方案4】：

这种方式适用于本地照片和视频：

import concert from '../../assets/videos/concert.mp4'

render()
return (
 <video controls>
      <source src=concert type="video/mp4"/>
      Your browser doesn't support HTML video.
 </video>
);