title: How to use MediaElement in Angular
body: <p>I am trying to render a YouTube Video in the <code>&lt;video&gt;</code> tag.</p>
  
  <p>I run <code>npm install mediaelement</code></p>
  
  <p><strong>MediaComponent.html</strong>:</p>
  
  <pre class="lang-html prettyprint-override"><code>&lt;video width="640" height="360" id="mediaPlayer" #mediaPlayer preload="none"&gt;
      &lt;source type="video/youtube" src="http://www.youtube.com/watch?v=nOEw9iiopwI" /&gt;
  &lt;/video&gt;
  </code></pre>
  
  <p><strong>MediaComponent.ts</strong></p>
  
  <pre class="lang-js prettyprint-override"><code>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);
    }
  }
  
  </code></pre>
  
  <p>The console is clear. But nothing happens on the page. I think somethings wrong with import statement or calling the Constructor</p>
  
  <p><strong>How can I use <a href="http://www.mediaelementjs.com/" rel="nofollow noreferrer">MediaElementJs</a> with Angular?</strong></p>
  
  <p>Note: It's so interesting there is ReactJs documentation on <a href="https://github.com/mediaelement/mediaelement/blob/master/docs/usage.md#react" rel="nofollow noreferrer">the official page</a> but for Angular, nothing.</p>