Vue.js(Nuxt.js)でvideoタグを使って動画の時間が取得できない

Question

前提・実現したいこと

Vue.jsでvideoタグを使用して動画を表示したのですが、durationとcurrentTimeが取れずに困っています。
画面に 00:00/12:00のようにcurrentTime / duration の形で表示したく思っています。

また、methodsでmovieElemとしている箇所ですが共通しているのですが、これの呼び出しを共通化する方法などがあればご教示いただければと思います。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<template lang="html">
  <div>
    <video-header
      :videoTitle="videoTitle"
    />

    <!-- コンテンツ -->
    <div class="">
      <!-- 動画エリア -->
      <video
        ref="movie"
        :width="1136"
        :height="640"
        :src="video"
        autoplay
        pause="false"
        ended="false"
      />
    </div>

    <!-- フッター -->
    <video-footer
      :playedIcon="playedIcon"
      :soundedIcon="soundedIcon"
      @isPlayed="isPlayed"
      @isSounded="isSounded"
      @isTimeSeek="isTimeSeek"
    />
  </div>
</template>

<script>
import VideoHeader from '~/components/contents/video/_VideoHeader.vue'
import VideoFooter from '~/components/contents/video/_VideoFooter.vue'

import playIcon from '~/assets/image/icons/play1.png'
import pauseIcon from '~/assets/image/icons/pause1.png'
// import rePlayIcon from '~/assets/image/icons/restart1.png'
import soundIcon from '~/assets/image/icons/sound1.png'
import muteIcon from '~/assets/image/icons/sound2.png'

※①

export default {
  components: {
    VideoHeader,
    VideoFooter
  },
  props: {
    videoTitle: {
      type: String,
      required: true
    },
    video: {
      type: String,
      required: true
    }
  },
  data () {
    return {
      playedIcon: pauseIcon,
      soundedIcon: soundIcon,
      vol: 50
    }
  },
  methods: {
    // 再生/停止の切り替え
    isPlayed () {
      const movieElem = this.$refs.movie
      // 動画が最後まで完了しているか
      if (movieElem.ended) {
        movieElem.currentTime = 0 // 先頭に移動する
      }
      // 動画が最後まで再生されていない場合
      // 動画が一時停止状態か
      if (movieElem.paused) {
        // 一時停止の場合、再生する
        movieElem.play()
        this.playedIcon = pauseIcon
      } else {
        // 再生中の場合、一時停止する
        movieElem.pause()
        this.playedIcon = playIcon
      }
    },
    // 音量の切り替え
    isSounded () {
      const movieElem = this.$refs.movie
      // ミュートを解除した場合
      if (movieElem.muted) {
        movieElem.muted = false
        this.soundedIcon = soundIcon
      } else {
        movieElem.muted = true
        this.soundedIcon = muteIcon
      }
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

試したこと

※①の部分に
const elem = this.$refs.movie
と記述して、dataに

duration: elem.duration

とした場合には
Cannot read property '$refs' of undefinedのエラーが出てしまいますので使えないかと思います。

mounted () {
  const elem = this.$refs.movie
  const duration = elem.duration
}

とした場合にはNaNだったので、mountedでいいのかなと思いますが、取れていないようです。

補足情報（FW/ツールのバージョンなど）

Nuxt2.0.0

Answer 1

durationはvideoタグにloadedmetadataイベントを指定してその中で取得できました。
currentTimeは再生されるたびに代わっていくのでまだうまく取得できていませんがもう少し考えてみてわからなかったときに再度質問させていただきます