Элемент React video не работает должным образом

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

Та же проблема здесь,

Опробовал ваше решение Michalis, но он просто показывает темный плеер и не загружает видео, даже если установлен автозапуск. я должен установить ответное видео или что-то подобное?

здесь мой код

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

Answer 2

Это относится как к типу видеофайла .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;

Здесь - рабочий пример .

Надеюсь, это решит вашу проблему.