plyr 和 vue.js：通过计算属性访问视频持续时间

Question

我正在尝试根据我正在播放的视频的持续时间动态加载内容。我在阅读 duration 属性时遇到问题。和plyr出现在DOM的时间有关系吗？

假设我有一个带有这一行的 vue 模板：

<div ref="dur"> duration: {{ functionOfDuration }} </div>
<plyr>
  <video id="vidplayer" v-on:timeupdate="updatePosition">
    <source src="videos.mp4" type="video/mp4">
  </video>
</plyr>

然后在我的vue组件中：

<script>
export default {
  data() {
  },

  computed: {
    functionOfDuration: setInterval(function () {
      const player = new Plyr('#vidplayer');
      if(player.readyState > 0) {
        return player.duration;
      }
    }, 200),
  },
};
<script>

setInterval 旨在定期重新检查，以便在 player.readyState 为 true 时最终设置属性 functionOfDuration。

我收到错误[Vue warn]: Getter is missing for computed property "functionOfDuration".

---

请注意，稍后读取持续时间的代码会找到该属性：

  methods: {
    updatePosition(t) {
      const player = new Plyr('#vidplayer');
      this.$refs.dur.innerHTML = player.duration;
    },
  },

Answer 1

如果您使用vue-plyr，您可以通过@timeupdate 事件访问持续时间

<template>
  <div id="app">
     <div>Duration: {{ duration }}</div>
        <plyr @timeupdate="videoTimeUpdated" :emit="['timeupdate']" ref="player">
          <video>
              <source src="https://cdn.plyr.io/static/demo/View_From_A_Blue_Moon_Trailer-576p.mp4" type="video/mp4" />
          </video>
      </plyr>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      duration: null,
      player: null
    };
  },
  components: {},
  mounted() {
    this.player = this.$refs.player.player;
  },
  methods: {
    videoTimeUpdated: function(event) {
      this.duration = this.player.currentTime;
    }
  }
};
</script>

你可以在https://codesandbox.io/s/6y7r8zk8ow查看我的演示