{SOLVED} Mediaplayer controls in Mobile App

Hi,

How do I display full Mediaplayer controls for Audio and Video in Mobile Apps?

Thanks.

Hello edunt,

Sorry, but I can't understand very well what you mean. Please, can you explain a little more?

Hello edunt,

Sorry, but I can't understand very well what you mean. Please, can you explain a little more?

I mean, I want to see "Stop, Seek bar, Volume" on Mediaplayer.
Thanks

Hello edunt,

Are you sure the MediaPlayer control "Controls" variable is "True"?

The VideoPlayer sample appear working as expected in my Android device:

Hi David,

Yes, it is true.

What about for Audio?

Thanks.

Hello edunt,

Also the SimpleAudio sample works well here. What's your experience?

Hi David,

My experience with simpleaudio is just displaying paly/pause button abd timer and enlarge icon on Samsung 4.5" screen.
Thanks.

Hello,

Are you using the app's scale option?

On the other hand, maybe it's not a bad good idea to hide the default controls and use our own ones.

Hi David,

Yes, Autoscale app size is selected by default.

This is what I get, 38+ minutes audio, see what sart minutes is.

Hello,

If you try the application in a browser you get a similar result?

Can you try also with other media player and the same media file?

Hi David,

No, I did not get same display as yours. I used Bluestack App Player to run the *.apk.
Thanks.

Hello,

Sorry, I don't understand what do you mean when say "I used Bluestack App Player to run the *.apk". On the other hand, I presume than Videogular (the plugin behind the MediaPlayer Control) take the information from the media file, or maybe such information is provided by the browser, taken first from the media file. Honestly, I don't know what to say. Do you test the application in various browsers? All of them offer the same media file duration? If so, maybe the file information is not completely right or something like that.

Hi,

I mean I installed sampleaudio apk in Bluestack Android App Player to test the application before running it on real device.

Have a look at this

Hello edunt,

Where are your media files localed? Remember they must be in a remote server if our applications is running on Cordova, so, maybe this also occur with the "Bluestack Android App Player".

Hi,

The media files are on my webserver.

http://xxxxxxx.com/media/1.mp4
http://xxxxxxx.com/media/2.3gp
http://xxxxxxx.com/media/3.ogg
http://xxxxxxx.com/media/4.webm

Thanks

Hello,

If you try the application in a browser you get a similar result? (I ask this question above too). And what happend if you try with other media files?

Hi,

Running SimpleAudio on browser I got different display as yours. Mine is no progress bar display.
Thanks

Hello,

I think this is due to the progress bar and media playercolors. You can try with this CSS rule in your app's Inline CSS option, for example:

Looking into this I found certain problem with the MediaPlayer in larger screens. I am working trying to solve it.

Hello edunt,

My apologies. Certainly the above CSS code can be used to customize the progress bar of a MediaPlayer control, however, in fact you can't view the progressbar appropiately due to an error, introduced in the latest Videogular update. The problem is not exactly related itself with Videogular, but with their CSS integration into App Builder. So please, update your copy of App Builder edunt and tell me if the MediaPlayer progress bar works for you now.

Hi David,

Yes, the player progress bar is now working.
Thanks.

Hello,

I think this is due to the progress bar and media playercolors. You can try with this CSS rule in your app's Inline CSS option, for example:

/* Customize the MediaPlayer control progressbar */</p> <p>vg-scrub-bar [role="slider"]<br>{ background-color: red !important;<br>}

Looking into this I found certain problem with the MediaPlayer in larger screens. I am working trying to solve it.

Hi David,

Where can I find the inline css option you are referring to?
Thanks.

Hello,

We can use the object inspector once select the application:

Also we can use the app's options dialog under the Style tab.

Hi,

Alright, if add the code. I get this:

But if I click the progress bar I got this

What could be the issue?

Thanks.

Hello,

I can't reproduce the problem. The CSS rule works for me.