Как использовать MediaElement в Angular

Question

Я пытаюсь отобразить видео YouTube в теге <video>.

Я бегу npm install mediaelement

MediaComponent.html

<video width="640" height="360" id="mediaPlayer" #mediaPlayer preload="none">
    <source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" />
</video>

MediaComponent.ts

import * as MediaElementPlayer from 'mediaelement'; // How to import it?

@Component({
  selector: 'app-media',
  templateUrl: './media.component.html',
  styleUrls: ['./media.component.css']
})

export class MediaComponent implements OnInit, AfterViewInit, OnDestroy {

  //...
  @ViewChild('mediaPlayer') mediaPlayerElement: ElementRef;
  public mediaPlayer;


  ngAfterViewInit() {
    //..
    this.loadMediaPlayer();
  }

  loadMediaPlayer() {
    this.mediaPlayer = new  
            MediaElementPlayer(this.mediaPlayerElement.nativeElement);
  }
}

Консоль понятна. Но ничего не происходит на странице. Я думаю, что-то не так с оператором импорта или вызовом конструктора

Как мне использовать MediaElementJs с Angular?

Примечание. Интересно, что документация ReactJs есть на официальной странице , но для Angular ничего нет.

Answer 1

Вы должны добавить эту строку в main.ts.

import 'mediaelement';

И тогда вы должны использовать его со следующим объявлением.

declare var MediaElementPlayer;