How to zoom out and zoom in VideoPlayer is like Youtube

Tram Ho

I. Open lesson

Hello dear friends. We meet again in the cool seasonal weather, this code must know you all right 😃 ). The story is that I had a high school friend all day long. I could only go on a trip, it was so crazy that I traveled by motorbike from the North to the South because of my passion. Wherever it goes, it also records videos and then uploads them on YouTube. The thing that it invested in is also “genuine” equipment so videos are very good quality. Hoa Binh flood discharge just now it stood next to the flood flow. Then he also thought of ways to commercialize the effort he put into it. It asked me to create an app and sell content, but after thinking about it, it decided to upload it to youtube for free 😃 ). I have to do it again and have to give up and in this app I have learned a pretty simple but interesting skill to share with you. That’s how to zoom in, zoom out videoplayer like the youtube app we use often. Come on rambling too much, we start home.

II. Implement

I would like to burn the stage and show UI screen including:

  • 1 is videoPlayer (here I use YouTubePlayerView is YouTubePlayer-Swift lib to play link from youtube’s api). You can use AVPlayer if the usual video shows we do. These 2 are essentially the same and can customize the layout as you like.
  • 2 is the list of related videos.

And the problem is that the videoPlayer zoom is smaller in the corner of the screen to select other videos on the Home screen like this image:

To zoom in or zoom out I choose UIPanGestureRecognizer. Perhaps this is also difficult for you to understand and now start the steps to do.

Step 1: We create 2 enum. 1 is to determine the status of VideoPlayer, 1 enum to navigate

Step 2: Initialize p Step 2: Initialize UIPanGestureRecognizer with target and action, add gestureRecognizer to VideoPlayer

Step 3: Processing code in panuncest func selector As we all know, UIPanGestureRecognizer has 6 states but here I only need to use 2 states to handle that: began and ended The purpose of this func is to identify the user want to move VideoPlayer in any direction and in which state VideoPlayer is with 2 enum created in step 1 Then we will take velocity to change VideoPlayer frame is ok. I have handled the following:

Create a function with the translation and state input of VideoPlayer. This function changes the coordinates for VideoPlayer

There are slightly puzzling parameters here as 9/16 I have explained a bit. Usually when layout for a videoplayer we usually set the width ratio, height is 16: 9 (The standard ratio for displaying videos, you can search this ratio in google to understand and deeper).

Next create a function with the input scaleFactor. This function changes transform for VideoPlayer

Now the func selector of UIPanGestureRecognizer will determine our problem.

III. See you again

That’s it! Let’s build and try. If there is anything not understood or comment I will explain. Have a nice day.

Share the news now

Source : Viblo