Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

AVPlayer get rid of black bars/background at top & bottom (Swift)

Quick question, does anybody know how i can get rid of the black bars at the top and bottom of my video? I just started using AVPlayer and i'm just removing codes here and there in attempt to remove the black layers. Appreciate those who can help me, Thanks!

UIViewController

import UIKit
import AVKit
import AVFoundation
private var looper: AVPlayerLooper?

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        let path = Bundle.main.path(forResource: "Innie-Kiss", ofType:"mp4")
        let player = AVQueuePlayer(url: URL(fileURLWithPath: path!))
        looper = AVPlayerLooper(player: player, templateItem: AVPlayerItem(asset: AVAsset(url: URL(fileURLWithPath: path!))))
        let controller = AVPlayerViewController()
        controller.player = player
        let screenSize = UIScreen.main.bounds.size
        let videoFrame = CGRect(x: 0, y: 200, width: screenSize.width, height: (screenSize.height - 130) / 2)
        controller.view.frame = videoFrame
        self.view.addSubview(controller.view)
        player.play()
    }

}

enter image description here

like image 663
Kinja Avatar asked Jan 26 '18 17:01

Kinja


People also ask

How do I remove black bars from a video?

Click Add Your File and upload the video clip you want to remove black bars. To crop the black bars in your video, you can either choose the appropriate aspect ratio preset until they disappear or move the cropping frame by dragging corners to get rid of the black bars.

What are the black bars in the video player?

Mostly the black bars are appear when the video is not comfort with screen resolution and the video player is automatically provide a aspect ratio with black bar after then we want remove this problem, we can adjust the resolution of video.

How do I add black bars to a video in Movavi?

Open the Program and Add Media Files. Open Movavi Video Editor Plus. In the welcome window, select the New Project button to start editing your video. Click Add Media Files and choose the video you want to put the black bars on. It will appear on the Video Track on the Timeline .

How do I crop the black bars in my video?

To crop the black bars in your video, you can either choose the appropriate aspect ratio preset until they disappear or move the cropping frame by dragging corners to get rid of the black bars.


2 Answers

You need to set the videoGravity of the AVLayer. The default value is .resizeAspect which will preserve the aspect ratio with black bars on top/bottom or left/right. What you want is .resize

The AVLayer you need to set the videoGravity on is the layer property of your AVPlayer.

see this for more info: https://developer.apple.com/documentation/avfoundation/avplayerlayer/1388915-videogravity

like image 84
johnnyclem Avatar answered Oct 19 '22 00:10

johnnyclem


#import AVKit

var playerController = AVPlayerViewController()
playerController.videoGravity = .resizeAspect
 /*playerController.videoGravity = .resizeAspectFill*/
playerController.view.backgroundColor = UIColor.white //set color as per super or custom view.

Note: If you set the videoGravity of the AVPlayerViewController. The default value is .resizeAspect then it is possible to visibility of black color(default) in background if you wants this color would similar to your super view's color then you must set superview's or custom view's color to your playercontroller's view background color.

*Example:Suppose super view's or custom view's background color is white then playerController view's background color must be set as playerController.view.backgroundColor = UIColor.white *

Note :playerController's backgroundColor should not be set as UIColor.white ,always. It must me set as super view' background color.

If you set playerController.videoGravity = .resizeAspectFill then it will fill the player content to super view or custom view, here also no black color would be shown. So choose either .resizeAspect  or resizeAspectFill as per your requirements.
like image 40
Mithilesh Kuamr Avatar answered Oct 19 '22 01:10

Mithilesh Kuamr