PDA

View Full Version : Video in Sencha Touch



senseo
4 Sep 2011, 5:02 AM
Hi guys,
I cant make the "kitchesink" video example work. Here is my code, what is missing ? thanks.


aes.views.VideoList = Ext.extend(Ext.Panel, {
layout: {
type: 'vbox',
pack: 'center'
},


initComponent: function () {


var toolbarBase = {
xtype: 'toolbar',
title: this.title
};


if (this.prevCard !== undefined) {
toolbarBase.items = {
ui: 'back',
text: this.prevCard.title,
scope: this,
handler: function () {
this.ownerCt.setActiveItem(this.prevCard, { type: 'slide', reverse: true });
}
}
}


items: [{
xtype: 'video',
url: 'http://www.youtube.com/watch?v=6DXdsnpGs3A',
loop: true,
width: 500,
height: 400,
posterUrl: './resources/img/Screenshot.png'
}]


aes.views.VideoList.superclass.initComponent.call(this);


}
});


Ext.reg('videolist', aes.views.VideoList);

senseo
5 Sep 2011, 4:42 AM
Ok guys, sorry to bother you .. but I have really no clue which component to use to display a Video, using the xtype:video within a Panel. please help :)


aes.views.VideoList = Ext.extend(Ext.Panel, {
scroll: 'vertical',
styleHtmlContent: true,
initComponent: function () {
var toolbarBase = {
xtype: 'toolbar',
title: this.title
};
if (this.prevCard !== undefined) {
toolbarBase.items = {
ui: 'back',
text: this.prevCard.title,
scope: this,
handler: function () {
this.ownerCt.setActiveItem(this.prevCard, { type: 'slide', reverse: true });
}
}
}
this.dockedItems = toolbarBase;
items: [{
xtype: 'video',
url: '../video/space.mp4',
loop: true,
width: 500,
height: 200,
posterUrl: '../video/Screenshot.png'
}]
aes.views.VideoList.superclass.initComponent.call(this);
}
});
Ext.reg('videolist', aes.views.VideoList);

gkatz
7 Sep 2011, 7:01 AM
what device/browser are you using to display the video?
I suggest you search the forum, there are many many posts regarding sencha video component

allisterf
8 Sep 2011, 12:59 AM
My guess is you're trying to make video work in Android?

Sadly, the sencha touch video xtype only seems to work on the iPhone. Even the kitchen sink example doesn't work on an android device.

Seems a bit of a big boo-boo really!

Perhaps I'm wrong and someone knows differently??

Allister

senseo
8 Sep 2011, 3:59 AM
Actually I'm testing it with an Iphone :( ... and the xtype video doesnt seem to work... maybe I do someting wrong somewhere.

In my understanding, the best workaround at the moment is the Iframe html tag,.. which is working. It's not so bad to be honest, it's working well,.. but the user experience is now more "web"...

allisterf
8 Sep 2011, 4:04 AM
This is the code that works for me in an iPhone

var watch = new Ext.Panel({
title: 'Watch',
cls: 'watchPanel',
iconCls: 'tv',
scroll: 'vertical',
html: '',
dockedItems: [{
dock: 'top',
xtype: 'toolbar',
ui: 'omred',
title: 'Watch'
}],
layout: { type: 'vbox', pack: 'center' },

items: [{
xtype: 'video',
url: 'videos/myvideo.mp4',
width: '320',
height: '70',
posterUrl: 'images/myposter.png'
},
{
xtype: 'video',
url: 'videos/myvideo2.mp4',
width: '320',
height: '70',
posterUrl: 'images/myposter2.png'
}]
});

gkatz
8 Sep 2011, 4:05 AM
using iphone i have no problems with the video xtype.
didnt get a chance to look at your code though

allisterf
8 Sep 2011, 4:14 AM
gkatz - have you found a good way of showing video on an android device?

allister

senseo
8 Sep 2011, 4:15 AM
ok guys thanks !

gkatz
8 Sep 2011, 6:11 AM
Sure did
I hid the video menu item from my android users :)

KPChow
14 Sep 2011, 11:59 PM
Hi guys,

The reason why the video works on the iPhone but not the Android is due to the codec. Therefore, you have to create two version of the video. For the iPhone, I used Any Video Converter, and for the Android I used this website - http://video.online-convert.com/convert-video-for-android.

Now, to get this to work, I had to create a variable and an if statement to detect the device:



var videoFormat


if(Ext.is.iPhone){
videoFormat = "iphone"
} else if(Ext.is.Android){
videoFormat = "android"
}


Then I add that variable into the url of the video:



url: 'video/'+videoFormat+'/name-of-file'+videoFormat+'.mp4',


Hope that helps. :)