Skip to content

Instantly share code, notes, and snippets.

@ihpannu
Created December 18, 2017 08:36
Show Gist options
  • Save ihpannu/78b7c6851e0ae38729ca9cc84e9d3a76 to your computer and use it in GitHub Desktop.
Save ihpannu/78b7c6851e0ae38729ca9cc84e9d3a76 to your computer and use it in GitHub Desktop.
React Awesome Video Player
<main id="app"></main>
const VIDEOS = {
deer: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-fast.mp4',
snail: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-slow.mp4',
cat: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-cute.mp4',
spider: 'https://s3.amazonaws.com/codecademy-content/courses/React/react_video-eek.mp4'
};
//--------------------------------------------
const App = React.createClass({
getInitialState() {
return { src: VIDEOS.deer};
},
chooseVideo(newVideo) {
this.setState({
src: VIDEOS[newVideo]
});
},
render() {
return (
<div>
<h1>React Video Player</h1>
<Menu chooseVideo={this.chooseVideo} />
<Video src={this.state.src} />
</div>
);
}
});
//--------------------------------------------
const Video = React.createClass({
render() {
return (
<div>
<video
controls
autoPlay
src={this.props.src} />
</div>
);
}
});
//--------------------------------------------
const Menu = React.createClass({
handleClick(e) {
const text = e.target.value;
this.props.chooseVideo(text);
},
render() {
return (
<form onClick={this.handleClick}>
<input type="radio" name="src" value="deer"/> Deer
<input type="radio" name="src" value="snail" /> Snail
<input type="radio" name="src" value="cat" /> Cat
<input type="radio" name="src" value="spider" /> Spider
</form>
);
}
});
//--------------------------------------------
ReactDOM.render(
<App />,
document.getElementById('app')
);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react-dom.min.js"></script>
html, body {
margin: 0;
background: #152A39;
color: #FEFFFE;
}
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: 800px;
max-width: 90%;
border-radius: 10px;
}
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment