cordova-mediaplayer-core

Updates

20131106:

Stripped down the CSS to just the bare essentials
Add some parameters to the setupCordovaMediaPlayer() method: width, height, default title/description/thumbnail
Added a new file for css customization example/abstraction: (cordova-mediaplayer-style.css)[https://github.com/cemerson/cordova-mediaplayer-core/blob/master/cordova-mediaplayer-theme.css]
Added few more 'callback' type methods (see "Optional Methods" section below)
Updated how video playback on device works - so the play/pause button should work better now after video is dismissed
...

201310014:

Moved the "core" cordova-mediaplayer functionality to a seperate repo here: cordova-mediaplayer-core
Setup this project to use the above as a submodule

Summary

This repo contains the core files needed to add iOS and Android compatible audio and video playback functionality to a Cordova/Phonegap app. This is by no means from perfect but after going through sheer hell getting this working for a project I decided to extract the base audio/video functionality for later use and figured I'd share w/anyone else who might need this kind of functionality and isn't interested in travelling through the 7 levels of hell to get it working.

Special thanks to Simon McDonald and Justin Obney. The Android video functionality is using Simon's VideoPlayer plugin (and Justin's Cordova 3.0 update to it).

Depending on various things I may clean things up so it resembles a pseudo Cordova Plugin - not in the traditional sense but in the sense that this can be "plugged" into a Cordova project and used as easily as a plugin with a couple javascript calls. Technically it's at that point now I suppose but it's not clean/abstract enough IMO yet.

Current Features:

Working examples of AUDIO and VIDEO playback in a Cordova app using local (file:\) and remote (http://) audio or video files
Works on iOS and Android!
Includes:
- Play/pause button
- Very basic countdown progress label for audio

Usage

To see these files in action in an actual app go check out my PhoneGap 3 Boilerplate project. But if all you need is the functionality for your app this repo is what you need.

To use "Cordova-MediaPlayer" in your Cordova app project:

Add following to your index.html

<link rel="stylesheet" type="text/css" href="js/cordova-mediaplayer/cordova-mediaplayer.css" />
(Optional) <link rel="stylesheet" type="text/css" href="js/cordova-mediaplayer/cordova-mediaplayer-theme.css" />

Add following to your index.html

<div id="cordova_media_player"></div>
<script type="text/javascript" src="js/cordova-mediaplayer/cordova-mediaplayer.js"></script>

Call this method on your body load (or similar) event:

setupCordovaMediaPlayer(playerWidth,playerHeight,defaultTitle, defaultText,defaultThumb);

Example:

setupCordovaMediaPlayer(320,240,'Cordova Media Player','Hello world.','images/player_background.png');

Then call the following methods as needed:

initMediaPlayerForAudio() or initMediaPlayerForVideo()

Examples:

initMediaPlayerForVideo("VIDEO: Remote Example (HTTP://)",
                        "http://www.mysite.com/video.mp4",
                        "http://www.mysite.com/video_thumb.jpg",
                        "The greatest online video ever.");

initMediaPlayerForVideo("VIDEO: Local Example (FILE:\\\\)",
                        "example-media/example_video.mp4",
                        "example-media/example_video.png",
                        "The greatest offline video ever.");

initMediaPlayerForAudio("AUDIO: Remote Example (HTTP://)",
                        "http://www.mysite.com/example.mp3",
                        "http://www.mysite.com/thumb.jpg",
                        "The greatest online audio ever.");

initMediaPlayerForAudio("AUDIO: : Local Example (FILE:\\\\)",
                        "example-media/example_audio.mp3",
                        "example-media/example_audio.jpg",
                        "The greatest offline audio ever.");

Confirm you have the related "common/js" repo loaded in your project as well

If you have problems or questions getting this to work you can see "Cordova-MediaPlayer" in action by cloning and trying out the full test project here: https://github.com/cemerson/Cordova-MediaPlayer

Optional Methods

If you create methods with any of the following names the cordova mediaplayer will call them at the corresponding moments.

mediaPlaybackHasBeenStopped()
mediaPlaybackHasStarted()
closeMediaPlayer()
prepUIElementsForMediaPlayback()
mediaPlaybackHasBeenPaused()

Notes

iPad/Tablet use still needs to tweaking - test/use this on 'phones' for demonstration purposes.
Only file formats tested so far are: MP4 (for video) and MP3 (for audio)
There is a method called fixLocalFilePathsForAndroid() in /js/common/mobile.js that adds "/android_asset/www/" to the front of local file paths so local audio and video file paths can simply assume the current folder is www. This may evolve or go away if/when Blackberry/Windows support is added.
Windows and Blackberry compatibility may be added later
config.xml needs this line for iOS: <preference name="AllowInlineMediaPlayback" value="true" />
Plugins currently setup in project:
For some reason the Network-Information plugin wonked out after setting this up on GitHub. I've noticed odd things with adding/removing Cordova plugins via command line so this isn't super shocking. In any case this project does require this plugin so I've added the necessary extra steps to the usage section above.

Disclaimers:

This is an unofficial, unsupported project! Please use if you find it helpful but I can't provide much support for it. I will hopefully get a chance to expand on it in the future though.
CSS not optimized/fancy (Android may layout imperfectly)
Only tested so far on Android 2.3 (best device I have on hand)

Background

Some of the topics or issues I processed before or during the making of this project:

windwang / cordova-mediaplayer-core Goto Github PK