我是否缺少一些代码来使用 Visual Studio 代码 [react] 在 React 应用程序中查看此视频答案

【问题标题】：Am I missing some code to view this video in a react app using visual studio code [react]我是否缺少一些代码来使用 Visual Studio 代码 [react] 在 React 应用程序中查看此视频
【发布时间】：2022-02-09 21:41:35
【问题描述】：

App.js

import React from 'react';
import ReactDOM from 'react-dom';

import { Menu } from './Menu';
import { Video } from './Video';

const VIDEOS = {
  fast: require('./videos/bel.mp4'),
  slow: require('./videos/mimi.mp4'),
  cute: require('./videos/coco.mp4'),
  eek: require('./videos/drea.mp4') 
};

export class App extends React.Component {
  constructor(props){
    super(props);

    this.state = {
      src: VIDEOS.fast
    };
  }

  render() {
    return(
      <div>
        <Menu  />
        <Video src={this.state.src} />
      </div>
    );
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('app')
);

Video.js

import React from 'react';

export class Video extends React.Component {
    render() {
        return(
            <div>
                <video controls autoPlay muted src={this.props.src}/>
            </div>
        );
    }
}

Menu.js

import React from 'react';

export class Menu extends React.Component {
    render(){
        return(
            <form>
                <input type="radio" name="src" value="fast"  /> Bella
                <input type="radio" name="src" value="slow"  /> Coco
                <input type="radio" name="src" value="cute"  /> Mimi
                <input type="radio" name="src" value="eek"  /> Drea
            </form>
        );
    }
}

尝试创建一个小型 React 应用程序在我的个人计算机上练习，但视频没有播放，不知道我错过了什么。视频播放器显示和单选按钮可见，但视频不播放。我知道还有更多工作要做，但首先我想播放第一个视频，这就是我将 this.state 设置为 VIDEOS.fast 的原因

【问题讨论】：

你没有任何错误信息？视频的路径是否正确？
不，路径上没有任何错误
下面的回答对你有帮助吗？
不，很遗憾
错误信息是什么

标签： javascript reactjs html5-video

【解决方案1】：

试试导入这样的视频吧？

import bel from './videos/bel.mp4';
import mimi from './videos/mimi.mp4';
import coco from './videos/coco.mp4';
import drea from './videos/drea.mp4';

const VIDEOS = {
  fast: bel,
  slow: mimi,
  cute: coco,
  eek: drea
};

然后不要忘记video标签中的type属性

<video controls autostart autoPlay src={bel} type="video/mp4" />

【讨论】：

【解决方案2】：

最可能的问题是 React 没有识别出您正在更新视频源并且没有进行视频加载。

这是一个已知特征 - 本质上，您必须注意 src 中的变化，并在看到它时触发视频加载。

这里的答案中有一个很好的例子：https://stackoverflow.com/a/47382850/334402

【讨论】：