Welcome aboard! We are happy you are here and wish you good net-raft!
<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>
The most helpful REACT solutions
How to get client ip address using react ?REACT Click to see more ... 19.2K 421