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".
activity_video.xml
STEP 5: Modify your DroidGap class and include following functions;
STEP 6: Change your HTML file as follows;
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>© 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>