Playing youtube videos in a custom player using AVFoundation - iphone

AVFoundation allows a developer to create a custom Video Player instead of using Apple's own fullscreen MPMoviePlayer.
In my project, I'm using this approach to achieve something close to what the YouTube iOS app does, which is to have a "canvas" view up on top where playback takes place, along with several controls and text labels at the bottom:
As you know, a YouTube URL "points" to HTML data, and it is meant to be used within a UIWebView. Tapping on the thumbnail inside this UIWebView brings up a fullscreen Player, which is what I'm trying to avoid.
I would like to know if the YouTube API provides a URL pointing to the actual video (mp4 file), so that I may use it along AVFoundation.
I want to find a legal way to do this, so it should definetely comply to both Apple's and Google's terms of service.
Thanks,

The easiest way to achieve this is by adding an overlay UIView, which you can place over any part of the screen. And putting it on top of the UIWebView, and set it to not respond to user interactions. As you can change size and placement and making it transparent, you can effectively choose which user interactions you want and which you don't want. And you will not mess around with youTube ToS in any way.

http://www.youtube.com/get_video_info?video_id= with the video id appended contains the mp4 url, may require some regex work (found here: https://github.com/hellozimi/HCYoutubeParser/blob/master/YoutubeParser/Classes/HCYoutubeParser.m)

Related

Add multiple MPMoviePlayerController on UIScrollView?

I'm new at iOS development;
I add two MPMoviePlayerController on my scrollView for play audio file.
All is well but problem is any one media player such like
I am sure that my URL of file is proper. Then is issue here.
I don't know that Apple's iOS provide feature that we can add only one media player??
Please give me any suggestion.
It is very important for my application to add two MPMoviePlayerController so user can display TWO Media player.
I think you can add multiple MPMoviePlayerController objects, though only one can play a file at one time.
This is from Apple Documentation:
Note: Although you can create multiple MPMoviePlayerController objects
and present their views in your interface, only one movie player at a
time can play its movie.
Here is the link.
I know that you can play multiple videos in a single view by using the Apple AVFoundation framework (rather than MPMoviePlayerController). I imagine this is true of audio files as well.
Here is a similar SO question with tips about implementing AVFoundation.
I was having a similar issue with multiple MPMoviePlayerControllers in a UIScrollView, my solution being to add the media programatically to scrollViewDidEndDecelerating.
Not ideal because you then have to work around the fact the media isn't there until the scroll is finished but a nice bit of animation is working quite well in my case.

HTML 5 video within iPhone image frame

I'm somewhat hesitant to ask this question because it it is only borderline software development, but I've had zero luck finding what I need anywhere else.
I am building a landing page for an iPhone app and would like to have a video of the app in use that plays inside an image frame of an actual iPhone device (Apple does this on many of their marketing pages). I don't care about the video being played on anything pre-HTML 5, it can be as simple as an mp4.
Are there any tools out there that will easily generate this sort of functionality for me? Given how often I see this sort of thing, I'm surprised that I am having so much trouble finding something that just =gives it to me out of the box.
Alternatively, I am not opposed to coding something myself, so if that's the only option, a suitable answer to this question would be a pointer to some info on the best way to generically overlay an HTML 5 video on top of an image (the iPhone frame).
The reason you probably don't find anything is probably because it's so simple. Put a <video> tag inside a <div> tag, set background-image of the frame, add some padding so the video is centered within the frame, and voila.

Create interactive videos in iPad - An app for product demo

I would like to create videos that needs to run on an iPad native app. The app needs to show a demonstration of a product through iPad. It needs to be interactive as well. I know we can do these in Flash, since Flash is not supported in iPad what are my options?
I appreciate any guidelines or hints. Thank you in advance
The easiest way to create interactive videos for iOS is to use Apple's HTTP Live Streaming technology. You have to create a video, embed metadata, play it using MPMoviePlayerController or AVPlayerItem, and then display clickable areas in response to metadata notifications.
Metadata should contain coordinates for the element you are tracking, eg: a dress, and a identifier for the product. You overlay this info with a clickable subview that reveals more information about the product. There are several applications of this kind in iTunes, here is one.
Once you get a working product and weeks-time of videos, the most difficult part is to perform motion tracking with the less possible human interaction. One approach is to use Adobe After Effects, another is to code your own solution based on OpenCV.
Some ideas:
You could use an MPMoviePlayerController with no controls, on loop.
Here's a solution I thought of using interactive HTML popover's over the video:
You could have a data store (say an NSDictionary), with playback times as keys.
The values could then be a custom class, which includes all the necessary data for an interactive popover on the video.
Your custom class could look something like this
#interface InteractivePopover : NSObject
{
NSString *snippetTitle;
NSString *htmlData; // could include links etc.
CGPoint popoverDisplayPoint;
// other styling attributes etc.
}
Now, when a user taps the video, it pauses it at the next 'interactive' point (by looking for the next key after the current playback time), and displays (animates on) all the popups, which you set before to show off different parts of the product.
That class might be your data store, then you create another class to handling displaying, animating, controlling, sizing (etc) these interactive popovers. It would create a UIWebView for the HTML. It would also control direction, and indication of the source point for your popover.
This is clearly very expandable because you could put images, embedded content etc into the HTML for these interactive popovers.
Anyway, that's how I would do it.
Though flash will not run on ipad you can still create apps for it with flash cs5 .

HTML5 Video Pixel Tracking

I know that generally, it's no problem to overlay HTML (and even do advanced compositing operations) to HTML5 native video. I've seen cool tricks with keying out green screens in realtime, in the browser, for example.
What I haven't see yet, though, is something that tracks in-video content, perhaps at the pixel level, and modifies the composited overlay in accordance. Motion tracking, basically. A good example would be an augmented reality sort of app (though for simplicity's sake, let's say augmenting an overlay over on-demand video rather than live video).
Has anyone seen any projects like this, or even better, any frameworks for HTML5 video overlaying (other than transport controls)?
If we use the canvas tag to capture the instances of the video, we are able to get the pixel level information of the video. Then we can detect the motion tracking i think. May be the work of HTML5 will be upto grabing the pixel informaion, then its our work to detect the things we need..
And i didnt find any such frame works for HTML5 video tag, as there is no common video format supported by all browsers...
The canvas tag video mode is not supported by iOS.
Wirewax built an open API for that. Works quite well - even on Iphone.
http://www.wirewax.com/

How do you implement swipe-able image stacks like the Photo app using the iPhone SDK?

I would like to take a stack of images (or potentially an array of URLs to download images) and display them in full screen, one at a time, using user swipes to smoothly animate the next image in the stack, using the iPhone SDK. Apple's Photo.app seems to do this. Additionally, if the image has not been retrieved yet, I'd like to display the progress indicator.
Can you point me to example code and explain how this technique would be implemented?
You need to use UIScrollview's page control mechanism. Apple has plenty of sample code, including one called, strangely enough, Page Control:
http://developer.apple.com/iphone/library/samplecode/PageControl/index.html
If you want any behavior beyond that, you'll have to roll it yourself.