React Awesome Video Player
A Pen by Harmandeep Singh on CodePen.
<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" /> |