在 Angular 应用程序中包含 hls.js 库

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

您只需要在您的component.ts文件中添加以下行：

declare var Hls;

在import 子句之后和@Component 装饰器之前。

Answer 2

当我使用declare var Hls 时，控制台显示变量未定义。我花了一些时间，示例用法最初来自shaka player implementation with 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';
    }
  }
}

如有错误请指正。