Question

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

视频组件：

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;

主页组件：

import React from 'react';
import VideoLoop from './video_loop';

export default () => {
return <div>
        Home Page
        <VideoLoop />
      </div>
};

路由

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

让视频播放反应非常简单。

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

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

您不需要任何其他模块。

为什么我不能播放React HTML5视频组件？

1 个答案: