Implementing the Moust Videoplayer Cordova plugin for Android

The Moust videoplayer plugin allows the app to play videos within the app in fullscreen mode.

Unfortunately, the video does not play according to its own proportional size, nor is it confined to the proportion of the div it’s in. It breaks out to fit in the device window. We are given two different options for scaling the video. The following were the results when viewing a 320x200px video in my Nexus 7:

SCALE_TO_FIT_WITH_CROPPING As noted, this doesn’t show the whole video. In landscape, the top/bottom are cropped. In portrait, the left/right sides are cropped. No pinch-to-reduce functionality included.

SCALE_TO_FIT (default) This will stretch/squeeze the video to fit the device’s screen, whether horizontal or vertical orientation.

It makes the most sense to use this player when you want to play back the videos in the same mobile device you shot them with; then they would play back in perfect proportion. If you want your videos to play back reliably across Android devices in their own proportion, I recommend trying Crosswalk. 


These steps assume you’ve already created a Cordova project and added the Android platform files.

Steps to create

1. Include videos in project at www/videos. I don’t know what the preferred formats are, but mp4 and mpg work.

2. Download videoplayer.js to www/js folder from > www. (I copied the contents of that file into a txt document then saved it to the folder.)

3. On your project’s index.html page, make a link to the external js file just above </body> like:

<script type="text/javascript" src="js/videoplayer.js"></script>

4. Install the plugin to your cordova Android project:

cordova plugin add com.moust.cordova.videoplayer

5. Make button links to videos and call the JavaScript (see below). Note that you’ll reference the video like this:


6. Include Cordova deviceready script in the <head> (see below).

Final index.html:

<!DOCTYPE html>
 <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *">
 <meta name="format-detection" content="telephone=no">
 <meta name="msapplication-tap-highlight" content="no">
 <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
 <title>Moust Videoplayer plugin</title>
 <script type="text/javascript" src="cordova.js"></script>
 <script type="text/javascript" charset="utf-8">
 // Wait for device API libraries to load
 document.addEventListener("deviceready", onDeviceReady, false);
 // device APIs are available
 function onDeviceReady() {
 <div style="margin: 20px;">
 <button onclick="playMP4()">PLAY MP4 VIDEO</button>
 function playMP4() {
 volume: 1.0, 
 function () {
 console.log("video completed");
 function (err) {
 <script type="text/javascript" src="js/videoplayer.js"></script>

6 thoughts on “Implementing the Moust Videoplayer Cordova plugin for Android

  1. It is not working. I followed the steps correctly. 1. add this in config.xml

    2. included videoplayer.js
    3. stores video in root folder (where index.html resides)
    4. included button event.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s