PhoneGap playing local video natively

Does anyone know how to play an video on PhoneGap? I wish I could use PhoneGap APIs to play a video, but I couldn't. They don't provide any video API. Closer bet would be Media API which allows to play an audio. I tried several third party plugins, but never had the luck. I spent more than 4-5 hours trying plethora of plugins which finally led to the unsuccessful efforts. All plugins are compiled without giving any single error, but once you tried to play it on mobile, it says "sorry this video cannot be played".

This is the work around I did, hope anyone will find this helpful.

STEP 1: Drag and drop your video file into the `raw` folder under the `res` folder (If you don't have raw folder, create a new one).

add your video file here

STEP 2: Create a new class called `VideoActivity.java` and paste the code below. Change the highlighted package name as appropriate.

package example.android.test;
public class VideoActivity extends Activity {

@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_video);
 
 Bundle extras = getIntent().getExtras();
 if (extras != null) {
  String videoName = extras.getString("EXTRA_VIDEO_NAME");
  if (videoName.equals("hatseller")){
   VideoView videoView = (VideoView) findViewById(R.id.videoView1);
   String path = "android.resource://" + getPackageName() + "/" + R.raw.video;
   videoView.setVideoPath(path);
   MediaController mediaController = new MediaController(this);
   mediaController.setAnchorView(videoView);
   videoView.setMediaController(mediaController);
   videoView.setOnCompletionListener(new OnCompletionListener() {

    @Override
    public void onCompletion(MediaPlayer mp) {
     Intent intent = new Intent(VideoActivity.this,StoryTeller.class);
     intent.putExtra("FORWARD", "questions");
     startActivity(intent);
    }
    
    
   });
   videoView.start();
  }
 }
}
}

STEP 3: Create this layout `activity_video.xml` on res/layout folder.
activity_video.xml

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="fill_parent"
    android:layout_height="fill_parent" >

    <VideoView
        android:id="@+id/videoView1"
        android:layout_width="fill_parent"
        android:layout_height="fill_parent"
        android:layout_alignParentBottom="true"
        android:layout_alignParentLeft="true"
        android:layout_alignParentRight="true"
        android:layout_alignParentTop="true"
        android:layout_gravity="center_horizontal" />

</LinearLayout>

STEP 4: Insert VideoActivity into the AndroidManifest.xml. This should be defined inside the <application> tag. (Highlighted package name should be changed accordingly).

    <activity android:name="example.android.test.VideoActivity"
        android:label="Video"
        android:screenOrientation="landscape">
        </activity>

STEP 5: Modify your DroidGap class and include following functions;

@Override
public void onCreate(Bundle savedInstanceState)
{
    super.onCreate(savedInstanceState);
    super.init(); // Calling this is necessary to make this work
    appView.addJavascriptInterface(this, "MainActivity");
    super.loadUrl("file:///android_asset/www/index.html");

public void customVideoFunction() {
    //Log.e("Custom Function Called", "Custom Function Called");
    //define extra parameter
    String videoName="hatseller";
    //start activity passing extras
    Intent intent = new Intent(this,VideoActivity.class);
    intent.putExtra("EXTRA_VIDEO_NAME", videoName);
    startActivity(intent);
 }

this is my droidGap class

STEP 6: Change your HTML file as follows;

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="format-detection" content="telephone=no" />
        <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
        <link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.2.css" />
        <title>Hello World</title>
    </head>
    <body>
        <div data-role="page">

<div data-role="header">
<h1>Anatomy of a Page</h1>
<a href="index.html" data-icon="home" data-iconpos="notext" data-direction="reverse">Home</a>
<a href="index.html" data-icon="search" data-iconpos="notext" data-rel="dialog" data-transition="fade">Search</a>
</div><!-- /header -->
  
<div data-role="content">
Loading video...
</div><!-- /content -->

<div id="deviceready" style="display:none">
                <p class="event listening">Connecting to Device</p>
                <p class="event received">Device is Ready</p>
            </div>

<div data-role="footer">
<p>&copy; 2014 tiriboy</p>
</div>

  </div><!-- /page -->
  
        <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
     <script type="text/javascript" src="js/jquery.mobile-1.4.2.min.js"></script>
        <script type="text/javascript" src="cordova.js"></script>
        <script type="text/javascript">
            app.initialize();
            document.addEventListener("deviceready",onDeviceReady,false);

        // Cordova is ready
        //
        function onDeviceReady () {
        window.MainActivity.customVideoFunction();
        }
        </script>
    </body>
</html>

Tiriboy's Blog

PhoneGap playing local video natively

Rasika Perera

PhoneGap playing local video natively

Rasika Perera

RELATED POSTS