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. 

Implementing Crosswalk’s Chromium webview plugin in an Android app

Why consider using Crosswalk? Android devices have different implementations of the webview, in which our PhoneGap and Cordova apps appear. Vendors have made their own tweaks of the webview, causing our code to render inconsistently. So our CSS and scripts will play differently across devices or not at all.

For instance, the HTML5 <video> tag won’t work across all Android browsers:

<video id="video_1" 
 controls preload="auto" width="320" height="240">
 <source src="video/myvideo-h264.mp4" type="video/mp4">
I'm sorry; your device browser doesn't support HTML5 video in MP4 with H.264.
</video>

But it will work in the Chromium webview provided by Crosswalk. By adding the Chromium webview to our app, we will have a unified Android playing field for our app.