0

I am a complete Newbie at React/ JSX and coding itself. Thats why at first: sorry if my question may not be as precise as it should be for helping me guys.

At the moment i am building a web-app as a project for my exam. Now i need to integrate a video-player but all i can find seems not to fit in my code. I am working with visual-studio-code and npm. I've already "npm install(ed)react-player " Now to my question. Could anybody please provide a simple example of how to integrate a simple Video-Player as a Component into my Main-App?

I tried writing a class "Player" as an extern Component. Then i wanted to integrate it in my main-apps render method. But if i look in the browser-inspector i can't find my tag.

*import React from 'react';      
import ReactPlayer from 'react-player';

export default class Player extends React.Component {   
constructor(props){   
  super(props);   
  this.........*

I just want the player to appear on my page.

FortyTwo
  • 1
  • 2
  • Try running a google search for `react video player`. The results are cool like this one: https://www.npmjs.com/package/react-player. Just plug and play – Morlo Mbakop Aug 19 '19 at 12:47

2 Answers2

1

Find below working code. CodeSandbox here

Reference - Just followed react-player documentation.

App.js

import React from "react";
import ReactDOM from "react-dom";
import Player from "./Player";

function App() {
  return (
    <div className="App">
      <Player src="https://www.youtube.com/watch?v=sBws8MSXN7A" />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Player.js

import React, { Component } from "react";
import ReactPlayer from "react-player";

export default class Player extends Component {
  render() {
    return (
      return <ReactPlayer url={this.props.src} playing />;
    );
  }
}

Hope it helps!!!

tarzen chugh
  • 10,561
  • 4
  • 20
  • 30
  • Thank you so so much ! As i expected it was less complicated then i thought and what i had build in the time between. \(. .)/ – FortyTwo Aug 19 '19 at 12:53
0

The example from site of video-react: 

 return (
        <Player
          playsInline
          poster="/assets/poster.png"
          src="https://media.w3.org/2010/05/sintel/trailer_hd.mp4"
        />
      );
Iiskaandar
  • 394
  • 2
  • 7