title: Why can I not get a React HTML5 video component to Play?
body: <p>I was attempting to add a continuous HTML5 Video loop on my home page component of my React application. I used the NPM package "react-html5video" to generate this component. When I launch the app through localhost, it initially looks as if it will play, however I receive the following error inside the div, "Video cannot be played in this browser". I can't seem to figure out what it is that I am doing wrong. </p>
  
  <ol>
  <li><p>Video Component:</p>
  
  <pre><code>import React from 'react';
  import Video from 'react-html5video';
  
  export class VideoLoop extends React.Component {
  render () {
  return (
    &lt;Video controls autoPlay loop muted&gt;
      &lt;source
      src="../src/videos/oakmont.mp4"
      type="video/mp4"
      /&gt;
    &lt;/Video&gt;
    );
   }
  };
  
  export default VideoLoop;
  </code></pre></li>
  <li><p>Home Page Component:</p>
  
  <pre><code>import React from 'react';
  import VideoLoop from './video_loop';
  
  export default () =&gt; {
  return &lt;div&gt;
          Home Page
          &lt;VideoLoop /&gt;
        &lt;/div&gt;
  };
  </code></pre></li>
  <li><p>Routing</p>
  
  <pre><code>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 (
  &lt;Route path="/" component={App}&gt;
    &lt;IndexRoute component={HomePage} /&gt;
    &lt;Route path="properties"  component={PropertyList} /&gt;
    &lt;Route path="aboutus"  component={AboutUs} /&gt;
    &lt;Route path="contact"  component={Contact} /&gt;
  &lt;/Route&gt;
  );
  </code></pre></li>
  </ol>