You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

49 lines
1.0 KiB

  1. import PureRenderMixin from 'react-addons-pure-render-mixin';
  2. const ExtendedVideoPlayer = React.createClass({
  3. propTypes: {
  4. src: React.PropTypes.string.isRequired,
  5. time: React.PropTypes.number,
  6. controls: React.PropTypes.bool.isRequired,
  7. muted: React.PropTypes.bool.isRequired
  8. },
  9. mixins: [PureRenderMixin],
  10. handleLoadedData () {
  11. if (this.props.time) {
  12. this.video.currentTime = this.props.time;
  13. }
  14. },
  15. componentDidMount () {
  16. this.video.addEventListener('loadeddata', this.handleLoadedData);
  17. },
  18. componentWillUnmount () {
  19. this.video.removeEventListener('loadeddata', this.handleLoadedData);
  20. },
  21. setRef (c) {
  22. this.video = c;
  23. },
  24. render () {
  25. return (
  26. <div className='extended-video-player'>
  27. <video
  28. ref={this.setRef}
  29. src={this.props.src}
  30. autoPlay
  31. muted={this.props.muted}
  32. controls={this.props.controls}
  33. loop={!this.props.controls}
  34. />
  35. </div>
  36. );
  37. },
  38. });
  39. export default ExtendedVideoPlayer;