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.
Where the code works well on our Android devices under testing with Crosswalk’s webview, then it should work the same across all Android devices. We are effectively taking back control of the webview for ourselves.
If you are fed up with endless hacks to make your code work and look the same across Android devices, Crosswalk should be taken into consideration. It does have some drawbacks, however, and one is its hefty size. It may add around 20MB to your app. Also, your code will work depending on the Chromium browser version Crosswalk installs, so you may have to go up or down a stable version.
The reason I am considering it is that my next apps will include videos and I want them to reliably play across all Android devices. (They already work fine in the iOS devices.) The app will be around 150MB, so adding an extra 20MB is an acceptable tradeoff – it’s still under the 200MB app size limit. I want to be able to use the <video> tag, which Android does not reliably use at present. You might use the <video> tag with a video on a current project to test whether it works. Then do this project and see if there is a difference.
Resource:
https://github.com/crosswalk-project/cordova-plugin-crosswalk-webview
This article assumes you already have your environment set up for Cordova and Android. If not, follow this and this if on Windows, or follow this if on the Mac.
My Mac environment for this article:
OS X Yosemite 10.10.3
Mac Mini (Mid 2010)
cordova -v = 5.0.0
cordova-android platform v4.0.0
Plugins installed in project: crosswalk
Not using PhoneGap or PhoneGap Build
No frameworks used
Install android-22
Crosswalk requires android-22, so in the Terminal app, start up the Android SDK Manager via:
android
In the Android SDK Manager window, select Build-Tools 22.0.0 and Android 5.1.1 (API 22) packages, if they are not installed already. Then select each package and Accept the agreement for each. Due to the LONG download time on a Mac Mini, you may want to do this just before bedtime and let it run overnight.
Set up basic Cordova files
Crosswalk requires Cordova 5.0+, so upgrade if necessary:
npm update -g cordova
Make sure Cordova version is 5.0.0:
cordova -v
Create the basic project and enter the folder for it:
cordova create crosswalk
cd crosswalk
Add the Android platform files:
cordova platform add android
Add the Crosswalk plugin:
cordova plugin add cordova-plugin-crosswalk-webview --save
Read here to see what video/audio codecs Chromium supports: https://www.chromium.org/audio-video
If you have a program that outputs video, try for these settings:
Video codec: H.264 Baseline, Theora, Opus, VP8, VP9. Audio codec: AAC Main (not AAC-LC), MP3, Vorbis, Opus. Containers supported: MP4, WebM, Ogg, WAV.
Best combo seems to be: H.264 Baseline + AAC Main + MP4.
Or upload your file here to convert it online for free (unfortunately, you can’t choose options that cover all the recommendations above): http://video.online-convert.com/convert-video-for-android (I chose the MP4 conversion option).
To test, add your myvideo.mp4 video to a www/video folder.
Add to index.html after the <body> tag:
<video id="video_1" controls preload="auto" width="320" height="200"> <source src="video/myvideo-h264.mp4" type="video/mp4"> </video>
My fully edited index.html:
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; 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>Hello World</title> </head> <body> <div style="margin:20px;"> <h2>CONVERTED MP4 file</h2> <br> <video id="video_1" controls preload="auto" width="320" height="200"> <source src="video/myvideo-h264.mp4" type="video/mp4"> </video> </div> <script type="text/javascript" src="cordova.js"></script> </body> </html>
We don’t do anything special to invoke the webview.
Learn more about the <video> markup here for other options available to you:
http://www.html5rocks.com/en/tutorials/video/basics/
http://www.encoding.com/html5/
Testing
Create a debug apk file to test:
cordova build android
Crosswalk builds two binaries for Chromium support: /platforms/android/build/outputs/apk/android-x86-debug.apk
and:
/platforms/android/build/outputs/apk/android-armv7-debug.apk
The x86 version is for devices and emulators that use the x86 instruction set. So if you are testing with GenyMotion, it would use the x86 version. The armv7 is for devices and emulators that use the ARMv7 architecture. Most physical devices fall into the latter category. There are some exceptions, which is also why it is important to have both builds. Your Android device will use the ARMv7 build. When uploading to Google Play, we will upload both, because some devices will need the x86 version. (I have not yet tested how Google Play allows uploads of two apks for an app.)
Make sure your Android device is set up for testing with Chromium by making changes in your devices’ Developer Options under Settings. Read “Physical Device Setup, ADB Debugging” and “Screen” here: https://code.google.com/p/chromium/wiki/AndroidTestInstructions (In a nutshell: Check “USB debugging.” Un-check “Verify apps over USB.” Check “Stay Awake.”)
Install the apk file into your device and test thoroughly. (I dragged it to my Dropbox.com site, then synced it in my device via the Dropbox app.)
App specs:
I made the above changes to the index.html file.
My video was 1.8MB on disk (320 x 200 size, no audio, H.264 + AAC, 18 seconds). Video was edited on Corel VideoStudio Pro on my PC and output as Share > MPEG-4 > iPod H.264.
Final output debug apk size: 25.5 – 26.7MB.
Result upon loading in device: video shows a freezed frame from later in the video. Upon tapping, it starts to play in place from the beginning. Tapping the enlarge button in the lower right frame allows it to play full screen. Tap the video to show the controls and tap the reduce icon in the lower right frame to reduce the size to the default you specified.
It’s good to know that I can now use the <video> tag in my Android apps to play my in-app videos. So I will duplicate the iOS version, follow the step above, and take further steps to turn it into an Android version.
Thanks to Kerri Shotts for her invaluable help.
iPhone Dev Log 
Awesome writeup. :-) And glad I could help!
Pingback: Implementing the Moust Videoplayer Cordova plugin for Android | iPhone Dev Log
Pingback: Using Cordova CLI on Mac OS X Mavericks to build iOS apps (8/2015) | iPhone Dev Log
Is it possible to get an rtsp url working with phonegap ios? Thanks
If you can do it with HTML, CSS and JS, yes; though I don’t have that knowledge myself.