Introduction
IBM Worklight is a mobile application platform that enables the development of cross-platform hybrid applications, offering mechanisms to navigate between the web view and the native view, and providing a development and run time environment that moves hybrid apps much closer to the write-once-run-anywhere goal.
Problem Statement
The HTML5 video content would not play in Android, when the content was displayed through the hybrid app’s WebView object.
Objective
To solve the HTML5 video play limitations in Worklight hybrid application.
Solution
The hybrid app’s WebView HTML5 video play problems on Android. So we can use the Android native video play functionality when the application is built to run on Android.
One benefit of developing with Worklight is that it provides a simple mechanism to incorporate native pages into hybrid apps. Worklight’s hybrid coding functionality enables an app to navigate between web and native pages, and to share data between these pages. By making use of this feature, our hybrid app had the ability to switch to a native page that made use of Android’s Java API set to play video, and then when video play was completed, would switch back to the JavaScript code that was common to both iOS and Android.
Android native java code to play video
We have both Android native java code and JavaScript code. The JavaScript code uses Worklight’s capabilities to invoke the Android Java code to play the video.
To implement the Java video functionality, created a new StreamingVideoActivity.java class under the Android specific project structure location. The Worklight project structure (separating device specific optimization files into separate folders) simplified the addition of the Android native code required by our solution
public class StreamingVideoActivity extends Activity {
/** Called when the activity is first created. */
@Override
publicvoid onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
VideoView videoView =new VideoView(this);
videoView.setVideoPath(“android.resource://”+getPackageName()+“/”+R.raw.sample);
MediaController ctlr =new MediaController(this);
ctlr.setMediaPlayer(videoView);
videoView.setMediaController(ctlr);
setContentView(videoView);
videoView.requestFocus();
videoView.start();
}
}
after creating the activity, we need to add in to the AndroidManifest.xml.
<activityandroid:name=“.StreamingVideoActivity”/>
Alternate code for playing video using the native video player in Android (without using the videoview class)
Intent intent =new Intent(android.content.Intent.ACTION_VIEW);
Uri data = Uri.parse(“path of the video file”);
intent.setDataAndType(data,“video/mp4”);
startActivity(intent);
the above code will play the video using the default android player.
Invoking the Android code from the web application
With the Android work complete, all that remained was to create a JavaScript function that uses the Worklight WL.NativePage.show API function to switch from the web-based Activity to the new native Android Activity. The JavaScript file GDCIndia.js implementing this functionality was placed in the Android specific project structure location.
The code snippet from GDCIndia.js shows the implementation of the openNativePage function that invokes the Worklight WL.NativePage.show function to run the StreamingVideoActivity Activity.
Finally, we needed to conditionally call openNativePage when the hybrid was running on an Android device, and this is where the Worklight Studio development environment was again helpful. Rather than detecting the device type and adding if-then-else JavaScript logic, the Worklight project structure handles this automatically. In our application video, play is carried out in the GDCIndia.js file. By creating two versions of the file as shown in Figure, one stored in the common folder that initiates HTML5 video play and a second stored in the android folder that invokes the Worklight openNativePage function to initiate Android native video play, the Worklight Studio automatically handled the inclusion of the file version appropriate to the run time environment.
Resources & Reference
IBM developerWorks Mobile zone
IBM WebSphere Developer Technical Journal
Android Video Streaming (VideoView) Tutorial
