短视频作为内容重要的承载方式,是吸引用户的重点,短视频的内容与体验直接关系到用户是否愿意长时停留。因此,体验的优化就显得尤为重要。上一篇我们分享了 iOS 短视频秒播优化,这篇我们来聊聊 Android 端的优化。
作者|少阳 审校|泰一
优化前的盒马沉浸式短视频播放页面,体感和流畅度上与主流短视频 App 有明显差距。主要问题有播放封面闪屏、出流速度慢两个问题。所以优化的目标是解决盒马沉浸式短视频现有短板,与主流 App 的沉浸式短视频体验对齐,如抖音、手淘等。具体指标有:
首先我们来看一下优化前后与其他 App 的效果对比: https://v.youku.com/v_show/id_XNTgwMzAwNDQ0OA==.html
盒马最初为了保证进入画面时不是空白页面而增加了封面图显示,在播放时隐藏。从体感指标可以看出,即便是优化前,体感播放时间很短,只有 200ms 左右(不包含滑动过程)。由于滑动过程中,到视频正式播放有约 600ms 左右时间显示封面,随后又迅速显示播放画面,此时用户仍有强烈的屏幕闪烁和顿挫感,体验极差。 **解决思路:在滑动过程中就显示视频首帧画面,不再显示封面,则播放时不再产生顿挫感。**这里的优化需要结合出流慢问题一起优化。
服务端:服务端造成的出流速度慢,一般是文件大,网络链路差造成。可用 H.265 和 CDN 加速优化 客户端:客户端播放需要经历下载 -> 加载 + 解码 -> 渲染三个步骤,并且三个步骤为线性执行。所以在窗口播放画面前必然需要经过 1s 左右的准备工作。这里可以考虑提前执行下载 -> 加载 + 解码。
在优化前期,我们考虑了三种优化方案。
方案一:双播放器 + 预下载 优点:占内存小,思路简单。 缺点:优化力度有限,无法同时兼顾上滑和下滑。
方案二:自定义三播放器管理 + 预下载 优点:同时兼顾上下翻页,体验接近抖音。 缺点:播放器管理与回收实现复杂,容易错乱;占用内存高。
方案三:三播放器(基于 RecyclerView 的缓存机制实现)+ 预下载 优点:同时兼顾上下翻页,体验接近抖音,缓存机制由 RecyclerView 托管。 缺点:占用内存高,频繁创建和销毁播放器。
最终因为性价比因素,选择了第三个方案。
为了解决体感上的顿挫和出流慢的问题,采用多播放器结合 RecyclerView 方案进行改造,步骤如下:
mRecyclerView.setItemViewCacheSize(1); // 设置缓存数量
多播放器 + RecyclerView 原理图
三播放器让沉浸式短视频的体验大幅提高,主要解决了以下问题:
前面讲到了多播放器实现翻页秒播能力,在体验上有了非常大的改善,但由于预创建的播放器在加载时,同时需要下载视频文件,导致这里的下一个播放器准备好视频的时间会增加到 1s 左右。如果用户在播放器加载解码完成前滑至该视频,则会出现明显的黑屏,带来非常差的体验。
由于预加载的时间过长,且无法预知用户是否会快速滑动。这里需要提前进行下载和快速滑动检测。
关于预下载,我们首先要知道播放器内部播放过程。这里的本地代理是视频缓存机制实现的,具体参照下一章节。 播放器内部流程
这里,我们为了节约请求网络数据的过程,在播放之前提前下载视频的首帧片段,采用如下策略:
当用户快速翻页时(onPageSelected 调用之前又滑了一下),onPageSelected 不会触发,onPageRelease 会触发多次。在 onPageRelease 中判断 release position 与 current postion 的差值如果 > 1 则表示用户至少快速翻页 1 次,此时定义为快滑状态,应当停止预下载和播放器预加载。 当 onPageSelected 回调时,说明用户没有继续翻页,此时取消快滑状态。开始执行预下载和恢复播放器预加载。 预下载流程图
目前盒马使用的播放器为淘宝内部播放器。 播放器本身不存在文件缓存和预下载功能。在播放器重新创建后,即便是同一个视频也不会有文件缓存,需要重新下载。这里引入一个开源缓存框架 “com.danikula:videocache”。
播放器播放的地址代理给本地的缓存服务,缓存服务负责转发数据流的同时进行文件保存如: 视频地址为:https://****.mp4
。 本地代理地址为:http://127.0.0.1:8888
(假设端口号分配为 8888)。 代理后的地址为: 本地代理地址 + 视频地址(URL 编码)。 即:http://127.0.0.1:8888/https%3A%2F%2F****.mp4
关于多媒体的优化工作还有很多可以做。除了沉浸式秒播的场景外,我们还可以:
下一期我们将继续分享盒马 iOS / Android 端短视频续播的体验优化实践。
「视频云技术」你最值得关注的音视频技术公众号,每周推送来自阿里云一线的实践技术文章,在这里与音视频领域一流工程师交流切磋。公众号后台回复【技术】可加入阿里云视频云产品技术交流群,和业内大咖一起探讨音视频技术,获取更多行业最新信息。
|