Displaying a video on the iPad using MonoTouch

I had trouble finding a good tutorial about showing a video on the iPad in a MonoTouch application.  After digging through lots of semi-helpful posts online, I finally figured out how to do it.  This blog post is intended to help fill that gap in the MonoTouch examples available online.

When the application runs and displays a video showing a fractal, it looks something like this:

Here’s how you can implement this application. First open MonoDevelop and create a new “iPad Window-based Application” project. Then add a new “iPad View with Controller” item to the project named VideoViewController.  Once the files have been added to the project, open VideoViewController.xib.cs and add these fields to the class.

Next we will override the controller’s ViewDidLoad method, and put in a line of code that calls a PlayVideo method which will be added soon.

The video file name references a video file that you must add to your project.  Be sure to set the video’s Build Action to ‘Content’ so that it gets packaged into the .app file created by the compilation process.

Now let’s write that PlayVideo method we saw earlier:

That code sets up the video player, which is a standard control in the CocoaTouch UI toolkit.  MonoTouch wraps it up nicely into a managed wrapper class that is fairly straightforward to use.  Note that when setting the View’s Frame (which explains where it exists on the screen and how big it is) I swap the width and height of the parent view. This is because I only want the video to display in “landscape orientation.” That means the video will only be upright when the user holds the iPad horizontally (i.e. the circular button on the device is to the right or left of the screen). We will see how to support that behavior later.

Next let’s write the clean up code.

That code unregisters for the event notifications we subscribed to in the PlayVideo method, and throws away objects that are no longer needed.

The next method, also in the VideoViewController class, ensures that the video will only be shown in landscape orientation.

Lastly we have the AppDelegate class, which creates a VideoViewController and displays it in the window.

The first line of the FinishedLaunching method turns on system notifications of orientation changes.  In other words, this allows our UI to do an animated rotation when the user rotates the iPad.

You can download the VideoViewController code here, then remove the .DOC file extension and open it as a .TXT file: VideoViewController source code (REMOVE .DOC EXTENSION)

About Josh Smith

Josh Smith is a musician at heart, and a software developer by obsession. He lives in Arizona, plays classical music on the piano, and enjoys a variety of tasty beverages. He has a wonderful wife and thinks that, in general, life is good.
This entry was posted in MonoTouch. Bookmark the permalink.

4 Responses to Displaying a video on the iPad using MonoTouch

  1. Do you know if the video player can be composed within your user interface? Things like transforms, opacity, etc? Or is it just a canned player?

    • Josh Smith says:

      I’m not sure, Jer. I know that you can embed the video player as part of a larger UI (i.e. it doesn’t have to occupy the entire client area). But in terms of opacity and effects like that, I don’t know yet.

  2. Well, Josh. You did it. I’m a follower! :) I’m also a WPF4/SL4 expert that is expanding my horizons into Xcode.

  3. Forgot to introduce myself: I am a WPF developer. My work is featured on every HP computer worldwide. I work for Razorfish within their coveted Emerging Experiences group, and I will be learning CocoaTouch and Objective C over the next few months. We’ll see how this goes!

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s