无法使用 React 加载本地视频

Posted

技术标签:

【中文标题】无法使用 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&lt;video src=video /&gt;,这样 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>
); 

【讨论】:

以上是关于无法使用 React 加载本地视频的主要内容,如果未能解决你的问题,请参考以下文章

Fetch API 无法加载“.php”本地文件 - React JS + PHP

无法从 React.js 中的本地库加载图像

Android上的react-native-webview无法使用ERR_ACCESS_DENIED加载保存在缓存目录中的本地文件[重复]

React Native 视频不会播放本地文件

无法将本地存储的图像更快地加载到集合视图中。?

React 视频元素无法正常工作