草庐IT

iOS视频列表滚动自动播放的实现(Swift)

秋海一刀 2024-04-24 原文

一、思路

 

首先,我们在视频列表中播放视频,并不一定需要给每个cell都添加上一个player,这样既要控制每个cell的player,同时还占用内存。我们只需用一个player就可以实现在列表中的某个区域播放视频,大致思路如下:

1.监听列表的滚动

2.在列表设置一个最高点,一个最低点,从而确定一个播放范围

3.当用户滑动列表使cell进入播放范围时,将player添加到要播放的控件中进行视频播放。

4.滑动到下一个要播放的cell时,移除当前正在播放或者离开屏幕的player,将player添加到新的播放控件中。

二、具体实现

1.协议VideoPlayable

protocol VideoPlayable: UIView {
    ///播放器容器
    var viewToContainVideo: UIView {get}
    ///设置播放url
    var urlToPlay: URL? {get}
    ///播放状态改变
    func videoStatusChanged(changeTo isPlaying: Bool)
    ///播放时间改变
    func videoPlayTimeChanged(changeTo playTime: Float64)
}

继承VideoPlayable的控件即可在上面播放视频,同时可以根据需求去声明属性和方法,比如这里我需要去获取视频的播放进度,就声明了 videoPlayTimeChanged监听视频的播放

2.协议VideoListPlayable

protocol VideoListPlayable: UIScrollView {
    var visibleViews: [VideoPlayable] {get}
}

extension UITableView: VideoListPlayable {
    var visibleViews: [VideoPlayable] {
        let views: [VideoPlayable] = visibleCells.compactMap({ $0 as? VideoPlayable })
        return views
    }
}

extension UICollectionView: VideoListPlayable {
    var visibleViews: [VideoPlayable] {
        let views: [VideoPlayable] = visibleCells.compactMap({ $0 as? VideoPlayable })
        return views
    }
}

继承了VideoListPlayable的控件在监听列表滚动时,即可对视频播放进行处理。

3.创建Manager

class GXRCWVideoListAutoPlayManager {
    
    static let shared = GXRCWVideoListAutoPlayManager()
    
    private var playerVC: AVPlayerViewController = AVPlayerViewController()
    private var preOffsetY: CGFloat = 0
    private var currentPlayingView: VideoPlayable?
    
    private init() {
        playerVC.player = AVPlayer()
//        playerVC.showsPlaybackControls = false
        playerVC.view.backgroundColor = .clear
        
        //暂停播放器
        _ = NotificationCenter.default.rx
            .notification(Notification.Name(NotificationNameInfo.kPuseVideoPlayer))
//            .take(until: self.rx.deallocated)
            .subscribe(onNext: { _ in
                self.playerVC.player?.pause()
            })
    }
    
    func scrollViewDidScroll(_ scrollView: VideoListPlayable) {

        let currentOffsetY = scrollView.contentOffset.y
        
        //设置播放范围
        let minY = scrollView.frame.height * 0.2
        let maxY = scrollView.frame.height * 0.75
        
        // 获取在 scrollView 自动播放区域内的视频
        let autoPlayableViews = scrollView.visibleViews.filter { view in
            guard let relativeRect = relativeRect(view: view.viewToContainVideo, relativeTo: scrollView), view.urlToPlay != nil else {return false}
            let containerCenterY = relativeRect.minY + relativeRect.height / 2
            return (containerCenterY > minY && containerCenterY < maxY)
        }
        
        guard let first = autoPlayableViews.first else {
            // 没有需要自动播放的视频
            // 移除当前正在离开/已经离开屏幕的视频
            removeCurrentVideoIfLeavingScreen(scrollView: scrollView)
            preOffsetY = currentOffsetY
            return
        }

        // 取出需要自动播放的视频
        let viewToPlay: VideoPlayable = autoPlayableViews.reduce(first) { (result, view) in
            let isScrollToUpper = currentOffsetY < preOffsetY
            return result.frame.maxY > view.frame.maxY ? (isScrollToUpper ? view : result) : (isScrollToUpper ? result : view)
        }
        
        if let currentPlayingView = currentPlayingView, viewToPlay as UIView == currentPlayingView {
            // 满足条件的视频正在播放中
            preOffsetY = currentOffsetY
            return
        }
        removeCurrentVideo(on: scrollView)
        addPlayerView(to: viewToPlay, on: scrollView)
        preOffsetY = currentOffsetY
    }
    
    func play(at videoView: VideoPlayable, on scrollView: VideoListPlayable) {
        removeCurrentVideo(on: scrollView)
        addPlayerView(to: videoView, on: scrollView)
    }
}

manager是连通列表和cell实现播放的中间者,也是实现列表视频播放的核心,如需修改播放的范围修改minYmaxY的值即可。

4.私有方法

private extension GXRCWVideoListAutoPlayManager {

    func relativeRect(view: UIView, relativeTo scrollView: VideoListPlayable) -> CGRect? {
        // 计算 view 相对于 scrollView 的位置
        guard let scrollViewSuperView = scrollView.superview, let containerSuperview = view.superview else {return nil}
        let containerViewRect = containerSuperview.convert(view.frame, to: scrollViewSuperView)
        let relativeRect = CGRect(origin: CGPoint(x: containerViewRect.minX - scrollView.frame.minX, y: containerViewRect.minY - scrollView.frame.minY), size: containerViewRect.size)
        return relativeRect
    }
    
    func addPlayerView(to view: VideoPlayable, on scrollView: VideoListPlayable) {

        guard let url = view.urlToPlay else {
            return
        }

        let avItem = AVPlayerItem(url: url)
        let avPlayer = AVPlayer(playerItem: avItem)
        playerVC.player = avPlayer
        avPlayer.isMuted = true//默认开启静音
        avPlayer.play()
        avPlayer.addPeriodicTimeObserver(forInterval: CMTime(value: CMTimeValue(1.0), timescale: CMTimeScale(1.0)), queue: .main) { time in
            //监听视频播放进度
            view.videoPlayTimeChanged(changeTo: CMTimeGetSeconds(time))
        }

        view.videoStatusChanged(changeTo: true)

        let containerView = view.viewToContainVideo
        containerView.addSubview(playerVC.view)

        playerVC.view.translatesAutoresizingMaskIntoConstraints = false
        playerVC.view.topAnchor.constraint(equalTo: containerView.topAnchor).isActive = true
        playerVC.view.bottomAnchor.constraint(equalTo: containerView.bottomAnchor).isActive = true
        playerVC.view.leftAnchor.constraint(equalTo: containerView.leftAnchor).isActive = true
        playerVC.view.rightAnchor.constraint(equalTo: containerView.rightAnchor).isActive = true

        currentPlayingView = view
        
        playerVC.showsPlaybackControls = true
    }
    
    func removeCurrentVideoIfLeavingScreen(scrollView: VideoListPlayable) {
        playerVC.showsPlaybackControls = false
        guard let view = currentPlayingView, let relativeRect = relativeRect(view: view, relativeTo: scrollView) else {
            return
        }
        let currentOffsetY = scrollView.contentOffset.y
        let containerCenterY = relativeRect.minY + relativeRect.height / 2
        if (currentOffsetY > preOffsetY && containerCenterY <= 0) || (currentOffsetY < preOffsetY && containerCenterY >= scrollView.frame.height) {
            removeCurrentVideo(on: scrollView)
        }
    }

    func removeCurrentVideo(on scrollView: VideoListPlayable) {
        playerVC.player = nil
        playerVC.view.removeFromSuperview()
        currentPlayingView?.videoStatusChanged(changeTo: false)
        currentPlayingView = nil
    }
}

三、使用示例

1.列表监听滚动

extension DiscoverSearchDynamicsListView: UIScrollViewDelegate{
    func scrollViewDidScroll(_ scrollView: UIScrollView) {
        GXRCWVideoListAutoPlayManager.shared.scrollViewDidScroll(self)
    }
}

2.cell实现VideoPlayable

extension DiscoverSearchDynamicsListVideoCell: VideoPlayable{
    var viewToContainVideo: UIView{
        return contentView
    }
    
    var urlToPlay: URL? {
        return URL(string: getM.videoUrl)
    }
    
    func videoStatusChanged(changeTo isPlaying: Bool) {
        backIV.isHidden = isPlaying
    }
    
    func videoPlayTimeChanged(changeTo playTime: Float64) {
        getM.videoCurrentTime = playTime
    }
}

3.效果图 

代码请点击下载,感谢您的点赞​​​​​​​

有关iOS视频列表滚动自动播放的实现(Swift)的更多相关文章

  1. ruby-on-rails - 使用 Ruby on Rails 进行自动化测试 - 最佳实践 - 2

    很好奇,就使用ruby​​onrails自动化单元测试而言,你们正在做什么?您是否创建了一个脚本来在cron中运行rake作业并将结果邮寄给您?git中的预提交Hook?只是手动调用?我完全理解测试,但想知道在错误发生之前捕获错误的最佳实践是什么。让我们理所当然地认为测试本身是完美无缺的,并且可以正常工作。下一步是什么以确保他们在正确的时间将可能有害的结果传达给您? 最佳答案 不确定您到底想听什么,但是有几个级别的自动代码库控制:在处理某项功能时,您可以使用类似autotest的内容获得关于哪些有效,哪些无效的即时反馈。要确保您的提

  2. ruby - RVM 使用列表[0] - 2

    是否有类似“RVMuse1”或“RVMuselist[0]”之类的内容而不是键入整个版本号。在任何时候,我们都会看到一个可能包含5个或更多ruby的列表,我们可以轻松地键入一个数字而不是X.X.X。这也有助于rvmgemset。 最佳答案 这在RVM2.0中是可能的=>https://docs.google.com/document/d/1xW9GeEpLOWPcddDg_hOPvK4oeLxJmU3Q5FiCNT7nTAc/edit?usp=sharing-知道链接的任何人都可以发表评论

  3. ruby - RuntimeError(自动加载常量 Apps 多线程时检测到循环依赖 - 2

    我收到这个错误:RuntimeError(自动加载常量Apps时检测到循环依赖当我使用多线程时。下面是我的代码。为什么会这样?我尝试多线程的原因是因为我正在编写一个HTML抓取应用程序。对Nokogiri::HTML(open())的调用是一个同步阻塞调用,需要1秒才能返回,我有100,000多个页面要访问,所以我试图运行多个线程来解决这个问题。有更好的方法吗?classToolsController0)app.website=array.join(',')putsapp.websiteelseapp.website="NONE"endapp.saveapps=Apps.order("

  4. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  5. ruby - 如何验证 IO.copy_stream 是否成功 - 2

    这里有一个很好的答案解释了如何在Ruby中下载文件而不将其加载到内存中:https://stackoverflow.com/a/29743394/4852737require'open-uri'download=open('http://example.com/image.png')IO.copy_stream(download,'~/image.png')我如何验证下载文件的IO.copy_stream调用是否真的成功——这意味着下载的文件与我打算下载的文件完全相同,而不是下载一半的损坏文件?documentation说IO.copy_stream返回它复制的字节数,但是当我还没有下

  6. Ruby 文件 IO 定界符? - 2

    我正在尝试解析一个文本文件,该文件每行包含可变数量的单词和数字,如下所示:foo4.500bar3.001.33foobar如何读取由空格而不是换行符分隔的文件?有什么方法可以设置File("file.txt").foreach方法以使用空格而不是换行符作为分隔符? 最佳答案 接受的答案将slurp文件,这可能是大文本文件的问题。更好的解决方案是IO.foreach.它是惯用的,将按字符流式传输文件:File.foreach(filename,""){|string|putsstring}包含“thisisanexample”结果的

  7. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  8. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

  9. ruby-on-rails - 从应用程序中自定义文件夹内的命名空间自动加载 - 2

    我们目前正在为ROR3.2开发自定义cms引擎。在这个过程中,我们希望成为我们的rails应用程序中的一等公民的几个类类型起源,这意味着它们应该驻留在应用程序的app文件夹下,它是插件。目前我们有以下类型:数据源数据类型查看我在app文件夹下创建了多个目录来保存这些:应用/数据源应用/数据类型应用/View更多类型将随之而来,我有点担心应用程序文件夹被这么多目录污染。因此,我想将它们移动到一个子目录/模块中,该子目录/模块包含cms定义的所有类型。所有类都应位于MyCms命名空间内,目录布局应如下所示:应用程序/my_cms/data_source应用程序/my_cms/data_ty

  10. Get https://registry-1.docker.io/v2/: net/http: request canceled while waiting - 2

    1.错误信息:Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:requestcanceledwhilewaitingforconnection(Client.Timeoutexceededwhileawaitingheaders)或者:Errorresponsefromdaemon:Gethttps://registry-1.docker.io/v2/:net/http:TLShandshaketimeout2.报错原因:docker使用的镜像网址默认为国外,下载容易超时,需要修改成国内镜像地址(首先阿里

随机推荐