Well, I have a problem with reading the total time of the video. I tried to use duration property but unfortunately it returns NaN to me. Is there any way to get duration of the video? I read that the problem can occur because the movie hasn't loaded yet, but I'm using mounted so it should be okay.

CODE:

<template>
<div>
<div id="wrapper">
 <div id='player_wrapper' >
  <video 
  ref = "videoPlayer"
  @mouseover="hover = true"
  @mouseout="hover = false"
  @click="toggle_vid"
  id='video_player'>
   <source src='@/assets/filmik.mp4' type='video/mp4'>
  </video>
  <div id='player_controls'
  v-show="hover"
  @mouseover="hover = true"
  @mouseout="hover = false"
  >

   <input v-if="isPlaying" type="image" 
   :src="pauseButtonImage" 
   @click="toggle_vid" id="play_button">
   <input v-else type="image" 
   :src="playButtonImage" 
   @click="toggle_vid" id="play_button">
   {{currentTime}}
  <progress refs="progress" id="progress" max="100" value="0"> Progress </progress>
  {{videoDuration}}
   <img v-if="muted" :src='mutedImage' id="vol_img" @click="mute_video">
   <img v-else :src='soundImage' id="vol_img" @click="mute_video">
   <input ref = "volumePlayer" type="range" id="change_vol" v-on:change="change_volume" step="0.05" min="0" max="1"  v-model="volumeValue">
   <input
    @click="toggle_fullscreen"
    type="image" :src="fulscreenImage" id="fullscreen">
  </div>
 </div>
</div>
  </div>

</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return{
      isPlaying: false,
      playButtonImage: require('@/assets/play.png'),
      pauseButtonImage: require('@/assets/pause.png'),
      soundImage: require('@/assets/sound.png'),
      mutedImage: require('@/assets/muted.png'),
      fulscreenImage:require('@/assets/fullscreen.png'),
      closefullscreenImage:require('@/assets/closefullscreen.png'),
      currentTime: 0,
      videoDuration:0,
      muted:0,
      volumeValue:1,
      hover:false,
      
     
      
    }
  },
  methods: {
    toggle_vid(){
      if(this.$refs.videoPlayer.paused)
       {
        this.isPlaying = true;
        this.$refs.videoPlayer.play();
       }
       else{
        this.$refs.videoPlayer.pause();
        this.isPlaying = false;
       }

    },
    change_volume(){
      this.$refs.videoPlayer.volume= this.volumeValue;
      if(this.$refs.videoPlayer.volume==0){
        this.muted=1;

      }
      else{
        this.muted=0;
      }
    },
    stop_video(){
      this.$refs.videoPlayer.pause();
      this.currentTime = 0;

    },
    mute_video(){
      if(this.muted==0){
        this.$refs.videoPlayer.volume=0;
        this.muted=1;
      }
      else{
        this.$refs.videoPlayer.volume=this.volumeValue;
        this.muted=0;
      }
    },
    toggle_fullscreen(){
      this.$refs.videoPlayer.webkitRequestFullScreen();
    },
    
    
  },
  mounted(){
    
      return this.videoDuration = this.$refs.videoPlayer.duration;
      
    
  }
}
</script>

CodePudding user response：

The mounted hook only guarantees the children elements have mounted in the DOM. It does not guarantee the <video> has loaded the metadata from its source, which would be required to determine the video's duration.

Solution

The <video>'s duration is available when the loadedmetadata event fires, so you can use the v-on:loadedmetadata directive on the <video> element to invoke a handler that uses the duration:

<template>