标签：

跟着视频编码技术的成长，对比H.264，H.265具有同等画质体积一半、画质更清晰细腻、编码效率更高档诸多优势。 但因版权等因素主流浏览器还不撑持H.265的解码，因此需要专门的插件实现解码。本项目基于Web Assembly(封装FFmpeg库)、JS解封装、Canvas投影以及AudioContext，是Web真个H265播放器的完整解决方案。

播放器显示效果如下：

播放器主要分为UI、Loader、数据措置惩罚惩罚、数据衬着四个部分和3个线程。一个是主线程，卖力界面控制、下载控制、数据流控制、音视频控制等成果；另一个是数据加载线程，卖力meta数据和视频分片数据的请求；还有一个是数据措置惩罚惩罚线程，即卖力视频数据的解封装和视频解码。

数据措置惩罚惩罚流程如下：

播放器的实现主要分为以下四个部分：

UI：播放器显示，包孕screen和controlbar两部分，screen包孕视频图像展示、弹窗、海报图等。controlbar包孕进度条、播放按钮、音量控制等组件。

Loader：卖力媒体数据的加载和解析，目前仅撑持HLS协议。通过worker实现数据的请求，加载完成后，按照设置缓存巨细，存储请求的ts数据，，当到达缓存上限后遏制加载。解码器从ts数据行列队伍获取ts后，Hls Loader会把请求过的ts释放，继续加载下一个ts，到达最大缓存限制后遏制加载

数据措置惩罚惩罚：主要包孕数据解封装和H265解码，解封装通过demuxe.js这个类库实现，H265解码通过ffmpeg打包生成的wasm软解来实现，cpu使用率较高。

数据衬着：包孕视屏衬着和音频衬着，视频衬着通过ImagePlayer把解码后的yuv数据直接衬着到canvas，音频通过AudioPlayer把AAC数据解码后进行音频播放，最后通过pts实现音视频的同步。同步计谋是以音频为参考，判断当前视频pts与获取到的音频pts的差值来调解视频显示时间来到达音视频同步。

本项目是一个果然的根本可用版本，并不含有具体的业务代码。业务可基于此项目进行具体业务实现。本项目代码：https://github.com/goldvideo

包罗三个相关项目：

demuxer: JS解封装TS/MP4工具，卖力TS码流的解封装与转封装

decoder_wasm: 基于开源ffmpeg的H.265解码器，结合WebAssembly技术，实现前端视频解码

h265player: H265播放器界面，包孕数据加载、控制器、播放流程与画面同步衬着等

基于Web Assembly的H265播放器实现