8. Focus on App Content: Video

At the moment, Adobe Flash is still the dominant platform for delivering video on the World Wide Web. But you are likely familiar with the famous Steve Jobs public letter about Flash from spring 2010 that drew a clear line in the sand between iOS devices and Flash.¹ So until Flash is supported in iOS, you need to use other alternatives for playing video.

Fortunately, the approach to video in iOS apps is similar to the approach to audio: There are HTML5 and NimbleKit library item options. Let’s take a look and see how video works in each case.

Delivering video with HTML5 on iPad

Playing a video file with HTML5 is about as easy as playing an audio file, but here’s the caveat: At least with the NimbleKit Objective-C framework, the HTML5 option is only fully functional on the iPad and not on Apple’s pocket-sized iPhone or iPod touch.

The limitation on iPhone and iPod touch is this: The embedded HTML5 video player can be displayed in a screen view, but when you touch the play control a native iOS video player interface is displayed. Essentially, it’s the same phenomenon that happens in the YouTube app that comes with these devices.

On the iPad, the HTML5 video player actually plays the video embedded, right where it is. To use the HTML5 option, just implement its new video element and have an MPEG-4 (.m4v) video file available. Here’s the format for the HTML markup:

<video src="name.m4v" width="x" height="y"
poster="name.jpg" controls></video>

Let’s explore these options in detail:

• The src attribute identifies the video file to be played (and don’t forget to Add to Project to copy the file to your Xcode project’s HTML directory, otherwise your app will not locate the video file!).

• As with the object tag it’s replacing, it’s a good habit to continue specifying the width and height attributes of your video. This keeps the black play area, or stage, the same size and aspect ratio as your video.

• The poster attribute allows you to specify an image file to use as the poster frame or placeholder for the stage prior to playing. Either a JPG or PNG can be used.

• Finally, you need to add the controls attribute to display standard controls. Without this attribute, the user can’t play the video.

Designing a sample video application

Armed with this knowledge, let’s design a sample app to demonstrate the video tag in action on the iPad. As it happens, I have a short video clip of one of my daughters practicing the piano that I can share. (Download it, along with the other related items, at iosapps.tumblr.com.) I’ll make this example an app that teaches people about the piano. The introductory screen will feature a title bar, the sample video clip, and the first three paragraphs of text content about the piano from Wikipedia:²

And I have not forgotten that the point of this exercise is to work with video, so Figure 8.1 shows a sample clip, clip.m4v, as viewed in QuickTime Player.

8.1 Clip.m4v in QuickTime Player on the Mac desktop.

Let’s start this exercise by adding the text content and video to the main.html file in a new NimbleKit-based Xcode project for the iPad. As with the previous exercise, remember to add the video file asset to the project’s HTML folder first.

The piano content looks like this as HTML, with the NKNavigationController added to the head to create a title bar and the video tag added to pull in the video.

Testing this in Simulator looks like the screen shown in Figure 8.2.

8.2 A “rough draft” of an iPad app screen with embedded video.

There are still several opportunities to improve the presentation of this embedded video. First, let’s add a poster image to replace the black background behind the video control overlay. Figure 8.3 shows the photo.jpg file to be added to the project’s HTML folder.

8.3 The photo.jpg (320 × 240 pixels).

Highlighted in the following code is a modification whereby the video element finds the poster image and displays it:

Note also that iOS automatically overlays a white Play button on top of the poster image (Figure 8.4). Thanks, iOS!

8.4 Our styled HTML5 video app on the iPad.

I’m sure you’d like to style this content a bit more (I know I would)—and what about making the presentation more portrait and landscape friendly? Fortunately, both can be done with CSS! So let’s create a new file, video.css, and link to it from main.html:

Now you can style the video element. My suggestion is to try these properties as noted in the following code:

What is happening here? By displaying as block and having auto left and right margins, the video is centered horizontally—even when the screen is rotated. So file this technique under “iPad design tips” and notice that it borrows from techniques used to center things in flexible-width and liquid layout web pages.

The other notable styling element here is the CSS3 box-shadow property (with proprietary –webkit- prefix). Combined with the border, margin, and padding properties, the result is a nice frame for the video. It’s HTML5 and CSS3 working together—and you haven’t even gotten to the chapter that focuses on these magical specifications! (Consider this just a preview.)

Next, use the following rules to add a margin to the entire screen and style the h1—yes, I’m actually using Zapfino:

With the new styling in place, the results are much more presentable and attractive (Figure 8.4).

And the layout adjusts to keep everything centered when rotated to landscape (Figure 8.5)!

8.5 A landscape view of the HTML5 video app on the iPad.

So that’s how it’s done on the iPad with HTML5’s video element. And remember that it also works on the iPhone and iPod touch. Well, sort of. On those devices, it triggers a native iOS player, so it doesn’t play the video embedded in the screen.

Delivering video with NKVideoPlayer

This next method of incorporating video uses NimbleKit’s NKVideoPlayer library item. It differs from the HTML5 video element in that it doesn’t have an embedded play mode. Instead, playing a video with NKVideoPlayer calls up a native video player overlay, and this behavior is consistent across all three iOS devices.

To see how this works, use the same assets from the previous example but change it up a bit at the point where you create a new Xcode project. This time, select iPhone/iPad as shown in Figure 8.6 to create what is called a universal app—that is, one app that will run natively in full-screen mode on the iPad as well as on the iPhone and iPod touch.

8.6 Creating a universal app that will run full screen on iPad, iPhone, and iPod touch.

Aside from making this choice when you start the new project, there’s nothing else to do differently until you test the app in Simulator.

After Xcode opens the new project, you can begin editing main.html right away by adding the following JavaScript to the head of the page:

The NKNavigationController library item and NKIsPageSupportsAutoOrientation function should look familiar from previous exercises, but I’ve highlighted the portion that is new. These two lines create a new instance of NKVideoPlayer called videoPlayer, and instruct it to open the same video file that we used in the previous exercise, clip.m4v.

Now you need to design a mechanism for telling NKVideoPlayer to play clip.m4v and call up the iOS video player overlay mechanism. The technique you will use is a CSS-styled button similar to the example in Chapter 6. Here is some HTML that can be added to the body of the main.html file:

And to style the list item to appear as a native-looking button with rounded corners and text shadow, here is the CSS:

To maintain the spirit of our previous example, you can use the same title and image as in the poster image for the HTML5 player; just insert this before the button code:

<h1>The Piano</h1>
<img src="photo.png" width="100%" />

And let’s maintain the same basic look, too, by styling the h1 with Zapfino again. (I mean, how often can you use Zapfino and get away with it? We may be pushing the limit with this book’s examples!) Here are the CSS properties to add to the video.css file for styling the h1 element:

Here is the complete main.html file, with linked stylesheet:

Testing this in Simulator, the app will look like the example in Figure 8.7.

8.7 The NKVideoPlayer app example on the iPhone.

When you click the Play video button, the video overlay appears with a native iOS controller. (Figure 8.8)

8.8 The NKVideoPlayer in action, showing the native video player overlay.

Do you recall that I said this universal app example will run full screen on the iPad? If you’ve been testing in Simulator using the iPhone setting, take the app for a spin with it set to iPad. Just go to Xcode’s Overview menu and change Active Executable to iPad Simulator as shown in Figure 8.9.

8.9 Testing a universal app on the iPad requires telling Xcode to do so via the Overview menu’s Active Executable setting.

Now when you Build and Run, the version that you get on the iPad (Figure 8.10) no longer plays in the small iPhone window like iPhone apps do. It sizes up (though does not scale) to the iPad’s screen size of 768 × 1024 pixels.

8.10 The NKVideoPlayer app example on the iPad.

And note that when you click the Play video button, the same video player comes up and the video plays full screen, both in portrait orientation. (Figure 8.11) and landscape orientation (Figure 8.12).

8.11 The NKVideoPlayer in action on the iPad, showing the native video player overlay and video sized to full screen (width).

8.12 The same sample app running on the iPad after the device orientation is rotated to landscape.

And that is how you design an iOS app screen using NKVideoPlayer!

Summary

In this chapter you learned how to

• Embed MPEG-4 (.m4v) video files into iPad app screens using the new HTML5 video tag (while learning that the videos will work, but behave differently, on iPhones and iPod touches).

• Use NimbleKit’s NKVideoPlayer library item to provide a video player experience that is just like the YouTube app, with a video player overlay instead of embedded video.

• Make a universal app that plays full screen on iPhones, iPod touches, and iPads—from the same app binary, and thus also from the same iTunes App Store download/purchase.

• Style universal and iPad app layouts to accommodate landscape orientation.

Now that I’ve introduced you to some methods of incorporating text, image, audio, and video content into iOS apps, the next chapter focuses more closely on some additional ways of using HTML5 and CSS3 in your iOS app designs.