Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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!

like image 659
Nathan Shanko Avatar asked Mar 13 '26 15:03

Nathan Shanko


1 Answers

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);
  });

}
like image 120
Ryan Tuosto Avatar answered Mar 15 '26 05:03

Ryan Tuosto



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!