vue实现视频流的记忆播放

Vue可以通过使用HTML5的video标签来实现视频播放，并且可以使用一些JavaScript库来实现记忆播放功能。

记忆播放是指当用户暂停或关闭视频后，下一次打开视频时可以从上次观看的时间点继续播放。实现记忆播放功能的主要步骤如下：

1. 获取视频的当前时间点

在用户暂停或关闭视频时，可以通过监听video标签的timeupdate事件来获取视频的当前时间点。

<video ref="video" @timeupdate="onTimeUpdate"></video>

...

methods: {
  onTimeUpdate() {
    this.currentTime = this.$refs.video.currentTime;
  }
}

2. 将视频的当前时间点保存到本地存储

在获取到视频的当前时间点后，可以使用浏览器的本地存储（如localStorage）将其保存起来。在Vue中，可以使用Vue的mixin来实现全局的localStorage操作。

const localStorageMixin = {
  methods: {
    setLocalStorage(key, value) {
      localStorage.setItem(key, JSON.stringify(value));
    },
    getLocalStorage(key) {
      const value = localStorage.getItem(key);
      return value ? JSON.parse(value) : null;
    },
    removeLocalStorage(key) {
      localStorage.removeItem(key);
    }
  }
}

Vue.mixin(localStorageMixin);

在视频暂停或关闭时，可以将视频的当前时间点保存到本地存储。

methods: {
  onTimeUpdate() {
    this.currentTime = this.$refs.video.currentTime;
    this.setLocalStorage('video-current-time', this.currentTime);
  },
  onPause() {
    this.setLocalStorage('video-current-time', this.currentTime);
  },
  onClose() {
    this.setLocalStorage('video-current-time', this.currentTime);
  }
}

3. 在视频播放时，从本地存储中获取上次观看的时间点

在视频播放时，可以在mounted或created生命周期钩子中从本地存储中获取上次观看的时间点，并将其设置为视频的初始时间点。

mounted() {
  const currentTime = this.getLocalStorage('video-current-time');
  if (currentTime) {
    this.$refs.video.currentTime = currentTime;
  }
}

通过以上步骤，就可以实现记忆播放功能。当用户暂停或关闭视频时，会将当前时间点保存到本地存储中，下一次打开视频时会从上次观看的时间点继续播放。