如何在 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 语句或调用构造函数有问题

如何在 Angular 中使用 MediaElementJs？

注意：the official page 上有 ReactJs 文档非常有趣，但对于 Angular，什么都没有。

Answer 1

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

import 'mediaelement';

然后你应该将它与以下声明一起使用。

declare var MediaElementPlayer;