Posts tagged #iphone demo

Play a YouTube Video URL from your iPhone App on iOS 7

Brewing coffee with Chemex and freshly roasted beans

Brewing coffee with Chemex and freshly roasted beans

Update 4/28/14: Pavel suggested checking out .

I'm working on an update for my app . In the process of updating it for iOS 7.0, I wanted to display a video to show a demo on how to use the app. I thought that I could take advantage of the to play/pause the movie within my app, but it doesn't work with YouTube links (i.e. Coffee brewing with Chemex ).

YouTube doesn't give direct links to the movie files, instead it's a proxy webpage. You need to use the official HTML YouTube player to play a YouTube video on a mobile device. It's also against the terms of service to play the movie file directly. The work around is to use a UIWebView and HTML code to display the video. I don't like this approach because it feels unresponsive and requires a lot of code. You can see example code on StackOverflow, but you might have to massage it to get it working. It does keep the user inside the app, but I feel that the experience is worse than opening up the video in Safari or the YouTube app.

The easiest way to play a video from YouTube (or any other website) is to write a single line of code. If you copy/paste the YouTube video link into an NSString literal, you can create the URL and open it.

[[UIApplication sharedApplication] openURL:[NSURL URLWithString:@"http://www.youtube.com/watch?v=Jeh40KFFS5Y"]];

The Bigger Picture - App Tutorials

In , I'm designing a paging view controller (PagingViewController) that uses the UICollectionView and Auto Layout to display image and text content. Along the bottom I have a button to play a video tutorial and the Next button. When the user reaches the end of the tutorial, the next button becomes a Done button, and the tutorial screen can be removed from the screen.

Tutorial screens for Artwork Evolution with video playback

Tutorial screens for Artwork Evolution with video playback

I display the tutorial screen when the app is first opened. When you launch a new version of the app, you can update the tutorial content and video link to feature the new content or functionality. 

Posted on March 3, 2014 and filed under Programming .

Show Finger Touches with Reflector or iPhone Demos with TouchPose

Touchpose-iPhone-Screen.png

If you've used Reflector on Mac to create screen recordings or demo videos of your iPhone apps, you're going to want to use this code. I use a lot of gestures and touch input in . To make it easy to see what the user is doing during a video or presentation in my development versions I now use Todd Reed's Touchposé to display the fingers. You can access my fork of Touchposé on github

Note: You can only show touches for code that you have access to. There isn't an option to do this in public iPhone or iPad apps.

Warning: Don't submit the Touchposé code to the App Store, keep it only in your development builds. I'll show you how to prevent accidentally submissions with a pre-processor variable. 

Read my blogpost on setting up TouchPose. https://iPhoneDev.tv You can demo your iPhone or iPad app's using TouchPose. You'll need to have access to the source code to make it work without jail-breaking. Don't submit the code to the App Store.","engine":"wysiwyg","html":"

Read my blogpost on setting up TouchPose. https://iPhoneDev.tv You can demo your iPhone or iPad app's using TouchPose. You'll need to have access to the source code to make it work without jail-breaking. Don't submit the code to the App Store.

"},"html":"","url":"http://www.youtube.com/watch?v=rhQCxdVEHgw","width":640,"height":480,"providerName":"YouTube","thumbnailUrl":"http://i1.ytimg.com/vi/rhQCxdVEHgw/hqdefault.jpg","resolvedBy":"youtube"}" data-block-type="32" id="block-0150f7091ad5d69f1d3f">

1. In your prefix header file (i.e. .pch file under Supporting Files in Xcode). Add code for a preprocessor variable called "APP_STORE_RELEASE". You'll want to change this value when you need to make an official release.

// Note: Set to 1 when ready to submit app to App Store
// Set to 0 for development and testing
#define APP_STORE_RELEASE 0

 

Find your .pch file in your Supporting Files folder on the left panel.

Find your .pch file in your Supporting Files folder on the left panel.

2. Drag QTouchposeApplication.h and QTouchposeApplication.m to your project navigator to add it to your project and target.

a. Make sure you copy the files into your destination group's folder.

b. Make sure you add it to any targets that will need to show touch input.

"> Check the boxes for

Check the boxes for "copy items into destination group's folder" and add to your app target.

3. Open main.m under Supporting Files and add code to create the QTouchposeApplication when not building the app for the App Store. (i.e. we don't want to submit private APIs , or Apple will reject the app)

a. At the top add a header #include statement, but only include when not building for the App Store

#if !(APP_STORE_RELEASE)
#import "QTouchposeApplication.h"
#endif

b. In the main method brackets, update the code to be as follows.

#if !(APP_STORE_RELEASE)
return UIApplicationMain(argc, argv, NSStringFromClass([QTouchposeApplication class]), NSStringFromClass([AppDelegate class]));

#else
return UIApplicationMain(argc, argv, nil, NSStringFromClass([AppDelegate class]));
#endif
Update the code in main.m to only use the special QTouchposeApplication when not building for App Store

Update the code in main.m to only use the special QTouchposeApplication when not building for App Store

4. Open your AppDelegate and start Touchpose. You can play with the settings so that it's always visible, or only when your mirroring the display for Reflector or projectors.

a. Import the header file for QTouchposeApplication.h

#if !(APP_STORE_RELEASE)
#import "QTouchposeApplication.h"
#endif

b. In application:didFinishLaunchingWithOptions: update the code to show the touches. Typically I keep alwaysShowTouches to NO, unless I'm testing something or recording a video with ScreenFlow.

#if !(APP_STORE_RELEASE)
// For demo purposes, show the touches even when not mirroring to an external display.
QTouchposeApplication *touchposeApplication = (QTouchposeApplication *)application;
touchposeApplication.alwaysShowTouches = YES;
#endif

5. Enjoy!

Checkout my iPhone Game Showing Touches

We're working on a new game for iPhone called Bomb Dodge. We did a limited release that you can download called  Checkout the video and let me know if the touches help you understand how the game plays.

Wrap-up

  1. Download my sample project or grab the source code from github.
  2. Subscribe to my iPhone newsletter.
  3. Grab Reflector if you don't have it, it's essential for recording demo videos of iPhone or iPad apps.
  4. Checkout my beginner iPhone development course on Skillshare.
Posted on January 24, 2014 and filed under Programming, App Marketing .