mediaPage.ts

import { NavController } from 'ionic-angular/index';
import { Component, ViewChild } from "@angular/core";


@Component({
  template:`
  <ion-header>
  <ion-navbar primary>
    <ion-title>
      Ionic 2
    </ion-title>
  </ion-navbar>
</ion-header>

<ion-content class="has-header">
  <div padding style="text-align: center;">
    <h1>Ionic Media Test</h1>
    <h2>
    this shows how to get the element on the page for the audio and video tag
in order to make sure only one media object is playing at a time
    </h2>
    <div>
      <button secondary (click)="toggleVideo()">Toggle Video</button>
      <button secondary (click)="toggleAudio()">Toggle Audio</button>      
    </div>

    <ion-item>
      <h2>HTML5 Video</h2>
      <video width="400" controls #theVideoElement >
        <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4">
      </video>
    </ion-item>
    <ion-item>
      <h2>HTML5 Audio</h2>
      <audio controls  #theAudioElement >
        <source src="http://webpages.charter.net/jenni35/squeakdr.wav" type="audio/wav">
      </audio>    
    </ion-item>
  </div>
</ion-content>`
})
export class HomePage {
  @ViewChild('theVideoElement') theVideoElement:ElementRef;
  @ViewChild('theAudioElement') theAudioElement:ElementRef;
  
  constructor(private nav: NavController) {

	}
	
	ngAfterViewChecked()    { 
	  // set event listener to stop the audio when started
		this.theVideoElement.nativeElement.onplaying = () => {
      this.theAudioElement.nativeElement.pause();
    };
    this.theAudioElement.nativeElement.onplaying = () =>{
     this.theVideoElement.nativeElement.pause();
    };
	}
	
	
	toggleVideo() {
    if ( this.theVideoElement.nativeElement.paused ) {
        this.theVideoElement.nativeElement.play();
    } else {
        this.theVideoElement.nativeElement.pause();
    }
	}	
	
	toggleAudio() {
    if ( this.theAudioElement.nativeElement.paused ) {
        this.theAudioElement.nativeElement.play();
    } else {
        this.theAudioElement.nativeElement.pause();
    }
	}


}