The iPad can be a perfect device to watch interactive video. There are 5 secrets to successfully creating interactive videos for viewing on this device. We’ve summarized them below and provided an example video here that you can play on your iPad to see them in action.

  1. Make larger interaction targets. A video that plays on an iPad isn’t a lot like a video that plays on a laptop or desktop. Especially if you are going to have interaction.People aren’t clicking on things, instead they are tapping on things. Make sure your touch targets (like CTAs, quiz answer selections, or chapter menus), are large enough to easily tap.Apple recommends touch targets be a minimum of 44×44 pixels. That’s a minimum. You really want touch targets to fit under an index finger with a bit of extra room on either side to spare. According to the MIT Touch Lab, that’s about 57 pixels. If your viewers are using their thumbs, that’s about 72 pixels.Smashing Magazine’s article on touch targets is helpful here for more context. But the simple take home is this; Make your interaction targets big! Your viewers will thank you.
  2. Make longer videos. On the iPad people settle in for the experience. They spend more time watching the video because mobile devices are not designed for multi-tasking – and in fact actively discourage it. Embrace that and you realize you have more time to teach what you want to teach, communicate your values and brand, and tell more in-depth stories.So, don’t be afraid to use longer video. On iPad, people expect it.
  3. Give them the power to explore. The iPad is a device people want to engage with. Let them explore and discover things inside the video with ease.They will expect your video to work like their favorite app or mobile-optimized web site. That means having the power to access more information about a topic with the tap of a finger, or quickly seeing what information is hidden inside the video. What can they learn? What can they do? Show them up front through easy ways to explore the video.If you don’t give them easy ways to explore, they’ll do it anyway by tapping on the control bar to try to find something that interests them and that leads to frustration. Don’t frustrate. Rather, delight with options that let the viewer control their experience with ease.
  4. How the video is streamed matters. HTTP Live Streaming was invented to provide smooth streaming to mobile devices – use it. Many video hosting services that work well for viewing on a laptop or desktop don’t do so well on mobile. They use progressive download technology which was built to do one thing well – play a video.Remember, viewers want choice, they want to explore. They’re going to be jumping around the video a lot. And to do that, HTTP Live Streaming is simply your best option.
  5. App or Web? Well, it depends.On the iPad, you can embed your videos in an app or on a web page. Don’t be a true believer in either technology. Understand the differences between the two.Drawbacks of Apps:
    Apps are more expensive to produce. Apps are specialized. Most organizations have staff with web development skills but app development is a rare and expensive skill set.Apps require you to maintain two separate code bases if you are supporting Apple and Android.Apps add an extra friction step of a download.

    Apps are harder to update fast. You can’t quickly update content and styles as easy as you can on the web.

    Benefits of Apps:
    With apps, you have the most level of control and flexibility to create interactive experiences. You can simply make an app do more, more fluidly and elegantly than a web page. The interactive video experience will be largely the same within an app as it is on a web page, but the experience surrounding it will be much more fluid and responsive as an app.

    If you think viewers will be on phones as well as the iPad, an app will make a lot of sense. Here’s why. When a viewer clicks “play” on a video on their phone, it launches that video in the native video player app (QuickTime on iPhones, for example). If that video is in an app however, you can control which player is launched when “play” is clicked, and that player can include your HTML5 interactive overlays.

Bonus Tip: Do Full Screen The Right Way

You can not rely on the native full screen capability of your video player. Just like clicking play on your phone launches the native video player app, so does clicking full screen on almost every single video player (including the commercial hosting service you have).

This is bad, as you lose all the interactions you’ve created and you even lose important annotations like closed captions.

To ensure your full screen buttons maintains your interactions, make sure your player’s fulls creen buttons leverages HTML5s Fullscreen API. The example video does just that.