Skip to main content

IBM

IBM Worklight video play – using Android native functionality

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.

Android_VideoStreamingCode

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);

IBM / Red Hat - Unlock Potential App Modernization
Unlock Your Potential with Application Modernization

Application modernization is a growing area of focus for enterprises. If you’re considering this path to cloud adoption, this guide explores considerations for the best approach – cloud native or legacy migration – and more.

Get the Guide

           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.

Javascript_to_invokenative_class

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.

dualimplementaion

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

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Elavarasan Selvaraj

More from this Author

Follow Us