CODEWITHSUNDEEP
angulartypescriptmediaelement.js
Muhammed Ozdogan
Muhammed Ozdogan

Reputation: 5877

How to use MediaElement in Angular

I am trying to render a YouTube Video in the <video> tag.

I run 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);
  }
}

The console is clear. But nothing happens on the page. I think somethings wrong with import statement or calling the Constructor

How can I use MediaElementJs with Angular?

Note: It's so interesting there is ReactJs documentation on the official page but for Angular, nothing.

Upvotes: 2

Views: 1939

Answers (1)

Julian W.
Julian W.

Reputation: 1571

You should add this line in the main.ts.

import 'mediaelement';

And then you should use it with the following declaration.

declare var MediaElementPlayer;

Upvotes: 2

Related Questions