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
join us

create video player using react


 1385

Show Result
file.css
REACT


3

<html lang = "en">

<head>
<meta charset = "UTF-8">
<title>React App</title>
<script src="https://fb.me/react-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.34/browser.min.js"></script>
<link rel="stylesheet" href="/project/Silvester/sl_5N4mYduuRK202121243/file.css">

</head>

<body>

<script type="text/babel">

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')
);

</script>

<main id="app"></main>

</body>

</html>


By        
The power of the user (%)
7%



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

  15.5K     421

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.9K     214

create digital clock reactcreate digital clock reactREACT

Click to see more ...

  1.4K     141

country dropdown using reactcountry dropdown using reactREACT

Click to see more ...

  1.1K     127

create alarm clock using reactcreate alarm clock using reactREACT

Click to see more ...

  3.8K     113

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

Click to see more ...

  867     108

get client country reactget client country reactREACT

Click to see more ...

  607     82

get ip address reactget ip address reactREACT

Click to see more ...

  798     81

time ago reacttime ago reactREACT

Click to see more ...

  441     74

detect mobile device reactdetect mobile device reactREACT

Click to see more ...

  431     58

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