[Vue / Nuxt - Play multiple videos in a loop] Just some listeners and methods to play a list of videos. #NuxtJS #VueJS #JavaScript #FileHandling #Video

VideoSnippet.vue

<video
 :id='videoId'
 autoplay
 muted
>
</video>
  
  // element id of the video tag
  private videoId: string = 'video-appetizer'
  // those are all the videos that should play after each other, when the one before finishes
  private videoList: Array<string> = [
    '/videos/pexels-anastasia-shuraeva-8466198.mp4',
    '/videos/pexels-anastasia-shuraeva-8466199.mp4',
    '/videos/pexels-pavel-danilyuk-8327785.mp4',
    '/videos/pexels-pavel-danilyuk-8327800.mp4',
    '/videos/pexels-tima-miroshnichenko-6687506.mp4',
    '/videos/pexels-tima-miroshnichenko-6689105.mp4',
    '/videos/pexels-tima-miroshnichenko-6689582.mp4',
    '/videos/pexels-vlada-karpovich-6058367.mp4',
    '/videos/pexels-vlada-karpovich-6058632.mp4',
    '/videos/pexels-vlada-karpovich-6134025.mp4',
    '/videos/pexels-vlada-karpovich-6134026.mp4'
  ]
  // current video index of the playing video
  private videoIndex: number = 0

  // Lifecycle hook
  private destroyed(): void {
    document.getElementById(this.videoId)!.removeEventListener('ended', this.goNextVideo, false)
  }

  // Lifecycle hook
  private mounted(): void {
    document.addEventListener('DOMContentLoaded', () => {
      document.getElementById(this.videoId)!.setAttribute('src', this.videoList[0])
      document.getElementById(this.videoId)!.addEventListener('ended', this.goNextVideo, false)
    })
  }

  private playVideo(videoIndex: number): void {
    const videoPlayer = document.getElementById(this.videoId) as HTMLVideoElement
    videoPlayer.setAttribute('src', this.videoList[videoIndex])
    // videoPlayer.load()
    videoPlayer.play()
  }

  private goNextVideo(): void {
    this.videoIndex++
    if (this.videoIndex === this.videoList.length) {
      this.videoIndex = 0
      this.playVideo(this.videoIndex)
    } else {
      this.playVideo(this.videoIndex)
    }
  }