Question

我有一个反应，没有显示视频元素。它在html文档中显示它，但它没有出现在屏幕上。如果我使用控件属性，则将显示视频的帧（带有控件的视频播放器），但不会显示内容（视频文件）。如果我不使用controls属性，那么它根本不会出现在屏幕上。

这是应用程序组件和视频组件的代码，我还向应用程序本身添加了视频。我也已经将视频导入到两者中（尽管我认为没有必要导入视频以便能够在src贡品中使用它，或者有必要在React中使用它），但它并不能解决问题。终于，我在一个纯HTML网站中测试了该视频文件，并且效果很好。

编辑：我使用了npx create-react-app。我正在使用Ubuntu和Chrome浏览器。 React版本：“依赖项”：{ “ react”：“ ^ 16.8.6”， “ react-dom”：“ ^ 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;

视频元素未呈现铬

0 个答案: