Videogular2 上的 VgDash 实现问题（Angular2 上的 DASH Media）错误 MediaPlayer 未初始化

Question

我正在开发一个新项目，我想在其中实现 Videogular2 播放器。视频文件是 DASH (.mpd) 文件。所以根据文档，我正在尝试实现 VgDASH 模块，但我有一个问题运行这一切。我是初学者，我会寻求帮助。

这是使用破折号模块的官方示例：https://github.com/videogular/videogular2-showroom/tree/master/src/app/streaming-player

基于它，我写了我的申请。当我运行代码时，我在 Chrome 浏览器的控制台中收到以下错误：

PlayerComponent.html:61 错误类型错误:

 this.dash.getDebug(...).setLogToBrowserConsole is not a function
    at VgDASH.push../node_modules/videogular2/compiled/src/streaming/vg-dash/vg-dash.js.VgDASH.createPlayer (vg-dash.js:63)
    at VgDASH.push../node_modules/videogular2/compiled/src/streaming/vg-dash/vg-dash.js.VgDASH.ngOnChanges (vg-dash.js:37)
    at checkAndUpdateDirectiveInline (core.js:31906)
    at checkAndUpdateNodeInline (core.js:44367)
    at checkAndUpdateNode (core.js:44306)
    at debugCheckAndUpdateNode (core.js:45328)
    at debugCheckDirectivesFn (core.js:45271)
    at Object.eval [as updateDirectives] (PlayerComponent.html:61)
    at Object.debugUpdateDirectives [as updateDirectives] (core.js:45259)
    at checkAndUpdateView (core.js:44271)

和

core.js:6014 错误 MediaPlayer 未初始化！

这是我的组件（使用 Visual Studio 代码在代码中没有错误下划线）：

player.component.html

  <vg-player (onPlayerReady)="onPlayerReady($event)">
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>

    <vg-controls>
        <vg-play-pause></vg-play-pause>

        <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-time-display vgProperty="left" vgFormat="mm:ss"></vg-time-display>

        <vg-quality-selector *ngIf="bitrates"
                             (onBitrateChange)="setBitrate($event)"
                             [bitrates]="bitrates">
        </vg-quality-selector>

        <vg-mute></vg-mute>
        <vg-volume></vg-volume>

        <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video #media 
            #vgDash="vgDash"
           [vgMedia]="media"
           [vgDash]="currentStream.source"
           id="singleVideo"
           crossorigin>
    </video>
</vg-player>

<label>
    Media Url: <input type="text" [(ngModel)]="currentStream.source">
</label>

player.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import {BitrateOption, VgAPI} from 'videogular2/compiled/core';
import { TimerObservable } from 'rxjs/observable/TimerObservable';
import { Subscription } from 'rxjs';
import { IDRMLicenseServer } from 'videogular2/compiled/streaming';
import { VgDASH } from 'videogular2/compiled/src/streaming/vg-dash/vg-dash';

export interface IMediaStream {
  type: 'vod' | 'dash';
  source: string;
  label: string;
  token?: string;
  licenseServers?: IDRMLicenseServer;
}

@Component({
  selector: 'app-player',
  templateUrl: './player.component.html',
  styleUrls: ['./player.component.scss']
})
export class PlayerComponent implements OnInit {
  @ViewChild(VgDASH, {static: false}) vgDash: VgDASH;

  currentStream: IMediaStream;
  api: VgAPI;

  bitrates: BitrateOption[];

  streams: IMediaStream[] = [
    {
      type: 'dash',
      label: 'DASH: Media Stream test',
      source: 'http://livesim.dashif.org/livesim/testpic_2s/Manifest.mpd'
    }
  ];

  constructor() { }

  onPlayerReady(api: VgAPI){
    this.api = api;
  }

  ngOnInit() {
    this.currentStream = this.streams[0];
  }

  setBitrate(option: BitrateOption) {
    switch (this.currentStream.type) {
        case 'dash':
            this.vgDash.setBitrate(option);
            break;
    }
  }


  onClickStream(stream: IMediaStream) {
    this.api.pause();
    this.bitrates = null;

    let timer: Subscription = TimerObservable.create(0, 10).subscribe(
        () => {
            this.currentStream = stream;
            timer.unsubscribe();
        }
    );
  }
}

有人可以建议我在哪里可能犯错或在组件中发送一些正确的 vgDash 实现。（在顶部，我在 github 上发布了一个 link 到我的项目，如果它有帮助的话）

来自 videogular2 的基本示例，其中播放器播放 mp4 文件 对我有效 当我将它粘贴到 player.component.html:

<vg-player>
    <vg-overlay-play></vg-overlay-play>
    <vg-buffering></vg-buffering>

    <vg-scrub-bar [vgSlider]="true">
      <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-time-display vgProperty="current" vgFormat="mm:ss"></vg-time-display>
      <vg-scrub-bar style="pointer-events: none;"></vg-scrub-bar>
      <vg-time-display vgProperty="total" vgFormat="mm:ss"></vg-time-display>
      <vg-mute></vg-mute>
      <vg-volume></vg-volume>
      <vg-fullscreen></vg-fullscreen>
    </vg-controls>

    <video [vgMedia]="media" #media id="singleVideo" preload="auto" crossorigin>
        <source src="http://static.videogular.com/assets/videos/videogular.mp4" type="video/mp4">
    </video>
</vg-player>

但我关心的是组件中的 DASH 支持，而不是 html。

Answer 1

最新的 dashjs 包缺少该特定功能。

降级到旧版本：

npm install dashjs@2.9.3 --save

花了太多时间试图解决这个问题，我遇到了完全相同的问题。

Videogular2 上的 VgDash 实现问题（Angular2 上的 DASH Media）错误 MediaPlayer 未初始化

VgDash on Videogular2 problem with implementation (DASH Media on Angular2) ERROR MediaPlayer not initialized

angular

media

hyphen

mpd

videogular2