Video media event handling
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");
}
}
}
});