关于h265格式视频的优缺点 h265格式视频怎么播放

01背景
随着视频内容的占比逐步扩大,直播、点播内容越来越多;在此基础上,视频传输的带宽成本也跟着上涨,降低成本为第一要务,首先要考虑的就是增加视频的压缩率 。而目前网络上多为H.264的视频,若将网络上的视频压缩为H.265 , 可以较H.264压缩率更高、节省更多成本 。
浏览器对编码的支持当前浏览器下我们常用的方式是Video标签和MSE的方式来进行视频播放,但是现阶段的浏览器基本都只支持H.264的解码和播放(浏览器内部完成了解码) 。
对于原生对于265几乎无支持能力,仅仅只有Apple的Safari浏览器的部分版本支持H.265解码播放 , 但是根本无法满足生产环境下的需求 。

关于h265格式视频的优缺点 h265格式视频怎么播放

文章插图
图1. 浏览器对于H.265播放的能力支持度
浏览器对于MSE的支持下图,为浏览器对于MSE的支持程度,可见MSE支持也不是很普遍 。
关于h265格式视频的优缺点 h265格式视频怎么播放

文章插图
图2. 浏览器对于MSE的能力支持度
02网页H265播放架构
目前需要解决两个问题:
  • 网页端的一个通用H.265视频播放问题 。
  • 网页端对于MSE不支持的问题解决方案 。
一个播放器的组成部分
关于h265格式视频的优缺点 h265格式视频怎么播放

文章插图
图3. 播放器的组成部分
  • 视频部分
对于H.265播放问题,我才用了WebAssembly的解决方案,通过C/C++开发的解码和解封装模块打包为wasm文件 。
如下图,大部分浏览器都已经支持了wasm 。
关于h265格式视频的优缺点 h265格式视频怎么播放

文章插图
图4. 浏览器对wasm的支持度
  • 音频部分
音频部分 , 采用了WebAudio方式去进行音频解码和播放 。
如下图,大部分浏览器都已经支持了webaudio 。
关于h265格式视频的优缺点 h265格式视频怎么播放

文章插图
图5. 浏览器对Webaudio的支持度
H265播放详细设计
  • 整体设计

关于h265格式视频的优缺点 h265格式视频怎么播放

文章插图
图6. H265播放整体设计图
主要分为:
  1. Js-Demuxer/Wasm-Demuxer
解封装器,分为JS部分和WASM(C/CPP)部分实现 , 应对不同的BOX 。
2. Wasm-Decoder
解码器,主要针对265帧的解码 。
3. WebAudio-Player
音频播放器,承担了AAC音频的播放 , 包括Seek、Play、Pause等行为 。
  • 具体流程
* 根据视频流`URL尾缀`和`协议`进行初始化BOX判断
* Fetch获取到视频流媒体开始下载
* 下载Chunk输入`Demuxer`进行Probe
* 探测到具体的`Mediainfo`后,开始进行帧数据读取
* 读取到音视频帧后喂给`Queue`* 视频帧喂给`wasm-decoder`进行解码,缓存一定的帧数据
* 视频帧交给OpenGL(WebGL)进行渲染
* 音频帧获取Body数据 , 根据samplerate和channel等数据组合ADTS头 。(如下图)
关于h265格式视频的优缺点 h265格式视频怎么播放

文章插图
图7. 音频帧获取Body数据
* 音频组包,ADTS头+Body 组音频包喂给Webaudio进行解码播放 。
  • 难点
* WebAudio不支持push队列播放的方式 , 我才用了交叉上下文的形式解决了此播放问题 。
* 视频下载过程中可能会阻塞浏览器其它行为,抢用资源,这部分需要采用worker异步下载的方式 。
* 视频Seek如何最快精准Seek操作,这部分我采用了类搜索引擎的方式,构建了多层帧索引进行检索后精准Seek 。


以上关于本文的内容,仅作参考!温馨提示:如遇健康、疾病相关的问题,请您及时就医或请专业人士给予相关指导!

「四川龙网」www.sichuanlong.com小编还为您精选了以下内容,希望对您有所帮助: