Включить библиотеку hls.js в приложение Angular

Question

Я пытаюсь включить модуль Videogular2 в мое приложение Angular и получаю сообщение об ошибке с hls.js, Я следовал за Getting started руководство, но я получаю эту ошибку в консоли разработчика:

ERROR ReferenceError: Hls is not defined
    at VgHLS.webpackJsonp.../../../../videogular2/src/streaming/vg-hls/vg-hls.js.VgHLS.createPlayer (vg-hls.js:56)
    at VgHLS.webpackJsonp.../../../../videogular2/src/streaming/vg-hls/vg-hls.js.VgHLS.ngOnChanges (vg-hls.js:45)
    at checkAndUpdateDirectiveInline (core.es5.js:10840)
    at checkAndUpdateNodeInline (core.es5.js:12339)
    at checkAndUpdateNode (core.es5.js:12278)
    at debugCheckAndUpdateNode (core.es5.js:13139)
    at debugCheckDirectivesFn (core.es5.js:13080)
    at Object.eval [as updateDirectives] (WatchComponent.html:22)
    at Object.debugUpdateDirectives [as updateDirectives] (core.es5.js:13065)
    at checkAndUpdateView (core.es5.js:12245)

Я выполнил эту команду первым

yarn add videogular2 dashjs hls.js

Я добавил путь к сценариям в .angular-cli.json

"scripts": [
    "../node_modules/dashjs/dist/dash.all.min.js",
    "../node_modules/hls.js/dist/hls.min.js"
]

Импортирует необходимые модули в app.module.ts

imports: [
    BrowserModule,
    VgCoreModule,
    VgControlsModule,
    VgOverlayPlayModule,
    VgBufferingModule,
    VgStreamingModule
]

Добавлен HTML-файл (с использованием компонента), где movie является свойством компонента.

<vg-player>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>
    <vg-scrub-bar>
        <vg-scrub-bar-current-time></vg-scrub-bar-current-time>
        <vg-scrub-bar-buffering-time></vg-scrub-bar-buffering-time>
    </vg-scrub-bar>
    <vg-controls>
        <vg-play-pause></vg-play-pause>
        <vg-playback-button></vg-playback-button>
        <vg-scrub-bar></vg-scrub-bar>
        <vg-mute></vg-mute>
        <vg-volume></vg-volume>
        <vg-fullscreen></vg-fullscreen>
    </vg-controls>
    <video [vgDash]="movie?.asset" [vgHls]="movie?.asset"></video>
</vg-player>

Любая идея, где посмотреть, чтобы решить эту проблему?

Спасибо

РЕДАКТИРОВАТЬ

Я также использую jQuery а также OwlCarousel2 библиотека.

"scripts": [
    "../node_modules/jquery/dist/jquery.min.js",
    "../node_modules/owl.carousel/dist/owl.carousel.min.js",
    ...
]

Answer 1

Когда я использую declare var Hls, консоль показывает, что переменная не определена. Это занимает некоторое время, и пример использования изначально взят из реализации shaka player с Angular . Загрузите HLS.js и поместите "node_modules/hls.js/dist/hls.min.js.map"в Angular.jsonмассив скриптов.

Вот HTML-код:

      <div #videoContainer id="videoContainer">
    <h1>HLS JS Player</h1>
    <!-- declare the #videoPlayer as a used input -->
    <video #videoPlayer id="videoPlayer" width="352" height="198" controls autoplay playsinline></video>
</div>

Вот код компонента:

      import { AfterViewInit, Component, ElementRef, ViewChild } from '@angular/core';
import Hls from 'hls.js';

// your component
@Component({
  selector: 'app-video-player',
  templateUrl: './video-player.component.html',
  styleUrls: ['./video-player.component.scss']
})

// called after Angular has fully initialized a component's view.
export class VideoPlayerComponent implements AfterViewInit {
  // access the declared DOM element; expose all methods and properties
  @ViewChild('videoPlayer') videoElementRef!: ElementRef;
  
  // declare and inherit the HTML video methods and its properties
  videoElement!: HTMLVideoElement;

  constructor() { }

  ngAfterViewInit(): void {
    // the element could be either a wrapped DOM element or a nativeElement
    this.videoElement = this.videoElementRef?.nativeElement;

    if (Hls.isSupported()) {
      console.log("Video streaming supported by HLSjs")
      

      var hls = new Hls();
      hls.loadSource('https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8');
      hls.attachMedia(this.videoElement);
      hls.on(Hls.Events.MANIFEST_PARSED, () => {
        this.videoElement.play();
      });
    }

    else if (this.videoElement.canPlayType('application/vnd.apple.mpegurl')) {
      // alert("You're using an Apple product!");
      this.videoElement.src = 'https://bitdash-a.akamaihd.net/content/sintel/hls/playlist.m3u8';
    }
  }
}

Пожалуйста, поправьте меня, если что-то не так.

Answer 2

Вам нужно только добавить следующую строку в ваш файл component.ts:

declare var Hls;

после import пункты и до @Component декоратор.