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

我正在尝试根据我正在播放的视频的持续时间动态加载内容。我在读取

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 plyr

，则可以通过@timeupdate event访问持续时间

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

持续时间：{{Duration}}
导出默认值{
名称：“应用程序”，
数据（）{
返回{
持续时间：空，
玩家：空
};
},
组件：{}，
安装的（）{
this.player=this.$refs.player.player；
},
方法：{
VideoTimeUpdate：功能（事件）{
this.duration=this.player.currentTime；
}
}
};

---

您可以在

查看我的演示，这是视频播放的当前时间；不是持续时间，它是视频的总长度。

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

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