vue中将当前视频播放进度转换为整数

在 JavaScript 里，你可以采用多种方式把 this.currentTime 转换为整数。在 Vue 组件的上下文中，this.currentTime 通常是一个浮点数，代表视频播放的当前时间（以秒为单位），如果你想将其转换为整数，可以按照以下几种常见的方法操作：

1. 使用 Math.floor() 方法

Math.floor() 方法会返回小于或等于一个给定数字的最大整数，也就是向下取整。

<template>
  <div>
    <video ref="videoRef" controls @pause="handlePause" @ended="handleEnded">
      <source src="your-video-url.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <p>当前播放进度（整数）: {{ currentTimeInt }} 秒</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0,
      currentTimeInt: 0,
      intervalId: null
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      const video = this.$refs.videoRef;
      if (video) {
        this.currentTime = video.currentTime;
        // 使用 Math.floor() 向下取整
        this.currentTimeInt = Math.floor(this.currentTime); 
      }
    }, 100);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
  methods: {
    handlePause() {
      console.log(`暂停时的播放进度（整数）: ${this.currentTimeInt} 秒`);
      localStorage.setItem('videoProgress', this.currentTimeInt);
    },
    handleEnded() {
      console.log(`播放完毕时的播放进度（整数）: ${this.currentTimeInt} 秒`);
      localStorage.setItem('videoProgress', this.currentTimeInt);
    }
  }
};
</script>

<style scoped>
video {
  width: 100%;
}
</style>

2. 使用 Math.round() 方法

Math.round() 方法会返回一个数字四舍五入后最接近的整数。

<template>
  <div>
    <video ref="videoRef" controls @pause="handlePause" @ended="handleEnded">
      <source src="your-video-url.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <p>当前播放进度（整数）: {{ currentTimeInt }} 秒</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0,
      currentTimeInt: 0,
      intervalId: null
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      const video = this.$refs.videoRef;
      if (video) {
        this.currentTime = video.currentTime;
        // 使用 Math.round() 四舍五入
        this.currentTimeInt = Math.round(this.currentTime); 
      }
    }, 100);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
  methods: {
    handlePause() {
      console.log(`暂停时的播放进度（整数）: ${this.currentTimeInt} 秒`);
      localStorage.setItem('videoProgress', this.currentTimeInt);
    },
    handleEnded() {
      console.log(`播放完毕时的播放进度（整数）: ${this.currentTimeInt} 秒`);
      localStorage.setItem('videoProgress', this.currentTimeInt);
    }
  }
};
</script>

<style scoped>
video {
  width: 100%;
}
</style>

3. 使用 parseInt() 函数

parseInt() 函数会解析一个字符串参数，并返回一个指定基数的整数。如果传入的是数字，它会直接转换为整数，并且会忽略小数部分（相当于向下取整）。

<template>
  <div>
    <video ref="videoRef" controls @pause="handlePause" @ended="handleEnded">
      <source src="your-video-url.mp4" type="video/mp4">
      Your browser does not support the video tag.
    </video>
    <p>当前播放进度（整数）: {{ currentTimeInt }} 秒</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      currentTime: 0,
      currentTimeInt: 0,
      intervalId: null
    };
  },
  mounted() {
    this.intervalId = setInterval(() => {
      const video = this.$refs.videoRef;
      if (video) {
        this.currentTime = video.currentTime;
        // 使用 parseInt() 转换为整数
        this.currentTimeInt = parseInt(this.currentTime, 10); 
      }
    }, 100);
  },
  beforeDestroy() {
    clearInterval(this.intervalId);
  },
  methods: {
    handlePause() {
      console.log(`暂停时的播放进度（整数）: ${this.currentTimeInt} 秒`);
      localStorage.setItem('videoProgress', this.currentTimeInt);
    },
    handleEnded() {
      console.log(`播放完毕时的播放进度（整数）: ${this.currentTimeInt} 秒`);
      localStorage.setItem('videoProgress', this.currentTimeInt);
    }
  }
};
</script>

<style scoped>
video {
  width: 100%;
}
</style>

你可以根据具体需求选择合适的方法来进行转换。如果希望直接舍去小数部分，可使用 Math.floor() 或 parseInt()；如果需要四舍五入，就使用 Math.round()。