I am using below view to play a video but in Iphone it is showing a black screen then after some seconds it is showing the black screen with play icon and then movind to iphone native video player to play the video. I want to skips the 2 blackscreen and want directly native player once I call below view. If it is not posible , I want to display a loading popup and hide it once it show native player but don't know how to hide that after staring it. What event I need to handle here.

once video is ended in the native video player it is firing ended event which I am hadnling but if I click on done button without completely play of video player, it is not firing stop event.Which event it will hire in this scenario so I can capture it.

Please help me in this.

HTML Code:
Ext.define('Por.view.Videop', {
extend: 'Ext.Panel',
xtype:'videopage',

config:{
    layout:'fit',
    fullscreen: true,
    items:[
     
{
   xtype : "titlebar",
   docked : "top",
   name : 'detailToolbar',
   
   items : [{
   xtype: 'button',
                ui : 'back',
          text: 'Back',
          align: 'left',
                action : 'back'

   }]
  },
         {
         xtype    : 'video',
            id: 'videoplay',
         loop: false,
         enableControls: false,    
         preload: true,
            autoPause: true,
            url:'resources/media/a.mp4',
listeners: {



stop: {
 element: 'media',
                    fn: function () {
                     alert("in stop");
             //this.parent.fireEvent("stopmask");
                
                    }


},




ended: {
                    element: 'media',
                    fn: function () {
              this.parent.fireEvent("videolistpage");
                
                    }
                } }
                       
         }
         
    ],
hide: {
 element: 'component',
                    fn: function () {
                     alert("in hide");
             //this.parent.fireEvent("stopmask");
                
                    }


}
}

});