Vue2使用vue-video-player實(shí)現(xiàn)斷點(diǎn)續(xù)傳功能

更新時(shí)間：2025年07月16日 10:29:32 作者：奇妙智能

斷點(diǎn)續(xù)傳是指在文件傳輸過程中,如果傳輸被中斷或者發(fā)生錯(cuò)誤,可以從上一次中斷的地方繼續(xù)傳輸,而不是從頭開始,這對于大文件的傳輸尤為重要,本文給大家介紹了Vue2使用vue-video-player實(shí)現(xiàn)斷點(diǎn)續(xù)傳功能,需要的朋友可以參考下

Vue2中使用vue-video-player實(shí)現(xiàn)斷點(diǎn)續(xù)傳功能

實(shí)現(xiàn)原理

斷點(diǎn)續(xù)傳的核心在于：

監(jiān)聽視頻播放進(jìn)度并定期保存
重新加載頁面或切換回視頻時(shí)恢復(fù)上次播放位置

具體實(shí)現(xiàn)步驟

1. 安裝依賴

npm install vue-video-player --save
# 或使用yarn
yarn add vue-video-player

2. 組件實(shí)現(xiàn)

<template>
  <div class="video-container">
    <video-player
      ref="videoPlayer"
      class="video-player"
      :options="playerOptions"
      @timeupdate="onTimeUpdate"
      @play="onPlay"
      @pause="onPause"
      @ended="onEnded"
    ></video-player>
  </div>
</template>

<script>
import 'video.js/dist/video-js.css'
import { videoPlayer } from 'vue-video-player'

export default {
  components: {
    videoPlayer
  },
  data() {
    return {
      playerOptions: {
        autoplay: false,
        controls: true,
        sources: [{
          type: 'video/mp4',
          src: 'https://example.com/video.mp4'
        }],
        // 其他配置...
      },
      saveProgressInterval: null,
      lastSaveTime: 0
    }
  },
  computed: {
    videoSrc() {
      return this.playerOptions.sources[0].src
    }
  },
  mounted() {
    // 初始化播放器后加載保存的進(jìn)度
    this.$nextTick(() => {
      this.loadSavedProgress()
      
      // 設(shè)置進(jìn)度保存定時(shí)器(每5秒保存一次)
      this.saveProgressInterval = setInterval(() => {
        this.saveCurrentProgress()
      }, 5000)
    })
  },
  beforeDestroy() {
    // 組件銷毀前清除定時(shí)器
    if (this.saveProgressInterval) {
      clearInterval(this.saveProgressInterval)
    }
  },
  watch: {
    // 監(jiān)聽視頻源變化，加載新視頻的進(jìn)度
    videoSrc(newSrc) {
      this.$nextTick(() => {
        this.loadSavedProgress()
      })
    }
  },
  methods: {
    onTimeUpdate() {
      // 可選：實(shí)時(shí)更新進(jìn)度，但頻繁觸發(fā)可能影響性能
      // 實(shí)際應(yīng)用中可能不需要每次timeupdate都保存
    },
    onPlay() {
      // 視頻開始播放時(shí)開始保存進(jìn)度
      this.startSaveProgress()
    },
    onPause() {
      // 視頻暫停時(shí)保存當(dāng)前進(jìn)度
      this.saveCurrentProgress()
    },
    onEnded() {
      // 視頻播放結(jié)束時(shí)清除保存的進(jìn)度
      this.clearSavedProgress()
    },
    startSaveProgress() {
      // 開始播放時(shí)啟動(dòng)定時(shí)保存
      if (!this.saveProgressInterval) {
        this.saveProgressInterval = setInterval(() => {
          this.saveCurrentProgress()
        }, 5000)
      }
    },
    saveCurrentProgress() {
      const currentTime = this.$refs.videoPlayer.player.currentTime()
      // 避免過于頻繁保存(小于1秒的播放不保存)
      if (currentTime - this.lastSaveTime >= 1) {
        localStorage.setItem(`video-progress-${this.videoSrc}`, currentTime.toString())
        this.lastSaveTime = currentTime
      }
    },
    loadSavedProgress() {
      const savedTime = localStorage.getItem(`video-progress-${this.videoSrc}`)
      if (savedTime) {
        this.$nextTick(() => {
          this.$refs.videoPlayer.player.currentTime(parseFloat(savedTime))
        })
      }
    },
    clearSavedProgress() {
      localStorage.removeItem(`video-progress-${this.videoSrc}`)
    }
  }
}
</script>

<style scoped>
.video-container {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}
.video-player {
  width: 100%;
  height: 0;
  padding-top: 56.25%; /* 16:9比例 */
  position: relative;
}
</style>

注意事項(xiàng)

??存儲介質(zhì)選擇??：

使用localStorage適合單機(jī)應(yīng)用
如需跨設(shè)備同步，應(yīng)考慮服務(wù)器端存儲

??進(jìn)度保存頻率??：

不要過于頻繁保存(如每秒多次)，以免影響性能
建議至少間隔1秒保存一次

??不同視頻源處理??：

切換視頻源時(shí)要清除舊視頻的進(jìn)度記錄
使用唯一的鍵名標(biāo)識不同視頻的進(jìn)度(如video-progress-${src})

??頁面關(guān)閉前保存??：

mounted() {
  window.addEventListener('beforeunload', this.handleBeforeUnload)
},
beforeDestroy() {
  window.removeEventListener('beforeunload', this.handleBeforeUnload)
},
methods: {
  handleBeforeUnload() {
    this.saveCurrentProgress()
  }
}

可以監(jiān)聽beforeunload事件確保進(jìn)度保存

??大視頻文件處理??：

對于非常大的視頻，可以考慮只保存關(guān)鍵點(diǎn)位置
或增加保存間隔以減少存儲和處理壓力

??錯(cuò)誤處理??：

添加try-catch處理localStorage可能的異常
考慮localStorage容量限制(通常5MB左右)

這種實(shí)現(xiàn)方式簡單有效，適用于大多數(shù)需要斷點(diǎn)續(xù)傳功能的視頻播放場景。

到此這篇關(guān)于Vue2使用vue-video-player實(shí)現(xiàn)斷點(diǎn)續(xù)傳功能的文章就介紹到這了,更多相關(guān)Vue2 vue-video-player斷點(diǎn)續(xù)傳內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: