پخش کننده ویدئو

      //JS CODE
      // get target from media with controls
      const $target = document.querySelector('audio[controls], video[controls]');
      
      // assign media player from target
      const player = new MediaPlayer(
          $target,
          {
              prefix: 'media',
              lang: {
                  play: 'play',
                  pause: 'pause',
                  mute: 'mute',
                  unmute: 'unmute',
                  volume: 'volume',
                  currentTime: 'current time',
                  remainingTime: 'remaining time',
                  enterFullscreen: 'enter fullscreen',
                  leaveFullscreen: 'leave fullscreen',
                  download: 'download'
              },
              svgs: {
                  play: '#symbol-play',
                  pause: '#symbol-pause',
                  mute: '#symbol-mute',
                  unmute: '#symbol-unmute',
                  volume: '#symbol-volume',
                  currentTime: '#symbol-currentTime',
                  remainingTime: '#symbol-remainingTime',
                  enterFullscreen: '#symbol-enterFullscreen',
                  leaveFullscreen: '#symbol-leaveFullscreen',
                  download: '#symbol-download'
              },
              timeDir: 'ltr',
              volumeDir: 'ltr'
          }
      );
      
      //MARKUP
      <div class="video-container">
          <video id="video-player" class="media-player" src="https://diveinto.org/media/uscenes_h-264_hd_test.mp4"
              poster="https://diveinto.org/media/uscenes_h-264_hd_test.jpg" controls loop
              data-options='{}'></video>
      </div>
      
      <svg class="is-hidden">
          <symbol id="symbol-play" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
              <polygon points="5 3 19 12 5 21 5 3"></polygon>
          </symbol>
          <symbol id="symbol-pause" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
              <rect x="6" y="4" width="4" height="16"></rect><rect x="14" y="4" width="4" height="16"></rect>
          </symbol>
          <symbol id="symbol-mute" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path>
          </symbol>
          <symbol id="symbol-unmute" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
              <polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon>
              <line x1="23" y1="9" x2="17" y2="15"></line><line x1="17" y1="9" x2="23" y2="15"></line>
          </symbol>
          <symbol id="symbol-download" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
              <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
              <polyline points="7 10 12 15 17 10"></polyline>
              <line x1="12" y1="15" x2="12" y2="3"></line>
          </symbol>
          <symbol id="symbol-enterFullscreen" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
              <path d="M8 3H5a2 2 0 0 0-2 2v3m18 0V5a2 2 0 0 0-2-2h-3m0 18h3a2 2 0 0 0 2-2v-3M3 16v3a2 2 0 0 0 2 2h3"></path>
          </symbol>
          <symbol id="symbol-leaveFullscreen" viewBox="0 0 24 24" width="18" height="18" stroke="currentColor" stroke-width="2" fill="none" stroke-linecap="round" stroke-linejoin="round" class="css-i6dzq1">
              <path d="M8 3v3a2 2 0 0 1-2 2H3m18 0h-3a2 2 0 0 1-2-2V3m0 18v-3a2 2 0 0 1 2-2h3M3 16h3a2 2 0 0 1 2 2v3"></path>
          </symbol>
      </svg>