STICKMAN VENTURES

Custom Software Development and Engineering

Developing an immersive video player for Android

Ready to learn more? We're helping host Google Developer Group BayFest DevFest, October 22, 28 and November 4th. Get your ticket today!

One thing that I have yet to see is a video player for android that appropriately mimics the YouTube video player. For that very reason I set off to create my own implementation of a video player like YouTubes and surprisingly it works very well. Well, with the use of a few nasty hacks of course!

ImmersiveVideoPlayer is an android library that contains an activity and a few objects that allow you to stream videos in a video player much like YouTube™s. How it works is that it displays video information passed to the activity in the form of a video object through an intent. The activity can then display information such as a video title or a description while in portrait mode, but when in landscape mode the video player will enter an immersive mode of sorts.

Basically in simple terms is the immersive mode hides all distractions such as the status bar and the soft keys to allow a more immersive viewing experience. In addition when the video is tapped the soft keys and status bar will re-appear shortly before fading away. I think this is starting to sound familiar.

But as mentioned earlier the library uses a few nasty hacks to get it working properly. One of the first issues I ran into is that when you tap the screen, the soft keys will magically re-appear but sends no click callback to any of the views you tapped. This became an issue because you would have to tap twice to bring up the video controller which would have been a nuisance.

However I found out that a check can be done on the current UI visibility of the app allowing me to tell if the soft keys are present or not. I then created a thread that runs in the background checking for a change in UI visibility and if the soft keys re-appear, the media controller and status bar will show appropriately. Very hacky indeed.

Although some might frown upon this, it is the only way I could have seen it be done and better yet, it works almost flawlessly. By almost I mean there a a couple issues.

The first issue is that on pre android 4.3 devices the media controller dips below the video player fragment (which is apparently a feature), and can probably be fixed with a custom media controller. The second issue is that the soft keys cannot be hid until their show animation is complete. As a result if the user spam clicks the video, the video controller and soft keys cannot hide until the user clicks after the animation. However I don™t see this as a big issue as a user will most likely not be playing with the media controller as a toy.

Now here is the part you have all been waiting for¦ Implementation!

Implementation

First you will want to create a new android project with a main activty (assuming you are using eclipse). File > New > Android Project

Now you need to import the ImmersiveVideoPlayer project into the eclipse workspace. File > Import > Android > Existing Android Code Into Workspace

Next you want to make some changes to your manifest. First lets add a permission.

<uses-permission android:name="android.permission.INTERNET"></uses-permission>

Add the video player activity. <activity android:name="com.stickmanventures.android.example.immersive_videoplayer.ui.activities.VideoPlayerActivity" android:label="@string/app_name" android:configChanges="orientation|screenSize" > </activity>

Note we have added orientation|screenSize to the config changes so that android does not reload the activity on orientation change.

Now we are ready to implement it to the new project, first lets edit the default activites layout. <RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android" xmlns:tools="http://schemas.android.com/tools" android:layout_width="match_parent" android:layout_height="match_parent" android:paddingBottom="@dimen/activity_vertical_margin" android:paddingLeft="@dimen/activity_horizontal_margin" android:paddingRight="@dimen/activity_horizontal_margin" android:paddingTop="@dimen/activity_vertical_margin" tools:context=".MainActivity" > <Button android:id="@+id/button" android:layout_width="match_parent" android:layout_height="wrap_content" android:text="Load Video Player" /> </RelativeLayout>

Now open your activity class and reference the button with:

Button button = (Button) findViewById(R.id.button);

Then add an OnClickListener like so: button.setOnClickListener(new OnClickListener() { @Override public void onClick(View v) { } });

Before we continue add this above our button reference.

final Activity activity = this;

The reason we are doing this is that this in the onClick callback is not that same as this outside the onClick callback and we need the current applications context to be passed to an intent.

Now we can add can start the video player activity with a few extras.

Intent intent = null; try { intent = new Intent(activity, Class.forName("com.stickmanventures.android.example.immersive_videoplayer.ui.activities.VideoPlayerActivity") ); } catch (ClassNotFoundException e) { e.printStackTrace(); } finally { // Create a video object to be passed to the activity Video video = new Video("http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"); video.setTitle("Big Buck Bunny"); video.setAuthor("the Blender Institute"); video.setDescription("A short computer animated film by the Blender Institute, part of the Blender Foundation. Like the foundation's previous film Elephants Dream, the film was made using Blender, a free software application for animation made by the same foundation. It was released as an Open Source film under Creative Commons License Attribution 3.0."); // Launch the activity with some extras intent.putExtra(ImmersiveVideoplayer.EXTRA_LAYOUT, "1"); intent.putExtra(Video.class.getName(), video); startActivity(intent); }

So first we create a new intent to load the video player activity which we will start later after doing a couple of steps.

intent = new Intent(activity, Class.forName("com.stickmanventures.android.example.immersive_videoplayer.ui.activities.VideoPlayerActivity"));

Next we create a video object with information like the url, a description, author, and title.

// Create a video object to be passed to the activity Video video = new Video("http://clips.vorwaerts-gmbh.de/VfE_html5.mp4"); video.setTitle("Big Buck Bunny");

Then we pass the video object and what type of layout we want as extras (0 is the simple video player, and 1 is the advanced video player).

// Launch the activity with some extras intent.putExtra(ImmersiveVideoplayer.EXTRA_LAYOUT, "1"); intent.putExtra(Video.class.getName(), video);

After that is said and done, it is safe to call the activity.

startActivity(intent);

After that it should work, but if it doesn’t make sure to clean both the library project and the current project incase there are any conflicting IDs and you should get something that looks like this.

It is as simple as that, and since this is a library you can make changes to the source code or layout of the video player to your pleasure.

The repo is now available on Github: immersive-videoplayer-android

Ready to start?

Get in touch. We're ready to listen.