How to play video on both devices iPad and TV with airplay in Ionic 4

Question

I'm developing a iPad specific hybrid application using Ionic 4. Currently I'm using Ionic4 Streaming Media to play video in the application. Airplay is working fine but there is one of the requirement from the client is to show stream video on both screens. Right now what is happening when you airplay the video it display the video only on TV not on the iPad. I'm using mirror functionality on the iPad to airplay on TV. Everything mirror from iPad to TV except the video. Following is my code to play video. Please let me know if you know any option to mirror/play the video on both screens.

<div class="video" (click)="playVideo()">
   <ion-icon class="play-icon" name="play-circle"></ion-icon>
</div>

playVideo() {
  const options: StreamingVideoOptions = {
  successCallback: () => { console.log('Video played') },
  errorCallback: (e) => { console.log('Error streaming') },
  orientation: 'landscape',
  shouldAutoClose: true,
  controls: false
};
this.streamingMedia.playVideo(File.applicationDirectory + 'www/assets/videos/test.mp4', options);
}

I'm not sure how can I achieve that requirement. If this player doesn't support that functionality please recommend me some other player if you know. Thanks

Answer 1

I used the following code to achieve this requirement. The key part is to disable the airplay by adding x-webkit-airplay="deny".

<video id="video1" style="width:320px;height:240px;" controls
        x-webkit-airplay="deny">
  <source src="/assets/videos/test.mp4#t=0.1" type="video/mp4">            
</video>