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"，即使它是 .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 是一个工作示例。

希望这能解决您的问题。

Answer 2

同样的问题，

尝试了 Michalis 的解决方案，但即使设置了自动播放，它也只是显示一个黑暗的播放器并且不加载任何视频。我必须安装 react-video 或类似的东西吗？

这是我的代码

import React from 'react'

import myVideo from "./bgvideo.mov";

import './cours.css'

function Cours() {
    return (
        <div className='cours-container'>
            <div className='cours-title'>Debuter en Programmation</div>

            <div className='onglets'>
                <div className='onglet-presentation'>Présentation</div>
                <div className='onglet-ressources'>Ressources</div>
            </div>

            <div className='text-container'>
                <video controls autoPlay loop muted>
                    <source src={myVideo} type="video/mp4"></source>
                </video>
            </div>

        </div>
    )
}

export default Cours

React 视频元素无法正常工作

React video element is not working properly

javascript

html5-video

reactjs