Angular Project Still Fetching CDN HLS Stream Instead of Local Package

[kzwr]

Current Behavior:

Using Angular with the npm installation method to integrate the Vidstack player. However, when requesting the HLS video stream, the player still fetches the stream from the CDN instead of using the local package version.

https://www.vidstack.io/docs/player/getting-started/installation/angular?provider=hls&styling=default-layout

Expected Behavior:

The Vidstack player should request and use the locally hosted HLS package instead of the CDN version. Steps To Reproduce:

Install Vidstack player using npm in an Angular project.
Configure the player to use a locally hosted HLS package.
Attempt to play a video using HLS.
Observe that the player still fetches the HLS stream from the CDN.

Reproduction Link: How to create a repro? Environment:

Framework: Angular 17
Node: 16.0.0
OS: Windows 11
Browser: Chrome 114

Anything Else?

The player works fine, but the issue is with how it handles the HLS request. Here is a sample of my configuration:

[wplit]

see the 'loading' part of the docs - https://www.vidstack.io/docs/player/api/providers/hls#loading

add your new URL if hosting hls.js locally.

[kzwr]

see the 'loading' part of the docs - https://www.vidstack.io/docs/player/api/providers/hls#loading

add your new URL if hosting hls.js locally.

Thank you so much for your quick response and guidance. I checked out the "loading" part of the documentation, as you suggested, and successfully resolved the issue by adding the new URL for hosting hls.js locally.

Here’s the example code I used for anyone who might face a similar issue:

import { Component, CUSTOM_ELEMENTS_SCHEMA, ElementRef, Input, ViewChild } from '@angular/core'; import { Tool } from '../../../../shared/tool'; import HLS from 'hls.js'; import 'vidstack/player'; import 'vidstack/player/layouts/default'; import 'vidstack/player/ui'; import { MediaProviderAdapter, MediaProviderChangeEvent } from 'vidstack'; import { isHLSProvider, type TextTrackInit } from 'vidstack'; // https://www.vidstack.io/docs/wc/player/core-concepts/events?styling=default-theme @Component({ selector: 'app-media-player', standalone: true, imports: [], schemas: [CUSTOM_ELEMENTS_SCHEMA], templateUrl: './media-player.component.html', styleUrl: './media-player.component.scss' }) export class MediaPlayerComponent { @Input() src: string; @Input() thumbnails: string;

@ViewChild('blurred', { static: true }) blurredElement: ElementRef; @ViewChild('mediaPlayer', { static: true }) mediaPlayerElement: ElementRef;

ctx: CanvasRenderingContext2D; canvas: HTMLCanvasElement; video: HTMLVideoElement;

ngAfterViewInit() { // https://www.vidstack.io/docs/wc/player/components/core/player?styling=default-theme#player.events const instance = this.mediaPlayerElement.nativeElement; console.log('mediaPlayerElement', this.mediaPlayerElement); if (instance) { instance.addEventListener('loaded-metadata', (event: any) => { this.video = instance.querySelector('video'); //console.log(instance, this.video);

    if (this.video) {
      this.canvas = this.blurredElement.nativeElement;
      this.canvas.width = this.canvas.offsetWidth / 2; 
      this.canvas.height = this.canvas.offsetHeight / 2;
      this.ctx = this.canvas.getContext('2d', { alpha: false });
      //console.log('event', event,this.ctx);
      setTimeout(() => {
        this.ctx?.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
      }, 300);
    } else {
      console.error('Video element not found');
    }
  });

  // let animationFrameId: number | null = null;
  // instance.addEventListener('play', (event: any) => {
  //   if (this.video) {
  //     console.log('canvas.width', this.canvas.width, this.canvas.height);

  //     const self = this;
  //     let lastFrameTime = 0;
  //     const targetFPS = 10; 
  //     const frameInterval = 1000 / targetFPS;

  //     function captureFrame(timestamp: number) {
  //       if (timestamp - lastFrameTime >= frameInterval) {
  //         lastFrameTime = timestamp;
  //         self.ctx?.drawImage(self.video, 0, 0, self.canvas.width, self.canvas.height);
  //       }
  //       animationFrameId = requestAnimationFrame(captureFrame);
  //     }

  //     animationFrameId = requestAnimationFrame(captureFrame);
  //   }
  // });

  // instance.addEventListener('pause', (event: any) => {
  //   console.log('epaused vent', event);
  //   if (animationFrameId !== null) {
  //     cancelAnimationFrame(animationFrameId);
  //     animationFrameId = null; 
  //   }
  // });

  // instance.addEventListener('ended', (event: any) => {
  //   console.log('ended vent', event);
  //   if (animationFrameId !== null) {
  //     cancelAnimationFrame(animationFrameId);
  //     animationFrameId = null;
  //   }
  // });

  instance.addEventListener('provider-change', (event: any) => {
    console.log('provider-change', event);
    const provider = event.detail;
    // We can configure provider's here.
    if (isHLSProvider(provider)) {
      // provider.config = {};
      provider.library = HLS;
    }
  });
}

} }