如何在UITextView文本后放置视频,或滚动完文本后显示外部视频
嘿,我来帮你搞定这两个需求!在iOS开发里,这两种场景都有成熟的实现思路,我给你详细拆解下:
一、在UITextView的文本后嵌入视频
UITextView本身支持富文本,我们可以通过NSTextAttachment把视频播放器作为附件插入到文本末尾。这里有个实用技巧:先给附件设置静态占位图,再通过代理点击触发视频播放(如果需要直接在文本区域播放,就得额外处理视图层级)。
具体实现步骤(Swift代码示例):
import UIKit import AVKit // 给UITextView追加视频附件的方法 func appendVideoToTextView(textView: UITextView, videoURL: URL) { // 1. 创建视频播放器和图层 let player = AVPlayer(url: videoURL) let playerLayer = AVPlayerLayer(player: player) let videoHeight: CGFloat = 200 // 自定义视频高度 playerLayer.frame = CGRect(x: 0, y: 0, width: textView.bounds.width, height: videoHeight) // 2. 用UIView承载播放器图层,方便转成占位图 let videoPlaceholderView = UIView(frame: playerLayer.frame) videoPlaceholderView.layer.addSublayer(playerLayer) // 3. 将View转成静态图片作为附件占位 UIGraphicsBeginImageContextWithOptions(videoPlaceholderView.bounds.size, false, UIScreen.main.scale) videoPlaceholderView.layer.render(in: UIGraphicsGetCurrentContext()!) let placeholderImage = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() // 4. 创建文本附件并设置尺寸 let videoAttachment = NSTextAttachment() videoAttachment.image = placeholderImage videoAttachment.bounds = CGRect(x: 0, y: 0, width: textView.bounds.width, height: videoHeight) // 5. 把附件转成富文本,追加到原有文本后面 let attachmentString = NSAttributedString(attachment: videoAttachment) let mutableText = NSMutableAttributedString(attributedString: textView.attributedText) mutableText.append(NSAttributedString(string: "\n\n")) // 加换行分隔文本和视频 mutableText.append(attachmentString) // 6. 赋值回UITextView textView.attributedText = mutableText textView.isUserInteractionEnabled = true textView.delegate = self // 记得设置ViewController为代理 } // UITextView代理:处理附件点击播放视频 extension YourViewController: UITextViewDelegate { func textView(_ textView: UITextView, shouldInteractWith attachment: NSTextAttachment, in characterRange: NSRange, interaction: UITextItemInteraction) -> Bool { // 这里可以直接播放视频,或者弹出全屏播放器 let playerVC = AVPlayerViewController() playerVC.player = AVPlayer(url: yourVideoURL) present(playerVC, animated: true) { playerVC.player?.play() } return false // 阻止默认的交互行为 } }
注意:如果想要视频在UITextView里直接播放,需要自定义UITextView,手动把播放器View添加到UITextView的子视图中,并且监听文本布局变化,实时调整播放器的位置(因为富文本的附件占位是静态的,动态播放需要单独处理视图层级)。
二、滚动完所有文本后才显示外部视频
这个需求更适合用容器视图来实现,推荐两种简单方案:
方案1:UITableView(最省心)
把文本和视频分成两个TableViewCell,第一个cell放自适应高度的UITextView,第二个cell放视频播放器。用户滚动完文本cell后,自然就会看到视频cell。
关键代码(计算文本cell的高度):
func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat { if indexPath.row == 0 { // 计算文本内容的高度 let text = yourTextContent let maxWidth = tableView.bounds.width - 20 // 减去左右边距 let textSize = text.boundingRect( with: CGSize(width: maxWidth, height: .greatestFiniteMagnitude), options: .usesLineFragmentOrigin, attributes: [.font: UIFont.systemFont(ofSize: 16)], context: nil ).size return textSize.height + 20 // 加上上下内边距 } else { return 200 // 视频cell的固定高度 } }
这种方案的好处是自带滚动逻辑,不需要手动处理滚动监听,适配不同屏幕也更简单。
方案2:UIScrollView容器
把UITextView和视频View都放在UIScrollView里,先计算文本的高度,然后固定视频View在文本的下方,设置ScrollView的contentSize即可:
// 初始化ScrollView、TextView和视频View let scrollView = UIScrollView(frame: view.bounds) view.addSubview(scrollView) let textView = UITextView() textView.text = yourTextContent textView.isScrollEnabled = false // 禁止TextView自身滚动 scrollView.addSubview(textView) let videoPlayerView = UIView(frame: CGRect(x: 0, y: 0, width: scrollView.bounds.width, height: 200)) // 给videoPlayerView添加AVPlayerLayer... scrollView.addSubview(videoPlayerView) // 布局计算 let textHeight = textView.sizeThatFits(CGSize(width: scrollView.bounds.width, height: .greatestFiniteMagnitude)).height textView.frame = CGRect(x: 10, y: 10, width: scrollView.bounds.width - 20, height: textHeight) videoPlayerView.frame = CGRect(x: 0, y: textView.frame.maxY + 20, width: scrollView.bounds.width, height: 200) // 设置ScrollView的内容大小 scrollView.contentSize = CGSize(width: scrollView.bounds.width, height: videoPlayerView.frame.maxY + 10)
这样用户滚动ScrollView时,只有滑到最底部才会看到视频View。
内容的提问来源于stack exchange,提问作者bixbow
相关产品推荐
相关产品推荐

