vue打断正在播放的视频 无缝播放下一个视频

要实现无缝播放下一个视频，可以采用以下的方法：

1. 使用 video.js 插件来播放视频，它自带了视频的播放控制面板，支持自定义皮肤和扩展插件。

2. 在每个视频播放结束时，监听视频的 ended 事件，触发回调函数，然后在回调函数中切换到下一个视频的播放。

3. 切换到下一个视频的播放时，需要先停止当前视频的播放，然后加载下一个视频的资源，并设置好视频的播放地址和其他参数，最后开始播放下一个视频。

4. 为了实现无缝切换，可以在切换视频时使用淡入淡出的动画效果，让用户感觉到视频的过渡更加自然流畅。

下面是一个示例代码：

<template>
  <div>
    <video ref="videoPlayer" class="video-js vjs-default-skin" controls preload="auto">
      <source :src="currentVideoSrc" type="video/mp4"></source>
    </video>
  </div>
</template>

<script>
import videojs from 'video.js'

export default {
  data() {
    return {
      videos: [
        {
          src: 'https://example.com/video1.mp4',
          title: '视频1',
        },
        {
          src: 'https://example.com/video2.mp4',
          title: '视频2',
        },
        {
          src: 'https://example.com/video3.mp4',
          title: '视频3',
        },
      ],
      currentVideoIndex: 0,
      player: null,
    }
  },
  mounted() {
    this.initVideoPlayer()
  },
  methods: {
    initVideoPlayer() {
      this.player = videojs(this.$refs.videoPlayer, {
        autoplay: true,
        controls: true,
        fluid: true,
        sources: [
          {
            src: this.videos[this.currentVideoIndex].src,
            type: 'video/mp4',
          },
        ],
      })

      // 监听视频播放结束事件
      this.player.on('ended', () => {
        this.playNextVideo()
      })
    },
    playNextVideo() {
      // 切换到下一个视频
      this.currentVideoIndex = (this.currentVideoIndex + 1) % this.videos.length

      // 停止当前视频的播放
      this.player.pause()

      // 加载下一个视频的资源
      this.player.src({
        src: this.videos[this.currentVideoIndex].src,
        type: 'video/mp4',
      })

      // 设置下一个视频的标题
      this.player.poster(this.videos[this.currentVideoIndex].title)

      // 开始播放下一个视频
      this.player.play()
    },
  },
}
</script>

在上面的代码中，我们使用了 video.js 插件来实现视频的播放控制，然后在 mounted 钩子函数中初始化视频播放器。在 initVideoPlayer 方法中，我们设置了视频的一些参数，同时也监听了 ended 事件，在视频播放结束后触发 playNextVideo 方法来切换到下一个视频的播放。

在 playNextVideo 方法中，我们先停止当前视频的播放，然后加载下一个视频的资源，设置好视频的标题和播放地址，最后开始播放下一个视频。这样就能实现无缝切换视频的效果了。