0

Hello I am trying to have a video play in my react rails component:

import React from "react"

import PropTypes from "prop-types"
class Video extends React.Component {
  render () {
    return (
      <React.Fragment>
        <div className="container">
          <div className="row d-flex justify-content-center">
              <div>
              <video width="420" height="315"
                     autoPlay={true}
                      src="assets/Filutter_Resteraunt_Demo.mov"/>
              </div>
          </div>
        </div>
      </React.Fragment>
    );
  }
}

export default Video

config/application.rb:

module App
  class Application < Rails::Application
    config.assets.paths << "#{Rails.root}/app/assets/videos"

When the component renders in the browser (firefox) the beginning picture of the video shows but the video does not play. Thanks for the help!

CJG
  • 457
  • 2
  • 17
  • Try using an MP4 (not MOV). There are free online converters from formats MOV into MP4. – VC.One Nov 05 '20 at 01:51
  • This did not resolve the Issue, thanks any way – CJG Nov 05 '20 at 17:32
  • See if this [**MP4 video file**](https://www.w3schools.com/tags/movie.mp4) plays on your browser. If yes then test it with your code... Also you say Firefox but does your code work on other browsers like Chrome. It can't be a path URL issue because you say it loads beginning 1 second (first frame) from the video. I can only think the format is wrong... – VC.One Nov 05 '20 at 17:50
  • 1
    I have resolved the issue by adding controls="controls" and autoPlay="autoPlay" to the video tag – CJG Nov 05 '20 at 18:45
  • PS: My _"format is wrong"_ was meant to be _"video is corrupt"_... Ok I thought you meant it didn't play after pressing your play button (it stays stuck on first frame would mean possible corruption)... Anyways now the _"won't play"_ is solved by having a actual play button. Simple things fix everything. – VC.One Nov 05 '20 at 18:53

0 Answers0