企业官网建设流程全解析

简介：这份资源面向iOS开发中高级学习者，聚焦列表内视频播放这一常见交互场景，提供模仿网易视频与今日头条体验的完整实现思路。内容围绕UITableView/UICollectionView承载视频cell、AVFoundation中AVPlayer与AVPlayerLayer渲染、cell重用时的播放状态回收、视频预加载与滚动性能优化、点击切换自动暂停、全屏展开与手势交互、MVVM状态管理等关键环节展开，并兼顾多设备尺寸与横竖屏适配，适合需要落地短视频信息流或内容列表播放功能的开发者参考。压缩包共31个文件，约66KB，以m与h源码文件为主体，辅以xib与storyboard界面布局、plist配置、png图片资源及工程与scheme相关文件，结构紧凑便于直接导入Xcode运行调试。目前已有904人学习下载，可作为列表视频播放模块的起步骨架与排错参照。

1. 列表视频播放：从信息流里滑过的那条视频，到底是怎么自己动起来的

刷信息流时，手指一滑，上一条视频自动暂停、下一条自动起播，声音跟着切换，画面不黑屏也不卡顿——这个体验看起来理所当然，真自己动手做，才知道坑有多密。这个项目就是干这件事的：在 iOS 的列表（UITableView / UICollectionView）里实现类似主流资讯客户端信息流那样的视频播放效果，滑到哪条播哪条，滑走就停，点击进详情，列表里只留一个轻量的播放容器。它适合正在做资讯流、社区动态、短视频列表的 iOS 开发者，尤其是被「多个 AVPlayer 抢资源」「复用导致画面串台」「滑动时卡顿掉帧」折磨过的人。核心关键词就是列表视频播放，下面从结构到代码一层层拆。

2. 整体架构与工程结构：播放器、单元格、控制器三方怎么分工

2.1 三层职责划分

这类列表视频播放项目，最容易翻车的做法是把 AVPlayer 直接塞进每个 cell 里。cell 一复用，播放器跟着复用，画面串台、声音重叠、内存暴涨全来了。合格的架构一定是三层分离：

• 播放管理层：全局唯一（或少量）的播放器实例池，负责 AVPlayer / AVPlayerItem 的创建、替换、播放暂停、进度回调。它不关心 UI，只认「当前该播哪个 URL」。
• 单元格层：只负责展示封面图、播放按钮、进度条这些静态元素，以及把「我这个位置对应哪个视频」告诉播放管理层。cell 本身不持有播放器。
• 控制器层：监听列表滚动，计算当前哪个 cell 处于可视区中心（或满足起播条件），把播放器视图挂到那个 cell 上，并处理进入后台、页面消失时的暂停。

这样做的直接好处是：cell 复用不会影响播放状态，因为播放器根本不在 cell 里；列表滚动时只需要做一次「当前活跃 cell」的判定，开销可控。

2.2 目录结构长什么样

按上面三层，工程目录常见是这样组织的（不同项目命名略有差异，但职责对应）：

ListVideoDemo/ ├── App/ │ ├── AppDelegate.swift │ └── SceneDelegate.swift ├── Player/ │ ├── VideoPlayerManager.swift // 播放器单例，核心调度 │ ├── VideoPlayerView.swift // 承载 AVPlayerLayer 的视图 │ └── VideoItem.swift // 视频数据模型（url、封面、时长） ├── List/ │ ├── FeedViewController.swift // 列表控制器，滚动监听 │ ├── FeedCell.swift // 单元格，封面 + 播放按钮 │ └── FeedCellViewModel.swift // cell 的展示状态 ├── Utils/ │ ├── VisibleRectHelper.swift // 可视区判定工具 │ └── ImageLoader.swift // 封面图异步加载 └── Resources/ └── Assets.xcassets

Player目录是整个项目的重心，List目录负责交互，Utils里那个可视区判定工具是「滑到哪播哪」的判定核心，后面会单独讲。

2.3 技术选型：为什么是 AVPlayer 而不是别的

iOS 上做视频播放，可选的有 AVPlayer、AVPlayerViewController、以及基于 AVFoundation 自己封装的方案。列表内嵌播放这个场景，选 AVPlayer + AVPlayerLayer 是主流做法，原因很实际：

• AVPlayerViewController 自带控制条和全屏逻辑，塞进 cell 里样式不好控，而且它更适合详情页这种单视频场景。
• AVPlayerLayer 可以直接作为 view 的 layer 挂上去，尺寸、圆角、裁剪都能跟着 cell 走，列表里做小窗播放最灵活。
• 播放状态、缓冲进度、播放结束这些回调，AVPlayer 给的 KVO 和通知足够用，不需要引入额外框架。

数据源方面，项目里视频地址一般来自接口返回的 URL 数组，封面图走异步加载。列表用 UITableView 还是 UICollectionView 都行，信息流场景 UITableView 更常见，因为 cell 高度固定或按内容算都比较直接。

3. 核心模块拆解：播放管理器与可视区判定

3.1 播放管理器：一个实例管住所有视频

播放管理器的核心职责是「同一时刻只有一个视频在播」。下面是一个精简但可用的实现骨架：

import AVFoundation final class VideoPlayerManager { static let shared = VideoPlayerManager() private let player = AVPlayer() private var currentURL: URL? private var timeObserver: Any? private init() { player.actionAtItemEnd = .pause // 监听播放结束，方便做循环或自动播下一条 NotificationCenter.default.addObserver( self, selector: #selector(playToEnd(_:)), name: .AVPlayerItemDidPlayToEndTime, object: nil ) } /// 切换到指定视频；同一个 URL 不重复替换，避免闪烁 func play(url: URL, in containerView: UIView) { if currentURL == url { player.play() return } currentURL = url let item = AVPlayerItem(url: url) player.replaceCurrentItem(with: item) attachPlayerLayer(to: containerView) player.play() } func pause() { player.pause() } func resume() { player.play() } /// 把 AVPlayerLayer 挂到目标视图上 private func attachPlayerLayer(to view: UIView) { if let layer = view.layer as? AVPlayerLayer { layer.player = player return } let playerLayer = AVPlayerLayer(player: player) playerLayer.videoGravity = .resizeAspectFill playerLayer.frame = view.bounds view.layer.addSublayer(playerLayer) } @objc private func playToEnd(_ note: Notification) { // 播放结束后的处理，比如自动播放下一条 player.seek(to: .zero) } }

逐段说明：play(url:in:)是唯一入口，先判断 URL 是否相同，相同就只调play()，避免每次滚动都重建 AVPlayerItem 造成黑屏闪烁；不同才替换 item 并重新挂 layer。attachPlayerLayer里先判断目标 view 的 layer 是否已经是 AVPlayerLayer，是就只换 player，不是才新建，这样 cell 复用时不会叠加多层。actionAtItemEnd = .pause让播放结束停在最后一帧，配合通知可以做循环或自动下一条。参数上，videoGravity选.resizeAspectFill是为了列表小窗铺满不留黑边，如果视频比例差异大、不想裁剪，改成.resizeAspect。

3.2 可视区判定：滑到哪条才算「该播」

列表滚动时，每一帧都在问「现在哪个 cell 该播」。判定逻辑不能太敏感，否则快速滑动时频繁切换播放器，卡顿和声音断续都来了。常见做法是取列表可视区中心点，找中心点落在哪个 cell 的 frame 内，并且该 cell 露出比例超过阈值（比如 60%）才起播：

extension FeedViewController: UIScrollViewDelegate { func scrollViewDidScroll(_ scrollView: UIScrollView) { guard !scrollView.isDragging || scrollView.isDecelerating else { return } updateActiveCell() } private func updateActiveCell() { let centerPoint = CGPoint( x: tableView.bounds.midX, y: tableView.contentOffset.y + tableView.bounds.height / 2 ) guard let indexPath = tableView.indexPathForRow(at: centerPoint), let cell = tableView.cellForRow(at: indexPath) as? FeedCell else { VideoPlayerManager.shared.pause() return } // 露出比例不足时不起播，避免半露的 cell 抢播放 let visibleRatio = cellVisibleRatio(cell) guard visibleRatio > 0.6 else { VideoPlayerManager.shared.pause() return } if let url = cell.viewModel.videoURL { VideoPlayerManager.shared.play(url: url, in: cell.playerContainer) } } private func cellVisibleRatio(_ cell: UITableViewCell) -> CGFloat { let cellRect = tableView.convert(cell.frame, to: tableView.superview) let visibleRect = tableView.convert(tableView.bounds, to: tableView.superview) let intersection = cellRect.intersection(visibleRect) guard !intersection.isNull, cellRect.height > 0 else { return 0 } return intersection.height / cellRect.height } }

这里几个参数值得说清楚：中心点取contentOffset.y + bounds.height / 2，是列表可视区正中间；visibleRatio > 0.6这个阈值是经验值，太低会导致相邻两条来回抢，太高会导致滑到一半还不播，实际项目里可以按 cell 高度调。scrollViewDidScroll里加了isDragging || isDecelerating的判断，是为了在用户手指按住拖动时不做切换，等松手减速时再判定，减少无效切换。如果列表有吸顶或分组头，中心点计算要相应偏移，这个按实际布局改。

3.3 单元格：只做展示，不碰播放器

cell 的职责被压到最轻：封面、标题、播放按钮、一个空的容器 view 给播放器挂 layer。关键点是prepareForReuse里要把容器上的播放器 layer 清掉，否则复用时旧画面会残留一帧：

final class FeedCell: UITableViewCell { @IBOutlet weak var coverImageView: UIImageView! @IBOutlet weak var playerContainer: UIView! @IBOutlet weak var playButton: UIButton! override func prepareForReuse() { super.prepareForReuse() // 清掉旧 layer，防止复用串台 playerContainer.layer.sublayers? .compactMap { $0 as? AVPlayerLayer } .forEach { $0.removeFromSuperlayer() } coverImageView.image = nil } func configure(with viewModel: FeedCellViewModel) { coverImageView.load(url: viewModel.coverURL) playButton.isHidden = viewModel.isPlaying } }

prepareForReuse里只移除 AVPlayerLayer，不动其他子视图，避免误删布局用的 layer。configure里封面走异步加载，播放按钮的显隐由 viewModel 的isPlaying驱动，这样播放状态和 UI 状态是单向同步的，不会出现「按钮显示暂停但实际没播」的错位。

4. 跑起来与真机调试：从零到看见第一条视频自动播放

4.1 环境与依赖

项目是纯 iOS 原生工程，没有第三方播放器依赖，AVFoundation 是系统框架，不需要额外集成。环境要求：

用 Xcode 打开.xcodeproj，选一个真机或模拟器，直接 Run 即可。如果工程用了 CocoaPods 管理封面图加载之类的库，先执行pod install再打开.xcworkspace，这一步漏了会报找不到模块。

4.2 数据源准备

列表数据一般来自接口，本地调试时可以先写死一组测试 URL。注意视频地址要用 HTTPS，iOS 默认的 ATS 策略会拦截 HTTP 明文请求，真机上表现为「一直转圈不播」，控制台能看到 ATS 相关日志。测试数据这样组织：

struct FeedCellViewModel { let videoURL: URL? let coverURL: URL? var isPlaying: Bool = false } // 本地调试用的假数据 let mockItems: [FeedCellViewModel] = [ FeedCellViewModel(videoURL: URL(string: "https://example.com/v1.mp4"), coverURL: URL(string: "https://example.com/c1.jpg")), FeedCellViewModel(videoURL: URL(string: "https://example.com/v2.mp4"), coverURL: URL(string: "https://example.com/c2.jpg")) ]

videoURL用可选类型，是因为接口里可能混有图文条目，没有视频的 cell 就不参与起播判定，updateActiveCell里guard let url会自然跳过。

4.3 生命周期处理

列表页切走、App 进后台，视频必须暂停，否则会出现「锁屏了还在响」的尴尬。在控制器里补上：

override func viewWillDisappear(_ animated: Bool) { super.viewWillDisappear(animated) VideoPlayerManager.shared.pause() } // App 进入后台 NotificationCenter.default.addObserver( forName: UIApplication.didEnterBackgroundNotification, object: nil, queue: .main ) { _ in VideoPlayerManager.shared.pause() }

viewWillDisappear里暂停是页面级兜底，didEnterBackground是系统级兜底，两层都加上，基本不会出现后台偷跑音频的情况。如果项目要支持画中画或后台音频，这里要改成条件判断，但列表信息流场景一般不需要。

5. 避坑与常见问题排查：那些让我加班到深夜的细节

5.1 现象：快速滑动时画面串台，A 视频的声音配 B 视频的画面

原因：cell 复用时旧的 AVPlayerLayer 没清掉，新 cell 又挂了一层，两层叠在一起，视觉上就是串台。解决：在prepareForReuse里移除所有 AVPlayerLayer，并且attachPlayerLayer里先判断 layer 类型再决定是复用还是新建，两处都做才彻底。

5.2 现象：列表滚动明显掉帧，尤其是视频多的页面

原因：每次scrollViewDidScroll都创建 AVPlayerItem 或重复设置 layer，主线程被占满。解决：播放管理器里做 URL 去重，同一个 URL 只调play()不重建 item；可视区判定加阈值和拖动状态判断，减少无效切换；封面图异步加载并做内存缓存，别在滚动回调里同步解码大图。

5.3 现象：视频起播前有一段时间黑屏

原因：AVPlayerItem 创建后需要缓冲，直接play()会先黑一下。解决：起播前先显示封面图，等AVPlayerItem的status变成.readyToPlay再隐藏封面；或者用playerLayer.isHidden控制，缓冲完成前盖住播放层。这个细节在弱网下尤其明显，别省。

5.4 现象：真机能播，模拟器不播或卡死

原因：模拟器的视频硬解码能力和真机差异大，部分编码格式（如 HEVC）在模拟器上支持不完整。解决：调试播放逻辑用真机，模拟器只用来调 UI 布局；测试视频统一用 H.264 编码的 mp4，兼容性最好。

5.5 现象：切到其他页面再回来，列表视频不自动播了

原因：viewWillDisappear里暂停了，但viewWillAppear里没有重新触发可视区判定。解决：在viewDidAppear里手动调一次updateActiveCell()，让当前中心 cell 重新起播；如果列表有下拉刷新，刷新完成后也要补一次判定。

6. 二次开发：把单播放器改成可扩展的播放调度

6.1 从单例走向可配置的调度器

现在的VideoPlayerManager是单例，够用但不好扩展。二次开发时我一般会把它抽成一个协议，把「选哪个视频播」的策略独立出来：

protocol VideoPlaybackStrategy { func shouldPlay(cellFrame: CGRect, visibleRect: CGRect) -> Bool } struct CenterVisibleStrategy: VideoPlaybackStrategy { func shouldPlay(cellFrame: CGRect, visibleRect: CGRect) -> Bool { let intersection = cellFrame.intersection(visibleRect) guard !intersection.isNull, cellFrame.height > 0 else { return false } return intersection.height / cellFrame.height > 0.6 } }

这样「中心点判定」「露出比例判定」「首条可见即播」这些策略可以按业务切换，不用改控制器。参数0.6也可以提到配置里，不同 cell 高度用不同阈值。

6.2 预加载与缓存

信息流场景用户滑得快，等滑到才创建 AVPlayerItem 往往来不及。可以在scrollViewWillEndDragging里预判接下来会露出的两三条，提前创建 AVPlayerItem 并preload（调用player.currentItem?.preload()或提前replaceCurrentItem但不 play）。注意预加载数量别超过 3 条，多了内存和带宽都吃不消。

6.3 验证改造是否生效

改完别只看「能播」，按这几条验证：快速上下滑动 20 次，观察是否串台、是否有声音重叠；切后台再回前台，确认暂停和恢复正确；弱网环境（用开发者工具的 Network Link Conditioner）下看黑屏时长和封面兜底是否生效；内存用 Instruments 的 Allocations 看 AVPlayerItem 是否随滚动持续增长，正常应该稳定在一个小范围。

6.4 一个具体技巧：用 cell 的 tag 做播放归属校验

cell 复用导致「播放器挂错 cell」是这类项目最隐蔽的 bug。我的习惯是给每个 cell 的容器 view 打上当前 indexPath 的 tag，播放管理器挂 layer 前校验 tag 是否匹配，不匹配就丢弃这次挂载。这个校验成本极低，但能挡住大部分复用竞态。从那以后我每次做列表视频播放，都会在挂载前强制走一遍归属校验，宁可多一行判断，也不想再半夜爬起来查串台。希望帮到你。

本文还有配套的精品资源，点击获取