在浏览器也能享受H。265播放器的高清画面

　　喜欢研究视频的小伙伴，想必对H。265已经非常了解，作为ITUTVCEG继H。264之后所制定的新的视频编码标准，H。265可以在有限带宽下传输更高质量的网络视频，仅需原先的一半带宽即可播放相同质量的视频。
　　但是实际运用上，很多WEB浏览器对H。265的解码播放支持的不是很好，所以呢，今天TJ君就给大家分享一个完整的开源Web版H。265播放器完善方法。
　　此方法基于JS码流解封装、WebAssembly（FFmpeg）视频解码，利用Canvas画布投影、AudioContext播放音频。深入简出，比较适合感兴趣的小伙伴进行学习交流和实际开发应用。
　　首先下载项目源代码，然后进行工程打包：以下打包命令任选一npmrundev运行开发环境npmruntest运行测试环境npmrunbuild打包正式环境rollupc打包csj与esm版本
　　配置Nginxserver：server｛listen8000；location｛rootpathofgoldvideogoldvideo；indexindex。htmlindex。htm；autoindexon；｝｝
　　然后重启Nginx，此时访问如下地址：
　　http：localhost：8000h265playerdemodemo。html
　　能正常播放视频的话就表示启动成功了。
　　那如何在实际页面上展示呢？可以在页面的head标签里面增加如下内容：linkrelstylesheethref。。distgoldplayh265。cssstyle。playcontainer｛width：800px；height：500px；｝style
　　然后需要创建一个p，作为播放器的容器
　　最后新建一个GoldPlay实例对象，传入相应参数，就可以实现视频的播放播放器容器leteldoc。querySelector（。playcontainer）播放器参数letoptions｛视频播放地址sourceURL：http：localhost：8000h265playerdatavideo2playlist。m3u8，type：HLSwasm库地址libPath：http：localhost：8000h265playerdistlib，｝letplayernewGoldPlay（el，options｝
　　整个项目分为四大模块、三大线程
　　分别是：UI模块Loader模块数据处理模块数据渲染模块main主线程数据加载线程数据处理线程
　　其中主线程负责整体项目的界面、下载、数据流、音频、视频各方面的功能调度；数据加载线程，则对元数据进行各种请求；数据处理线程，则会完成最终的数据解封装和解码。
　　而解封和解码分别用到了demuxer模块通过JS实现视频数据的解封装，从而获取到独立的视频（H265）数据和音频（AAC）数据；通过ffmpeg实现H265数据的软解码，编译成wasm。
　　四大模块则会完成播放器的显示、图像的展示、按钮的排布、数据的请求加载、视屏和音频的渲染及同步。
　　如果是对视频感兴趣的小伙伴可以来看看这个项目：https：github。comgoldvideoh265player
　　最后，记得关注我哟，带你看更多有意思的好用工具。