【问题标题】:VideoJS currentTime() always returning 0VideoJS currentTime() 总是返回 0
【发布时间】:2017-05-03 21:09:59
【问题描述】:

我正在使用 videoJs 将视频加载到管理员中 平台内置反应。我在这里设置播放器:

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

我的视频显示在这个标签中:

<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>

最后我正在尝试获取以这种方法播放的视频的当前时间

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

问题是 player.currentTime() 调用总是返回 0。另外两个用于 Vimeo 和 Youtube 的 getCurrentTime 工作正常。这背后的原因是什么?我试图围绕这个问题提供足够的背景信息,以便您能够弄清楚。 提前感谢您的帮助!

【问题讨论】:

    标签: javascript reactjs video.js


    【解决方案1】:

    问题是 getCurrentTime() 返回一个 Promise,因此您需要访问 Promise 的 .then() 函数的回调,作为解决该 Promise 的时间值。

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

    【讨论】:

    • 根据 videojs 文档,我相信它不会返回承诺。 docs.videojs.com/Player.html#currentTime :文档说它应该返回一个数字?
    • 看来您是对的,但我正在查看您的 vimeo 示例,这看起来像是一个承诺。您在 Vimeo 和 YouTube 中的使用方式不同,但它们都可以使用?
    • 是的,vimeo 和 youtube 都可以。它们是不同的,因为我分别为它们使用了 vimeo 和 youtube 播放器。 vimeo 是一个承诺,所以我必须使用 .then 但 youtube 的 getCurrent 时间返回一个数字。我拥有的第三个播放器用于内容源,它没有像 vimeo 和 youtube 这样的自定义播放器
    【解决方案2】:

    值得确保您的服务器对视频 HTTP 请求返回 206 响应,否则播放器无法很好地处理搜索。

    【讨论】:

    • 如果您可以发布代码示例,这将对 SO 非常有帮助。
    猜你喜欢
    • 1970-01-01
    • 2015-09-27
    • 2014-03-20
    • 2013-04-13
    • 2013-03-30
    • 2016-07-13
    • 2023-04-09
    • 2021-10-27
    • 1970-01-01
    相关资源
    最近更新 更多