CODEWITHSUNDEEP
javascriptreactjsjsxreact-player
FortyTwo
FortyTwo

Reputation: 1

How can i integrate a Video-Player with React-JSX?

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.

Upvotes: 0

Views: 2278

Answers (2)

tarzen chugh
tarzen chugh

Reputation: 11247

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!!!

Upvotes: 1

Iiskaandar
Iiskaandar

Reputation: 394

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"
        />
      );

Upvotes: 0

Related Questions