элемент видео не рендеринг реагирует хром

Question

У меня проблема с реакцией, не показывающей элемент видео.Он показывает его в HTML-документе, но он не отображается на экране.Если я использую атрибуты элементов управления, появится кадр видео (проигрыватель видео с элементами управления), но содержимое не будет отображаться (видеофайл).Если я не использую атрибут элемента управления, он вообще не отображается на экране.

Вот код компонента приложения и компонента видео, я также добавил видео в само приложение.Я также импортировал видео в оба (хотя я думаю, что нет необходимости импортировать видео, чтобы иметь возможность использовать его внутри дани src, или это необходимо в реакции?), И это не решает проблему.Наконец, я протестировал видеофайл на простом html-сайте, и он отлично работает.

Редактировать: я использовал npx create-реагировать-приложение.Я использую Ubuntu и браузер Chromium.Версия реагирования: «зависимости»: {«реакция»: «^ 16.8.6», «реакция-дом»: «^ 16.8.6», «реакция-скрипты»: «3.0.1»}

import React from 'react';
import VideoBg from './VideoBg/VideoBg.js';
import './App.css';
/* Optionally I have used this import but I thik that its unnecessary. It does not fixed the problem.
import "../assets/a2.mp4";
*/

function App() {
  return (

    <div>
      <VideoBg id="videoBg"/>
      <video controls src="../assets/a2.mp4"> 
      </video>
    </div>

  );
}

export default App;

И компонент VideBg:

import React, {Component} from "react";
import "./VideoBg.css";
/*
import "./a2.mp4";*/

class VideoBg extends React.Component{
  render(){
    return(
      <section id={this.props.id} className="video-bg">

        <div class="container">


          <video controls src="./a2.mp4" />


        </div>

      </section>
    ); 
  }
}



export default VideoBg;