Android Playing YouTube Video without third-party Apps

Have you tried to play a YouTube video in your App without any third-party application including YouTube App? Forget about everything and this is working perfectly. Follow these easy steps;

First we need RTSP protocol URL. You can easily find RTSP link using following URL;

http://gdata.youtube.com/feeds/mobile/videos/<your_video_id>

Once you paste this on a new tab of your webbrowser; it will print something similar to following;

<?xml version='1.0' encoding='UTF-8'?><media:group>
<media:category label='Film &amp; Animation' scheme='http://gdata.youtube.com/schemas/2007/categories.cat'>Film
</media:category><media:content 
url='rtsp://r3---sn-a5m7zu76.c.youtube.com/CiILENy73wIaGQnup-1SztVOYBMYDSANFEgGUgZ2aWRlb3MM/0/0/0/video.3gp' type='video/3gpp' medium='video' isDefault='true' expression='full' duration='597' yt:format='1'/>
<media:content url='rtsp://r3---sn-a5m7zu76.c.youtube.com/CiILENy73wIaGQnup-1SztVOYBMYESARFEgGUgZ2aWRlb3MM/0/0/0/video.3gp' type='video/3gpp' medium='video' expression='full' duration='597' yt:format='6'/>
<media:description type='plain'>Big Buck Bunny tells the story of a giant rabbit with a heart bigger than himself. 
When one sunny day three rodents rudely harass him, something snaps... 
and the rabbit ain't no bunny anymore! In the typical cartoon tradition he prepares the nasty rodents a comical revenge...

Note that highlighted link. It is your RSTP protocol link to your video. Then we need to create a seperate activity called `VideoActivity.java`.

VideoActivity.java

public class VideoActivity extends ActionBarActivity {

@Override
protected void onCreate(Bundle savedInstanceState) {
 super.onCreate(savedInstanceState);
 setContentView(R.layout.activity_video);
 
 Bundle extras = getIntent().getExtras();
 if (extras != null) {
  String vURL = extras.getString("EXTRA_VIDEO_URL");
  VideoView videoView = (VideoView) findViewById(R.id.videoView1);
  videoView.setVideoPath(vURL);
  MediaController mediaController = new MediaController(this);
  mediaController.setAnchorView(videoView);
  videoView.setMediaController(mediaController);
  videoView.start();
 }
}
}

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>

***Don't forget to add `VideoActivity` into AndroidManifest.xml. It should be between <application> tags.

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

Now you can call this activity as follows;

//define extra parameter
String vURL="rtsp://r3---sn-a5m7zu76.c.youtube.com/CiILENy73wIaGQnup-1SztVOYBMYESARFEgGUgZ2aWRlb3MM/0/0/0/video.3gp";
//start activity passing extras
Intent intent = new Intent(this,VideoActivity.class);
intent.putExtra("EXTRA_VIDEO_URL", vURL);
startActivity(intent);

Read More»

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>

Read More»