为什么我无法播放 React HTML5 视频组件？

Question

我试图在我的 React 应用程序的主页组件上添加一个连续的 HTML5 视频循环。我使用 NPM 包“react-html5video”来生成这个组件。当我通过 localhost 启动应用程序时，它最初看起来好像可以播放，但是我在 div 中收到以下错误，“无法在此浏览器中播放视频”。我似乎无法弄清楚我做错了什么。

1. 视频组件：

   import React from 'react';
   import Video from 'react-html5video';
   
   export class VideoLoop extends React.Component {
   render () {
   return (
     <Video controls autoPlay loop muted>
       <source
       src="../src/videos/oakmont.mp4"
       type="video/mp4"
       />
     </Video>
     );
    }
   };
   
   export default VideoLoop;
   

2. 主页组件：

   import React from 'react';
   import VideoLoop from './video_loop';
   
   export default () => {
   return <div>
           Home Page
           <VideoLoop />
         </div>
   };
   

3. 路由

   import React from 'react';
   import { Route, IndexRoute } from 'react-router';
   import App from './components/app';
   import PropertyList from './components/property_list';
   import HomePage from './components/home_page';
   import AboutUs from './components/about_us';
   import Contact from './components/contact';
   
   
   export default (
   <Route path="/" component={App}>
     <IndexRoute component={HomePage} />
     <Route path="properties"  component={PropertyList} />
     <Route path="aboutus"  component={AboutUs} />
     <Route path="contact"  component={Contact} />
   </Route>
   );
   

Answer 1

在 React 中播放视频非常简单。

// I 
import video from '../src/videos/a.mp4'
//In your component

//Add other tags as necessary
<video src={video}> </video>

为此，您不需要任何其他模块。