Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Is there a way to get a timestamp using Duration? #163

Closed
travisday opened this issue Feb 23, 2017 · 1 comment
Closed

Is there a way to get a timestamp using Duration? #163

travisday opened this issue Feb 23, 2017 · 1 comment

Comments

@travisday
Copy link

I am working on adding in a commenting feature like soundcloud where the timestamp of the video is saved on the comment. However right now when I just use the elapsed time it starts the same counter. How can I get the timestamp?

@cookpete
Copy link
Owner

cookpete commented Feb 24, 2017

The current time of the video is output by the onProgress callback, and the duration is output by onDuration (unfortunately this has to be a callback because not all players instantly provide the duration of a video). To get what you want you could do something like:

class Player extends Component {
  state = {
    duration: null,
    secondsElapsed: null
  }
  onDuration = (duration) => {
    this.setState({ duration })
  }
  onProgress = (progress) => {
    if (!this.state.duration) {
      // Sadly we don't have the duration yet so we can't do anything
      return
    }

    // progress.played is the fraction of the video that has been played
    // so multiply with duration to get number of seconds elapsed
    const secondsElapsed = progress.played * this.state.duration
    
    if (secondsElapsed !== this.state.secondsElapsed) {
      this.setState({ secondsElapsed })
    }
  }
  render () {
    return (
      <ReactPlayer
        playing
        url='http://example.com/file.mp4'
        onDuration={this.onDuration}
        onProgress={this.onProgress}
      />
    )
  }
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants