angular - 如何在 Angular 中使用 MediaElement

Question

我正在尝试在 <video> 中渲染 YouTube 视频标签。

我跑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);
  }
}

控制台很清晰。但页面上没有任何反应。我认为 import 语句或调用构造函数有问题

如何使用 MediaElementJs与 Angular ？

注意:the official page 上有 ReactJs 文档，这很有趣。但对于 Angular 来说，什么都没有。

Answer 1

您应该在 main.ts 中添加此行。

import 'mediaelement';

然后您应该将其与以下声明一起使用。

declare var MediaElementPlayer;