multiple-video-player.js

document.addEventListener('DOMContentLoaded', function() {
  var lang = document.documentElement.lang;
  var translations;
  if (lang == 'da') {
    translations = {
      'pause': 'Stop afspilning (brug Enter tast)',
      'play': 'Afspil (brug Enter tast)'
    }
  } else {
    translations = {
      'pause': 'Pause (use Enter key)',
      'play': 'Play (use Enter bar)'
    }
  }

  class Video {
    constructor(video) {
      this.videoContainer = video;
      this.video = this.videoContainer.querySelector('.video');
      this.toggleButton = this.videoContainer.querySelector('.play-pause-button');

      this.prefersReducedMotion();
      this.addEventListeners();
    }

    addEventListeners() {
      this.toggleButton.addEventListener('click', () => {
        this.togglePlayPause();
      });
    }

    togglePlayPause() {
      if (this.video.paused || this.video.ended) {
        this.playVideo();
      } else {
        this.pauseVideo();
      }
    }

    playVideo() {
      this.video.play();
      this.toggleButton.classList.remove('paused');
      this.toggleButton.setAttribute('aria-pressed', 'false');
      this.toggleButton.setAttribute('aria-label', translations.pause);
    }

    pauseVideo() {
      this.video.pause();
      this.toggleButton.classList.add('paused');
      this.toggleButton.setAttribute('aria-pressed', 'true');
      this.toggleButton.setAttribute('aria-label', translations.play);

    }

    prefersReducedMotion() {
      if (matchMedia('(prefers-reduced-motion)').matches) {
        this.video.removeAttribute('autoplay');
        this.pauseVideo();
        this.video.currentTime = 0;
      }
    }
  }

  const videos = document.querySelectorAll('.video-container');
  Array.from(videos).forEach((video) => {
    const videoEl = new Video(video);
  });

}, false);