Vue.jsで動画の再生時間を表示したい

前提・実現したいこと

controlBarをデフォルトのではなくオリジナルで実装したいとの要望があり、時間を取得して、それをコントロールバーのコンポーネントに渡して表示しようとしていますがundefinedになってしまっています。

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

undefinde/undefinde
の形でdev toolに表示されてしまう。

該当のソースコード

Vue.js
1<template lang="html">
2  <div>
3    <video-header
4      :videoTitle="videoTitle"
5    />
6
7    <!-- コンテンツ -->
8    <div class="">
9      <!-- 動画エリア -->
10      <video
11        ref="movie"
12        @loadedmetadata="loadedmetadata"
13        @timeupdate="timeupdate"
14        :src="video"
15        autoplay
16        ended="false"
17        height="640px"
18        pause="false"
19        preload="metadata"
20        width="1136px"
21      />
22    </div>
23
24    <!-- フッター -->
25    <video-footer
26      :playedIcon="playedIcon"
27      :soundedIcon="soundedIcon"
28      :controlBarTime="controlBarTime"
29      @isPlayed="isPlayed"
30      @isSounded="isSounded"
31      @isTimeSeek="isTimeSeek"
32    />
33  </div>
34</template>
35
36<script>
37import VideoHeader from '~/components/contents/video/_VideoHeader.vue'
38import VideoFooter from '~/components/contents/video/_VideoFooter.vue'
39
40import playIcon from '~/assets/image/icons/play1.png'
41import pauseIcon from '~/assets/image/icons/atten1.png'
42// import rePlayIcon from '~/assets/image/icons/check1.png'
43import soundIcon from '~/assets/image/icons/sound1.png'
44import muteIcon from '~/assets/image/icons/sound2.png'
45
46export default {
47  components: {
48    VideoHeader,
49    VideoFooter
50  },
51  props: {
52    videoTitle: {
53      type: String,
54      required: true
55    },
56    video: {
57      type: String,
58      required: true
59    }
60  },
61  data () {
62    return {
63      playedIcon: pauseIcon,
64      soundedIcon: soundIcon,
65      vol: 0.75
66    }
67  },
68  computed: {
69    controlBarTime () {
70      return this.current + '/' + this.duration
71    }
72  },
73  methods: {
74    // 再生/停止の切り替え
75    isPlayed () {
76      const movieElem = this.$refs.movie
77      // 動画が最後まで完了しているか
78      if (movieElem.ended) {
79        movieElem.currentTime = 0 // 先頭に移動する
80      }
81      // 動画が最後まで再生されていない場合
82      // 動画が一時停止状態か
83      if (movieElem.paused) {
84        // 一時停止の場合、再生する
85        movieElem.play()
86        this.playedIcon = pauseIcon
87      } else {
88        // 再生中の場合、一時停止する
89        movieElem.pause()
90        this.playedIcon = playIcon
91      }
92    },
93    // 音量の切り替え
94    isSounded () {
95      const movieElem = this.$refs.movie
96      // ミュートを解除した場合
97      if (movieElem.muted) {
98        movieElem.muted = false
99        this.soundedIcon = soundIcon
100      } else {
101        movieElem.muted = true
102        this.soundedIcon = muteIcon
103      }
104    },
105    loadedmetadata () {
106      const movieElem = this.$refs.movie
107      const durationMin = this.changeZeroPaddingMin(movieElem.duration)
108      const durationSec = this.changeZeroPaddingSec(movieElem.duration)
109      const duration = durationMin + ':' + durationSec
110
111      const currentMin = this.changeZeroPaddingMin(movieElem.currentTime)
112      const currentSec = this.changeZeroPaddingSec(movieElem.currentTime)
113      const current = currentMin + ':' + currentSec
114
115      console.log(duration)
116      console.log(current)
117    },
118    changeZeroPaddingMin (value) {
119      return ('0' + Math.floor(value / 60)).slice(-2)
120    },
121    changeZeroPaddingSec (value) {
122      return ('0' + Math.floor(value)).slice(-2)
123    },
124    timeupdate () {
125      const movieElem = this.$refs.movie
126
127      const currentMin = this.changeZeroPaddingMin(movieElem.currentTime)
128      const currentSec = this.changeZeroPaddingSec(movieElem.currentTime)
129      this.current = currentMin + ':' + currentSec
130      console.log(this.current)
131    }
132  }
133}
134</script>
135
136<style lang="scss" scoped>
137
138</style>
139