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 https://github.com/moust/cordova-plugin-videoplayer > 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:
4. Install the plugin to your cordova Android project:
cordova plugin add com.moust.cordova.videoplayer
6. Include Cordova deviceready script in the <head> (see below).