CODEWITHSUNDEEP
javascriptreactjsvideo.js
Nathan Shanko
Nathan Shanko

Reputation: 66

VideoJS currentTime() always returning 0

I'm using videoJs to load a video into an admin platform built in react. I set up the player here :

else if (contentSource == 'arclight'){
  var options = {
    height:'216',
    sources :[{
    //src: this.state.video.url,
  //  type: 'video/mp4'
  }]
  }
  var player = videojs('player',options,function onPlayerReady() {
    videojs.log('Your player is ready!');
  })
  this.setState({
    player:player,content: contentSource
  });
}

My video is displayed in this tag :

<video id="player" class="player"
className={`video-js vjs-default-skin vjs-big-play-centered 
${styles.vjs}`}
controls preload= "auto" data-
setup='{"example_option":true}'>
<source src={this.state.video.url} type= "video/mp4" />
<p className="vjs-no-js">
To view this video please enable JavaScript, and consider 
upgrading to a web browser that
<a href= "http://videojs.com/html5-video-support"  
target="_blank"> supports HTML5 video </a>
</p>
</video>

and lastly i'm trying to get the current time of the video that is playing in this method 

handleCurrentButton(inputId, event){
  event.preventDefault();
  var timeMark =0;
  if(this.state.content == 'vimeo'){
    this.state.player.getCurrentTime().then(function(seconds){console.log(seconds)
      timeMark=seconds;
      VideosActions.updateVideoAttribute(inputId, timeMark);
  }).catch(function(error){
  });
}
  else if(this.state.content == 'youtube') {
    timeMark = Math.round(this.state.player.getCurrentTime());
    VideosActions.updateVideoAttribute(inputId, timeMark);
}

else {
//  timeMark = this.state.player.currentTime();
  console.log(this.state.player.currentTime())
  VideosActions.updateVideoAttribute(inputId, timeMark);
}
}

the problem is that the player.currentTime() call is always returning 0. The other two getCurrentTime's for Vimeo and Youtube work fine. what is the reason behind this? I tried to give enough context around this problem so that you would be able to figure it out. Thanks for your help in advance!

Upvotes: 3

Views: 2741

Answers (2)

Eran Shlomo
Eran Shlomo

Reputation: 1

Worth making sure your server returning 206 response on the video HTTP request, otherwise players dont handle seek well.

Upvotes: 0

Ryan Tuosto
Ryan Tuosto

Reputation: 1951

The problem is getCurrentTime() returns a promise so you need to access the value of the time when the promise is resolved as a callback to the Promise's .then() function.

else {

  this.state.player.currentTime().then(function(seconds){
    console.log(seconds)
    timeMark=seconds;
    VideosActions.updateVideoAttribute(inputId, timeMark);
  });

}

Upvotes: 1

Related Questions