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装饰器之前。

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

1 个答案: