Simulate fullscreen video playback

ionic-v1
1

Hi All,
is there any way to manipulate the DOM in that way to display specific DOM element in a full screen (I mean to cover entire device viewport like it is when using <ion-pane>) ?

I’m using ion-content to display collection of elements (videos) using ng-repeat directive:

<ion-content>
   <div ng-repeat="video in videoList | orderBy:'-id'">
      <div class="videoWrapper">
         <video-player watch-me="video" player-id="mplay{{ video.id }}"></video-player>
      </div>
   </div>
</ion-content>

When scrolling down the view I’m looking for a current video in a viewport and starting playback on it and video start playing nicelly. What I would like to achieve is to simulate full screen video playback but I want to keep playing the video in my custom player (I don’t want to jump in in to the IOS native video player beacuse I would like to use my custom player controlls)

What I’m trying to do right now is to grab entire video DOM container when my custom player controll (fullscreen) is clicked and display it in a layer which cover evarything else in a view (I would like to display the video in a simillar way like I can do it in <ion-pane> directive but I don’t wan’t to reload the view, I wan’t to stay in the same view and just change the way how the specific video is displayed)

The issue is that i really don’t know how to hide (or cover) the <ion-nav-bar>, how to disable scrolling in view etc.

So the general question is: Is there a way to grab DOM element which is displayed in a <ion-content> and display it in <ion-pane> style (no ion-nav-bar, no scrolling etc) without reloding entire view?

I will be appreciated for any help or suggestions

1 Like