React 视频元素无法正常工作

Question

我正在尝试将视频背景放在我的网站上，但是当我将视频标签放入我的反应脚本中时，它开始在 Firefox 上无休止地加载，当我在 chrome 上尝试时，它会在 0 秒处显示我尝试过的视频，但.mp4格式.mov没有成功。

import React, { Component } from "react";
import "./App.css";
import LogginScreen from "./components2/LogginScreen";

class App extends Component {
  render() {
    return (
      <div>
        <LogginScreen></LogginScreen>
        <video controls autoPlay loop muted>
          <source src="hd1992.mov" type="video/mov"></source>
        </video>
      </div>
    );
  }
}
export default App;

Answer 1

.mov这与视频文件类型和导入视频的方式有关。

尝试将您的类型属性更改为type="video/mp4"a.mov并导入您的视频，如下所示：

import React, { Component } from "react";
import "./App.css";
import LogginScreen from "./components2/LogginScreen";
import myVideo from "./hd1992.mov";

class App extends Component {
  render() {
    return (
      <div>
        <LogginScreen></LogginScreen>
        <video controls autoPlay loop muted>
          <source src={myVideo} type="video/mp4"></source>
        </video>
      </div>
    );
  }
}

export default App;

这是一个工作示例。

我希望这能解决您的问题。