使用 Vue/Nuxt 在 Vimeo 视频播放器中更改当前时间

时间:2021-03-16 07:54:33

标签: vue.js nuxt.js vimeo

我正在使用此库 https://github.com/dobromir-hristov/vue-vimeo-player/tree/master 在 Vue+Nuxt 应用程序中嵌入 vimeo 播放器,但使用我自己的自定义控件,一切正常,但我找不到如何更改播放器当前时间的方法。我已经有时间想要切换了,但是我找不到实现此目的的方法。例如,在 Youtube IFrame API 中有一个名为 player.seekTo(nextTime) 的方法。另外我现在 https://developer.vimeo.com/player/sdk/reference Vimeo SDK 提供了一个方法 setCurrentTime(seconds),但我不知道如何将它与 vue-vimeo-player 库一起使用。

这是我的播放器组件代码:

<vimeo-player
    ref="player"
    :video-id="videoId"
    :controls="false"
    :autoplay="true"
    :options="{ responsive: true }"
    @playing="isPlaying = true"
    @pause="isPlaying = false"
    @ended="closeFullWindow"
    @timeupdate="onProgress"
  />

当用户点击我的自定义时间控件时的方法:

lineClicked ({ clientX }) {
  //...calculations to get nextTime...
  // Here i have my time where user clicked:
  console.log('nextTime', nextTime)

  // Here is method from Vimeo SDK but how use it with vue-vimeo-player?
  // this.player.setCurrentTime(30.456).then(function (seconds) {
  //   // `seconds` indicates the actual time that the player seeks to
  // }).catch(function (error) {
  //   switch (error.name) {
  //     case 'RangeError':
  //       // The time is less than 0 or greater than the video's duration
  //       break

  //     default:
  //       // Some other error occurred
  //       break
  //   }
  // })

  // With Youtube IFrame API all i had to do is:
  // this.player.seekTo(nextTime)
},

1 个答案:

答案 0 :(得分:0)

好的,我发现 vue-vimeo-player 基于这个 https://github.com/vimeo/player.js 所以基本上我必须做的是:this.$refs.player.player.setCurrentTime(nextTime)