PDA

View Full Version : Usign the Video with Sencha and Phonegap : Bug on Android



JFFortierQc
20 Nov 2011, 8:00 PM
Hi
I face a problem when I compile for Andro´d only. On iOS it works. So here is the problem. When we compile and test it for Android 2.3 and 3.2, but I have the same problem. The video image display, but when I click, the video does not play. Just a black window.

Here is the code

Ext.regApplication
(
{
name: 'MahLeaApp',
launch: function()
{
this.launched = true;
this.mainLaunch();
},


mainLaunch: function()
{
var pnl = new Ext.Panel({
fullscreen: true,
items: [
{
xtype : 'video',
x : 600,
y : 300,
width : '100%',
height : '100%',
url : "http://brightcove.vo.llnwd.net/pd11/media/96980657001/96980657001_207397051001_Bird-Titmouse-iStock-000005422648HD1080.mp4",
posterUrl: 'http://animals.nationalgeographic.com/staticfiles/NGS/Shared/StaticFiles/animals/images/800/siberian-tigers-snow.jpg'
}
],
listeners: {
click: {
element: 'el', //bind to the underlying el property on the panel
fn: function(){ console.log('click el'); }
}
}
});
}
}
);

The video is an mp4 encode with H.264 encoding.

Any idea?

mitchellsimoens
21 Nov 2011, 9:50 AM
Android HTML5 video isn't the best. If it does work, it should launch the native video player.

phil.fuse
22 Nov 2011, 12:34 PM
JFFortierQc - i too am looking into video solutions.
Ideally i need a cross platform solution but i'm not really getting anywhere.

Brightcove themselves i don't think support HTML5 on android devices which leads me to think that we're banging our heads against the wall a little...

at the moment i'm trying to ascertain the differences when implementing a variety of methods on on both android and ios phones.

did you get any further with it?

phil.fuse
22 Nov 2011, 12:35 PM
when i say brightcove don't support html5 - i'm talking about their 'smart player'.

JFFortierQc
22 Nov 2011, 2:01 PM
Hi phil.fuse
There is some bad and good news. Well, I'll start with the bad ones. After a lot of tests and research, html5, once compiled, works perfectly to display video over iOS, but not on Andro´d. That's weird because in the browser it works, but not when compiled with Phonegap.

So you can use Flash for Andro´d instead and this way Brigthcove could works with the SmartPlayer that display HTML5 on iOS and Flash on Android. In our case, we don't want to use Flash with Brightcove because we do not have the control we would like. For example, it plays directly in the Flash Player, not fullscreen has HTML5 does in iPhone.

Now it's time for the good news. On iOS it works and display fullscren on iPhone. With iPad, it plays in the browser so you have to set the video size in the HTML. For Andro´d, we decided to use a native plugin. It is a basic plugin in the sense that it is use to display the video only using the native player. If you need more like streaming or other stuff, then this plugin is not the one you need.

Here is the link : https://github.com/phonegap/phonegap-plugins/tree/master/Android/VideoPlayer
We are testing it actually. I'll be able to give you more feed back after.

Or, you can create your own plugin
http://wiki.phonegap.com/w/page/36753494/How%20to%20Create%20a%20PhoneGap%20Plugin%20for%20Android

Hope that can help.
If you find something interesting, let me know!

phil.fuse
24 Nov 2011, 2:16 PM
yeah this is a minefield...
looks like i'm basically following your path but a week or so behind :-)
...
I'd ditched any embed and switched to using brightcode api to pull the actual video file url and then force the browser to push to the OS. Which i guess looking at your code you are doing something similar (or already have the URL's). This plugin seems todo the trick for gapped app - simple i guess but good work...

agree - iOS seemingly handling our brightcove (or should i say mp4) fine when wrapped...

youtube a little the otherway around...
android seems to handle this fine launching the native player and returning in a webapp (exactly like the wrapped above) but getting the OS to take over on iOS seems a lot more painful as you can't slip 'back' into your app easily (if AT ALL from what i'm reading elsewhere)...
currently our solution is iframe embeds in a new Ext.Panel which works on both platforms but...
it's just horrible...

digeridoo
19 Mar 2012, 6:55 AM
Sorry to jump in here, I've not used Phonegap yet but I want to be able to load a video file locally from the device without having to stream off the internet. Android bugs aside, is this possible and relatively easy to do with iOS? All the examples I have seen don't seem to setup anything special except for placing the phonegap.js file at the head...

Thanks