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.
Resource:
https://github.com/moust/cordova-plugin-videoplayer
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:
<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:
"file:///android_asset/www/videos/myvideo-h264.mp4",
6. Include Cordova deviceready script in the <head> (see below).
Final index.html:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com '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() {
}
</script>
</head>
<body>
<div style="margin: 20px;">
<button onclick="playMP4()">PLAY MP4 VIDEO</button>
</div>
<script>
function playMP4() {
VideoPlayer.play(
"file:///android_asset/www/videos/myvideo-h264.mp4",
{
volume: 1.0,
scalingMode: VideoPlayer.SCALING_MODE.SCALE_TO_FIT_WITH_CROPPING
},
function () {
console.log("video completed");
},
function (err) {
console.log(err);
}
);
}
</script>
<script type="text/javascript" src="js/videoplayer.js"></script>
</body>
</html>
iPhone Dev Log 
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.
Then ask the plugin author about your issue. Don’t tell him “it’s not working,” because that’s not enough for anyone to help you.
hi
do you know how to embed .srt subtitle to this video ?
Thanks
No. You’ll want to ask the creator of the code how that might be done.
can the plugin play remote videos eg https://path/to/video.mp4
I do not know.