Gesture Controlling a Video with MPMoviePlayerController

I’ve created an app where you can swipe left and right to progress through a video. The aim of this app was to make it seem as little like a video as I could.

Setting Up Your MPMoviePlayerController

The first thing I had to do was to set up my Video player. I used pretty much exactly the same setup as in my last post.

One crucial difference however was that this time I had No Controls:

This kinda “hid” the fact that it was a video because the immediate association with a video is the play button and a duration meter. I’ve also made the video entirely full screen and stopped it from playing on load.

Gesturing

The gesture recogniser which I added was for UIPanGestureRecognizer. This gives the ability to map gestures to points in translation (how far the finger moved) but also in velocity (how quickly the finger moved). We can use this velocity later on to calculate the play rate. First of all I had to add the UIPanGestureRecognizer:

The below code basically creates a brand new Gesture Recognizer called panGesture and creates a handling function called handlePanGesture, it’s in this function that we will code our advance through the video. I had to add the gesture recogniser to a view. Gesture Recognizers only recognize gestures on views, so applying it to the MPMoviePlayerController wouldn’t work. I applied it to the overall view Controller with the self command.

Then release the panGesture from memory. You’ll never need to reference panGesture again, it’s done it’s job of applying a rule to a view so you can get rid of it.

We now need to look at our function for handling the gesture:

This function will only be called when the pan gesture is in motion. We’ll have this if statement here to handle the gesture in motion and the gesture ending. If the state of the gesture is ended, handle the end of the gesture. Otherwise we can assume that the gesture is currently in motion so the Else statement will control it’s normal operation.

Controlling the Video

Now for the fun part. We’ve set up a video and set up a gesture. All we now need to do is operate the video depending on the velocity of the movement.

Here is the complete If statement that we saw above.

To handle the end of the gesture I have stopped the video playing by setting it’s currentPlaybackRate to 0.00. The currentPlaybackRate will be the basis for moving the video.

The velocity is detected as a CGPoint, and a CGPoint has an X value and a Y value, X = left to right, Y= top to bottom. I don’t care about top to bottom because I’ll only be detecting right to left or left to right movement to move the video. First I have to store the CGPoint velocity by detecting the pan’s velocity in the current view. After this I need to store the velocity.x. This velocity will give me a number such as 9893.980248 which is way too complicated to detect a difference.

To round out a large floating number as this you need to x100 and add it to an Int value then divide it by 100 back into a float. This’ll trim all the numbers except for 2 decimal places. 9893.98

This number is still too high to accurately use in a measurement, So I divided the velocity by 10000 instead of 100, so I get 9.89398

All I did was set the currentPlaybackRate of the video to this value and it’ll speed speed along at whatever speed you move your finger but stop when you remove your finger. Job Done!

Comments

comments

Powered by Facebook Comments