iOS- Swift我如何使这种类型的酒吧播放视频?我正在使用Avplayer播放视频

Question

这张图片代表了我想要的

我正在使用avplayer在视图中播放视频，我想要这种类型的条显示视频播放进度。我已经得到了视频缩略图，并把它们放在一个水平集合视图。我只是想知道如何使collectionview根据视频进度自动滚动。

Answer 1

首先你应该从像这样的视频中获取图像

var videoUrl:URL // use your own url
var frames:[UIImage] = [] {
didSet {
progressView.images = frames
}
}
private var generator:AVAssetImageGenerator!
lazy var progressView:PlainHorizontalProgressBar = {
let progressView = PlainHorizontalProgressBar()
progressView.images = frames
return progressView
}()
func getAllFrames() {
let asset:AVAsset = AVAsset(url:self.videoUrl)
let duration:Float64 = CMTimeGetSeconds(asset.duration)
self.generator = AVAssetImageGenerator(asset:asset)
self.generator.appliesPreferredTrackTransform = true
self.frames = []
for index:Int in 0 ..< Int(duration) {
self.getFrame(fromTime:Float64(index))
}
self.generator = nil
}
private func getFrame(fromTime:Float64) {
let time:CMTime = CMTimeMakeWithSeconds(fromTime, preferredTimescale:600)
let image:CGImage
do {
try image = self.generator.copyCGImage(at:time, actualTime:nil)
} catch {
return
}
self.frames.append(UIImage(cgImage:image))
}

然后自定义progressView

import Foundation
import UIKit
@IBDesignable
class PlainHorizontalProgressBar: UIView {

@IBInspectable var color: UIColor = .gray {
didSet { setNeedsDisplay() }
}
var images:[UIImage] = [] {
didSet {
//            how much images you want to show on progress bar let suppose 11
for i in 0...10 {
let imageView = UIImageView()
imageView.image = images[i]
imageView.frame = CGRect(x: Double(i * 20), y: Double(0), width: 20, height: self.frame.height)
self.addSubview(imageView)
}
}
}

var progress: CGFloat = 0 {
didSet { setNeedsDisplay() }
}
private let progressLayer = CALayer()
private let backgroundMask = CAShapeLayer()
override init(frame: CGRect) {
super.init(frame: frame)
setupLayers()
}
required init?(coder: NSCoder) {
super.init(coder: coder)
setupLayers()
}
private func setupLayers() {
layer.addSublayer(progressLayer)
}
override func draw(_ rect: CGRect) {
backgroundMask.path = UIBezierPath(roundedRect: rect, cornerRadius: rect.height * 0.25).cgPath
layer.mask = backgroundMask
let progressRect = CGRect(origin: .zero, size: CGSize(width: rect.width * progress, height: rect.height))
progressLayer.frame = progressRect
progressLayer.backgroundColor = color.cgColor
}
}

之后在class

中创建progressView