javascript - React 视频元素无法正常工作

Question

我正在尝试将视频背景放在我的网站上，但是当我将视频标签放在我的 react 脚本中时，它开始在 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"，即使它是 .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;

Here是一个工作示例。

希望这能解决您的问题。