如何重新缩放以纵向模式拍摄的视频以适合 UIView？

Posted 2023-03-14

【中文标题】如何重新缩放以纵向模式拍摄的视频以适合 UIView？

【英文标题】：How do I re-scale a video taken in portrait mode to fit a UIView?

【发布时间】：2019-08-19 07:25:46

【问题描述】：

我有一个 UICollectionView feed，用户可以在其中录制视频，视频将在 feed 中显示和播放。如果用户以横向模式拍摄，则视频非常适合 UIView。但是，如果用户以纵向模式拍摄，则侧面会有白色的横条，填补了多余的部分。

给定视频 URL，有没有办法缩放视频以适应 UICollectionView 单元格中的 UIView？

旁白：我还想最终在线播放这些视频，这样它们就不会同时播放。有没有一个很好的框架可以用来引导这个功能？

UICollectionView 提要中的单元格将包含一个 UIView，它将容纳视频播放器。这是 UIView 的类 PlayerViewClass：

import Foundation
import UIKit
import AVKit
import AVFoundation

class PlayerViewClass: UIView 

    override static var layerClass: AnyClass 
        return AVPlayerLayer.self
    

    var playerLayer: AVPlayerLayer 

        return layer as! AVPlayerLayer
    

    var player: AVPlayer? 
        get 
            return playerLayer.player
        

        set 
            playerLayer.player = newValue
        
    

注意，单元格 MyCollectionViewCell 有一个链接到此 UIView 的 IBOutlet：

class MyCollectionViewCell 

    @IBOutlet weak var playerView: PlayerViewClass!


override func awakeFromNib() 
    super.awakeFromNib() 

   //Setup, not relevant

   

FeedViewController中Feed的collectionView cellForItemAt indexPath委托方法如下：

override func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell 

     let cell = collectionView.dequeueReusableCell(withReuseIdentifier: "cell", for: indexPath)

      if let cell = cell as? MyCollectionViewCell 

      ...

      //Configuring the cell

      ...

      //Video player
      let avPlayer = AVPlayer(url: post.fullURL)

      **//TODO: Scale the video to the playerView (UIView)**

      //Setting cell's player
      cell.playerView.playerLayer.player = avPlayer

      //Play
      cell.playerView.player?.play()

    
    return cell
  

或者，我是否可以设置func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize ，以便单元格视图根据其尺寸适合视频的大小？

任何帮助将不胜感激！

【参考方案1】：

您可以使用AVPlayerLayer 的videoGravity 属性。将其设置为resizeAspectFill，这样视频就会填满单元格，但是视频会在两侧被剪切，所以请确保它适合您。

【讨论】：

非常感谢！有没有办法不切断视频，或者考虑到纵向与横向的尺寸，这不可能吗？也就是说，我可以更改func collectionView(_ collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, sizeForItemAt indexPath: IndexPath) -> CGSize 以根据视频大小调整单元格的视图吗？

@SergioCharles 这完全取决于您想要实现的 UI。您可以使用sizeForItemAt 方法，但我不确定您是否会对结果感到满意。我可以建议你改为子类UICollectionViewLayout 类。它更灵活。

谢谢！使用UICollectionViewLayout，我将如何格式化视频单元格，以便获得类似于带有视频单元格的 Instagram 提要的结果？

@SergioCharles primo，Instagram 使用方形视图来显示视频。如果没有videoGravity 和resizeAspectFill 值，您的肖像视频无论如何都不会填充它。 Secundo，你可以试着在网上看看，我相信你会找到好的提示，或者你可以在这里问另一个问题，因为这是完全不同的问题，需要详细解释