add custom HTTP headers

[aliyousefi-dev]

i using the angular and i want to add the header for my authentication to get the video for example i want add the jwt header for that i don't want use the dynamic url how i can achieve this ? to support both video and vtts

this is my codes component

<media-player
  #mediaPlayer
  view-type="video"
  stream-type="on-demand"
  crossorigin
  playsinline
  [muted]="isMuted"
  [volume]="volume"
  [poster]="posterUrl"
>
  <media-provider>
    <media-poster class="vds-poster"></media-poster>
    <source [src]="videoUrl" type="video/mp4" />
    <!-- Marker track (chapters) -->
    <track
      kind="chapters"
      [src]="vttMarkersUrl ? vttMarkersUrl : null"
      default
    />
  </media-provider>

  <media-audio-layout></media-audio-layout>
  <media-video-layout [thumbnails]="vttUrl || null"></media-video-layout>
</media-player>

import {
  Component,
  Input,
  CUSTOM_ELEMENTS_SCHEMA,
  AfterViewInit,
  ViewChild,
  ElementRef,
  OnInit,
} from '@angular/core';
import { CommonModule } from '@angular/common';

import 'vidstack/player';
import 'vidstack/player/layouts/default';
import 'vidstack/player/ui';

@Component({
  selector: 'app-vidstack-player',
  standalone: true,
  templateUrl: './vidstack-player.component.html',
  styleUrl: './vidstack-player.component.css',
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
  imports: [CommonModule],
})
export class VidstackPlayerComponent implements OnInit, AfterViewInit {
  @Input() videoUrl!: string;
  @Input() posterUrl?: string;
  @Input() vttUrl?: string;
  @Input() vttMarkersUrl?: string;

  isMuted = false;
  volume = 1;

  @ViewChild('mediaPlayer', { static: false }) mediaPlayerRef!: ElementRef;

  ngOnInit() {
    this.isMuted = localStorage.getItem('playerMuted') === 'true';
    const vol = parseFloat(localStorage.getItem('playerVolume') || '');
    if (!isNaN(vol)) this.volume = vol;
  }

  ngAfterViewInit() {
    const mediaPlayer: any = this.mediaPlayerRef.nativeElement;

    mediaPlayer.addEventListener('loadedmetadata', () => {
      mediaPlayer.muted = this.isMuted;
      mediaPlayer.volume = this.volume;
    });

    mediaPlayer.addEventListener('volume-change', () => {
      localStorage.setItem('playerMuted', String(mediaPlayer.muted));
      localStorage.setItem('playerVolume', String(mediaPlayer.volume));
    });
  }

  getCurrentTime(): number {
    const mediaPlayer: any = this.mediaPlayerRef?.nativeElement;
    return mediaPlayer?.currentTime || 0;
  }
}

[lucav76]

This would be a great feature. I totally support it, and I would be happy to help to add it to at least HLS, though I do not know the code base.

The rational is to allow easy authentication. What I have in mind is:

• storing the m3u8 file somewhere, e.g. S3
• call a pre-authorization endpoint that can give me a token to certify that I have access to the content
• pass the token via a header to the endpoint supplying the key to decrypt the videos This needs to work cross browser, of course

While something similar can in theory be achieved with cookies, with CORS is a pain and very brittle

[lucav76]

This would be much easier than generating dynamic URLs for the key.