如何在collectionView中一次播放一个视频? [英] How to play one video at a time in a collectionView?

问题描述

我正在构建一个类似于TikTok的应用程序，其中的主要提要是一个UICollectionView，每个单元格中都有一个视频.我的问题是多个视频将同时播放，并且我只希望一次播放一个视频，这取决于该单元是否在视野中.如果单元格不在视野中，我也希望视频暂停.

I am building an application similar to TikTok, where the main feed is a UICollectionView with a video in each cell. My problem is that multiple videos will play simultaneously, and I only want one video to play at a time, based on whether or not the cell is in view. I also want the video to pause if the cell is out of view.

每个单元格占据整个屏幕，并且collectionView启用了分页.

Each cell takes up the entire screen, and the collectionView has paging enabled.

如果您曾经使用过Instagram或TikTok，我希望功能相同.视频仅在单元格进入视图时播放，而视频在单元格离开视图时暂停.让我知道是否需要更多代码或信息，谢谢！

If you have ever used Instagram or TikTok, I want the functionality to be the same. Video only plays when cell comes into view, and video pauses when cell leaves the view. Let me know if you need any more code or information and thank you!

以下是FeedController中的相关代码:

Here is the relevant code in the FeedController:

func collectionView(_ collectionView: UICollectionView, cellForItemAt indexPath: IndexPath) -> UICollectionViewCell {
    let cell = collectionView.dequeueReusableCell(withReuseIdentifier: reuseIdentifier, for: indexPath) as! FeedCell
    cell.delegate = self

    cell.post = posts[indexPath.row]

    if let videoUrl = posts[indexPath.row].videoUrl { 
      player = AVPlayer(url: videoUrl)
      playerLayer = AVPlayerLayer(player: player)

      playerLayer?.zPosition = -1
      playerLayer?.frame = cell.contentView.frame
      playerLayer?.videoGravity = .resizeAspectFill
      cell.contentView.layer.addSublayer(playerLayer!)
      player?.play()

      cell.playerLayer = playerLayer
      cell.player = player
    }

    return cell
}

以下是FeedCell的相关代码:

Here is the relevant code for the FeedCell:

class FeedCell: UICollectionViewCell {

  var post: Post?

  var playerLayer: AVPlayerLayer?
  var player: AVPlayer?

  override func prepareForReuse() {
      super.prepareForReuse()
      playerLayer?.removeFromSuperlayer()
      player?.pause()
  }

}

推荐答案

您可以使用 collectionView(:willDisplay:forItemAt :) 和

You can easily achieve this using the collectionView(:willDisplay:forItemAt:) and collectionView(:didEndDisplaying:forItemAt:) delegate methods.

func collectionView(_ collectionView: UICollectionView, willDisplay cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
    (cell as? FeedCell).player?.play()
}

func collectionView(_ collectionView: UICollectionView, didEndDisplaying cell: UICollectionViewCell, forItemAt indexPath: IndexPath) {
    (cell as? FeedCell).player?.pause()
}

注意:仅当您的单元格完全从屏幕上消失后，才会调用didEndDisplaying.

Note: The didEndDisplaying will be called only after your cell goes off entirely from the screen.

这篇关于如何在collectionView中一次播放一个视频?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！