REACT create video player react - Net-Raft.com

Welcome aboard! We are happy you are here and wish you good net-raft!




Just a Web Code Solution

create video player using react


 856

REACT


3

// index.html
<html lang = "en">
<head>
<meta charset = "UTF-8">
<title>React App</title>
<link rel="stylesheet" href="stylesheet.css">
</head>

<body>
<main id="app"></main>
<script src = "index.js"></script>
</body>
</html>

// index.js
import React from 'react';
import ReactDOM from 'react-dom';

var VIDEOS = {
video1: 'http://techslides.com/demos/sample-videos/small.webm', // some video1
video2: 'http://techslides.com/demos/sample-videos/small.ogv', // some video2
video3: 'http://techslides.com/demos/sample-videos/small.mp4' // some video3
// ...
};

var App = React.createClass({
getInitialState: function () {
return { src: VIDEOS.video1}; // initializing video1
},

chooseVideo: function (newVideo) {
this.setState({
src: VIDEOS[newVideo]
});
},

render: function () {
return (
<div>
<h1>Video Player</h1>
<Menu chooseVideo={this.chooseVideo} />
<Video src={this.state.src} />
</div>
);
}
});

var Video = React.createClass({
render: function () {
return (
<div>
<video
controls
autoPlay
src={this.props.src} />
</div>
);
}
});

var Menu = React.createClass({
handleClick: function (e) {
var text = e.target.value;
this.props.chooseVideo(text);
},

render: function () {
return (
<form onClick={this.handleClick}>
<input type="radio" name="src" value="video1" /> Video1
<input type="radio" name="src" value="video2" /> Video2
<input type="radio" name="src" value="video3" /> Video3
</form>
);
}
});

ReactDOM.render(
<App />,
document.getElementById('app')
);

// stylesheet.css
html, body
{
margin: 0;
}

body
{
font-family: 'Roboto', Arial, sans-serif;
transition: all 0.7s ease-out;
}

#app div
{
display: flex;
flex-direction: column;
align-items: center;
}

h1
{
text-transform: uppercase;
}

input
{
padding: 5px;
font-size: 16px;
}

input:not(:first-of-type)
{
margin-left: 20px;
}

video
{
margin: 30px;
width: 500px;
max-width: 85%;
}


By     Created   
The power of the user (%)
4%



The most helpful REACT solutions

How to get client ip address using react ?How to get client ip address using react ?REACT

Click to see more ...

  4.2K     418

how to get the type of a device using react ?how to get the type of a device using react ?REACT

Click to see more ...

  1.3K     203

country dropdown using reactcountry dropdown using reactREACT

Click to see more ...

  794     127

How to get latitude and longitude using react/javascript ?How to get latitude and longitude using react/javascript ?REACT

Click to see more ...

  581     104

get ip address reactget ip address reactREACT

Click to see more ...

  342     80

time ago reacttime ago reactREACT

Click to see more ...

  275     73

detect mobile device reactdetect mobile device reactREACT

Click to see more ...

  234     58

get client country reactget client country reactREACT

Click to see more ...

  227     53

how to detect a mobile device not tablet using react ?how to detect a mobile device not tablet using react ?REACT

Click to see more ...

  216     51

detect browser reactdetect browser reactREACT

Click to see more ...

  228     36