视频秒播优化实践

c8e27fcf0ee3ce2ae5e994c1e7a1921e.jpeg

464043fe04fcea2a1481634f5a60983a.gif

本文字数:2259

预计阅读时间:10分钟

795a4d64a79dafb74619090209f75082.png

视频起播时间,即首帧时间,是视频类应用的一个重要核心指标,也是影响用户观看体验的核心因素之一。如果视频要加载很久才能开始播放,用户放弃播放甚至离开 App 的概率都会增加。

视频秒播是指用户在起播时平滑播放,没有首屏的顿感,用户几乎感知不到有首帧时间的存在。

我们把从开始播放到视频首帧画面展现出来这个链路的耗时称为首帧耗时,想要优化首帧耗时,达到秒播效果,我们需要知道这个链路上,都进行了哪些步骤,然后找到其耗时点,进行针对性优化。不同的业务场景下,播放行为和播控策略不尽相同,最常见的就是冷启动场景、短视频场景、页面切换场景以及长视频场景。本文主要讨论具体业务场景下的优化实践,我们可以根据场景的特性,采取不同的优化策略。

01

通用首帧优化方法

6fa6f4cacb80c0ee92fba951ed8e8940.png

1.1提前获取播放地址

视频播放的第一步就是获取视频资源的播放链接,通常而言,视频资源会有唯一标识video id,在点播的服务端会有一个根据video id获取播放链接的服务,如果将播放地址随feed流一起下发,或者播放前提前请求,则省去了客户端的一次网络请求耗时。

1.2预加载

预加载是一种常见的首帧优化措施,我们可以提前下载部分视频数据以达到快速起播的目的。但是什么时候去预加载、预加载多少、并行预加载数量等都是实际需要考虑的问题。

首先是预加载时机的问题,预加载时机如果太晚,几乎没有效果;如果太早,可能会跟当前正在播放的视频抢夺宝贵的带宽资源,甚至造成播放卡顿。我们必须要遵守一个原则:视频预加载绝对不能影响到当前视频的播放。一个简单的方案就是,当前视频缓冲到一定比例,再进行下个视频的预加载。当然还有更加细致的方案,根据当前播放视频的可用缓存、当前网络的下载速度、当前视频的码率以及即将预加载视频的码率、并行预加载数量,通过这些数据我们能够构建一个模型去预测接下来视频播放的卡顿状况,如果大概率是不会发生卡顿,则可以开启预加载,反之则不启用或者暂停预加载。

另外一个问题,预加载多少,直观认识,至少得保证首帧能加载出来。一个粗略的估算方法是moov大小加上视频的平均码率 * 预加载时长,这样就可以通过服务端下发moov头大小及视频的平均码率,然后在App端上通过实验去调整预加载时长参数,进而调整预加载大小。

1.3预渲染

通过预加载只能够将网络请求的耗时消除掉,但播放器还是需要经历解复用、解码、渲染的步骤,在中低端机器有200毫秒以上的耗时。如果能够将视频的首帧提前渲染好而不播放,将会缩减掉这部分的耗时。而预渲染就是提前将视频的首帧渲染出来的技术。

具体来说,预渲染会提前解码出视频首帧,并且将首帧渲染出来,但是这个过程中音频不会播放出来。在滑动播放场景,当滑动视频卡片时,就已经开始启动预渲染,在卡片滑动过程中,视频的首帧很可能就已经通过预渲染加载出来,这样当卡片滑到中央时,则直接启动播放,这时候用户基本上感受不到视频的加载。

02

分场景优化实践

2.1冷启动场景

冷启动场景下能做的优化空间较小,主要两个思路:

一、在App启动最早的时候(Application创建时),开始异步初始化播放器组件,让播放器尽早Ready;

二、在不影响体验的情况下,选择码率低的档位起播。

2.2短视频滑动场景

短视频沉浸式滑动播放场景,可以采取双播放器实例加载复用的策略,播放当前视频的同时,第二个播放器加载即将播放的视频,渲染首帧后暂停,列表其他视频进行预加载(预加载是纯下载的过程,无渲染逻辑)。

另外,还有滑动过程中调播的优化,在滑动松手 scrollViewWillEndDragging时就可以计算出待播放的视频,无需等到滑动停止scrollViewDidEndDragging,手指抬起就开启播放,可节省300毫秒左右的耗时。

在增加了下一个视频的 “预播” 机制后,用户滑到下个视频时,可以立即从首帧的暂停状态恢复为播放,不再需要预先显示封面图,也提高了播放体感上的速度。除视频以外的业务数据的渲染,可以放在用户滑动翻页的过程中进行。

基本流程如下图:

58b53484b60e433ae5e75ac67012d5bd.jpeg
preload

2.3页面跳转场景

进入新页面时,总需要先请求播放数据及业务数据,然后再加载播放视频,这个过程会让用户感知到等待时长。播放页面之间的跳转,有两种情况:

一、播放中视频的跳转;

二、未起播视频的跳转。

针对情况一的优化策略为:无缝切换,不打断当前视频的播放,实现播放器在两个页面间的转移,真正做到“零耗时”体验。

针对情况二的优化策略为:在跳到新页面时需要前页面传入 videoUrl,提前进行播放,同时进行业务数据的请求和渲染。这样保证了视频与业务数据的加载可以异步执行,由于用户主要目光是集中在视频上的,所以从用户的视角直观的来看,页面加载速度变快了。

2.4长视频场景

长视频场景下可做的优化,一个是关键帧起播。长视频一般是从播放进度处起播,通常的实现方式是seek到历史进度前面最近的一个关键帧,然后把视频帧塞给解码器,在解码器中做丢帧处理,直到 pts 到了指定的历史进度。假设这个视频的码率是 2.5Mbps,视频的 GOP 大小为 5s,那么精准 seek 的起播,最坏情况需要额外下载 2.5 * 5=12.5Mb 的数据。如果我们只在关键帧位置起播(非精准 seek),则可以避免这些额外数据的下载,从而缩短首帧的耗时。

另一个是连播预加载,连播场景下是可以定位用户接下来要播放的视频的,可以采取提前获取播放地址,并进行预加载的策略,提高连播视频的起播速度。

03

总结与展望

本文介绍了通用的几种首帧优化方法,以及各实际业务场景中的不同优化策略,我们在项目开发中也在持续优化实践。客户端受网络环境、高中低各种机型、用户使用习惯等影响,无论是预加载、预渲染策略,还是网络请求策略等各种策略,仍有非常多需要精细化的去优化的点,才能让尽量多的用户都能获得更好的播放体验。

73fbbd26e3494b8ba50be8636ef78e2b.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/811644.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

采集某新闻网资讯网站保存PDF

网址:融资总额近3亿美元、药明康德押注,这家抗衰老明星公司有何过人之处-36氪 想要抓取文章内容,但是找不到啊,可能是文字格式的问题,也可能文章内容进行了加密。 在元素中查看,window.initialState返回的就…

QQ 邮箱使用 SMTP 发送邮件报错:550 The From header is missing or invalid

文章目录 场景描述问题排查根据提示查看原因查看封装的 message 个人简介 场景描述 QQ 邮箱使用 SMTP 发送邮件报错:550 The From header is missing or invalid: 失败原因:(550, bThe "From" header is missing or invalid. Ple…

数据仓库—主数据管理

在当今信息爆炸的时代,数据已经成为企业最重要的资产之一。然而,许多企业在管理数据时面临着挑战,其中之一就是处理不同系统中的数据不一致问题。主数据管理(Master Data Management,MDM)就是为了解决这一问…

JVM修炼之路【11】- 解决内存溢出、内存泄漏 以及相关案例

前面的10篇 都是基础的知识,包括类加载的过程 类加载的细节,jvm内存模型 垃圾回收 等等, 这一篇我们开始实战了解一下 各种疑难杂症:怎么监控 怎么发现 怎么解决 内存溢出 内存泄漏 这两个概念在垃圾回收器里面已经讲过了&#…

云原生(八)、Kubernetes基础(一)

K8S 基础 # 获取登录令牌 kubectl create token admin --namespace kubernetes-dashboard1、 NameSpace Kubernetes 启动时会创建四个初始名字空间 default:Kubernetes 包含这个名字空间,以便于你无需创建新的名字空间即可开始使用新集群。 kube-node-lease: 该…

【学习】VScode修改侧边栏大小。

侧边栏不可以直接更改,所以先缩放整体界面,再改变工作区大小。 缩放整体界面: Ctrl 或 Ctrl - 。 也可以直接使用如下代码: Ctrl Shifit p 打开搜索 settings ,选择下图第一个。 然后嵌入如下代码&#xff1a…

股票价格预测 | Python使用GAN预测股票价格

文章目录 效果一览文章概述代码设计效果一览 文章概述 生成对抗网络(GAN)是一种强大的机器学习模型,用于生成以假乱真的数据。然而,使用GAN来预测股票价格可能会面临以下挑战: 数据可用性:GAN需要大量的数据进行训练,以便生成准确的输出。对于股票价格预测,历史股票价…

前端响应式布局方式及其优缺点大全

前端响应式布局方式及其优缺点大全 1. 什么是响应式布局2. 响应式布局方式有哪些1. 媒体查询布局2. Flex弹性布局3. 百分比布局4. vw/vh响应式布局5. rem响应式布局 3. 结语 1. 什么是响应式布局 对于不同宽度和高度的屏幕,通过一套代码使页面样式根据屏幕尺寸自适应…

OpenHarmony开发——Makefile方式组织编译的库移植

以yxml库为例,其移植过程如下文所示。 源码获取 从仓库获取yxml源码,其目录结构如下表: 表1 源码目录结构 名称描述yxml/bench/benchmark相关代码yxml/test/测试输入输出文件,及测试脚本yxml/Makefile编译组织文件yxml/.gitat…

基于机器学习的识别准确率不高问题

识别准确率不高,可能存在以下几个方面的原因: 数据质量:数据集中可能存在错误、不完整或与实际情况偏离的情况。数据清洗和预处理是解决这个问题的关键。 数据不平衡:某些类别的样本过多,而其他类别的样本过少&#x…

sklearn的LabelEncoder 遇到新值的解决办法

问题:sklearn的LabelEncoder函数遇到新值报错 sklearn的LabelEncoder函数,在fit结束后,对dataframe数据进行transform的时候,如果遇到了没在fit时编码规则里的新值,会出现代码报错,不同于spark的LabelEnco…

SQL中的INNER JOIN与笛卡尔积:区别与实例详解

SQL中的INNER JOIN与笛卡尔积:区别与实例详解 引言1. 笛卡尔积(Cartesian Product)定义与概念结果特点 2. INNER JOIN定义与概念结果特点 3. 区别与比较4. 实例演示5. 总结 引言 在SQL查询中,INNER JOIN和笛卡尔积(Car…

【示例】Mybatis-标签学习+Mybatis工作流程

前言 本文主要学习Mybatis相关标签的使用及Mybatis的工作流程。 文中用到的示例,代码存储位置: GitHubhttps://github.com/Web-Learn-GSF/Java_Learn_Examples父工程Java_Framework_Mybatis 基础 示例 | 初始Mybatis 数据库初始化 -- 建表 CREATE…

深入探索自然语言处理:用Python和BERT构建文本分类模型

在当今的信息时代,自然语言处理(NLP)技术正在改变我们理解和处理自然语言的方式。NLP使计算机能够解读、理解和生成人类语言,从而在多种应用中实现自动化,如聊天机器人、情感分析和文本分类。本文将详细介绍如何使用Py…

Elasticsearch安装、启动异常问题总结

安装es、kibana、ik分词器可参考:http://t.csdnimg.cn/59mEG 1. 内核过低 我们使⽤的是 centos6 ,其 linux 内核版本为 2.6 。⽽ Elasticsearch 的插件要求⾄少 3.5 以上版 本。不过没关系,我们禁 ⽤这个插件即可。 修改 elasticsearch.ym…

俄罗斯游戏市场分析与海外营销策略洞察

俄罗斯作为全球十大经济体之一,拥有广阔的游戏市场。以下是对俄罗斯游戏市场的一些关键要素的分析: 人口基础:俄罗斯人口众多,游戏用户群体庞大。根据统计数据,俄罗斯的游戏人口超过7000万,占其总人口的相当…

spring boot整合Redis监听数据变化

一、前言 Redis提供了数据变化的通知事件,可以实时监测key和value的变化,客户端可以通过订阅相关的channel来接收这些通知事件,然后做相应的自定义处理,详细的介绍可以参考官方文档Redis keyspace notifications | Docs 使用Red…

使用element-plus中的表单验证

标签页代码如下&#xff1a; // 注意&#xff1a;el-form中的数据绑定不可以用v-model&#xff0c;要使用:model <el-form ref"ruleFormRef" :rules"rules" :model"userTemp" label-width"80px"><el-row :gutter"20&qu…

一次http访问超时服务器端调试

问题&#xff1a;http访问服务器时没有返回&#xff0c;没有超时&#xff0c;一直在阻塞 处理过程&#xff1a;telnet端口能连上&#xff0c;服务端程序也不存在处理时间过长的情况。 说明tcp连接没问题。推测是客户端连接后再发起请求&#xff0c;服务端阻塞了。因为很多客户…

关于 TDengine 的时区(timeZone)问题

背景 在学习SagooIOT物联网平台使用docker部署TDengine时序数据库&#xff0c;根据时间戳&#xff08;timestamp&#xff09;ts查询上报设备数据时 发现结果跟查询条件不匹配。查询问题原因竟然是timezone时区设置问题。 查询数据结果&#xff1a; 查看容器时区&#xff1a; …