大家好，我是TJ

关注TJ君，回复“武功秘籍”免费获取计算机宝典书籍

喜欢研究视频的小伙伴，想必对H.265已经非常了解，作为ITU-T VCEG继H.264之后所制定的新的视频编码标准，H.265可以在有限带宽下传输更高质量的网络视频，仅需原先的一半带宽即可播放相同质量的视频。

但是实际运用上，很多WEB浏览器对H.265的解码播放支持的不是很好，所以呢，今天TJ君就给大家分享一个完整的开源Web版H.265播放器完善方法。

此方法基于JS码流解封装、WebAssembly(FFmpeg)视频解码，利用Canvas画布投影、AudioContext播放音频。深入简出，比较适合感兴趣的小伙伴进行学习交流和实际开发应用。

首先下载项目源代码，然后进行工程打包：

# 以下打包命令任选一
* npm run dev    # 运行开发环境
* npm run test   # 运行测试环境
* npm run build  # 打包正式环境
* rollup -c      # 打包csj与esm版本

配置Nginx server：

server {listen       8000;location / {root   <path of goldvideo>/goldvideo;index  index.html index.htm;autoindex on;}
}

然后重启Nginx，此时访问如下地址：

http://localhost:8000/h265player/demo/demo.html

能正常播放视频的话就表示启动成功了。

那如何在实际页面上展示呢？可以在页面的head标签里面增加如下内容：

<link rel="stylesheet" href="../dist/goldplay-h265.css">
<script src="../dist/goldplay-h265-sdk.js"></script>
<style>.play-container {width: 800px;height: 500px;}
</style>

然后需要创建一个div，作为播放器的容器

<div class="play-container"></div>

最后新建一个GoldPlay实例对象，传入相应参数，就可以实现视频的播放

//播放器容器
let el = doc.querySelector('.play-container')
//播放器参数
let options = {// 视频播放地址sourceURL: 'http://localhost:8000/h265player/data/video2/playlist.m3u8',type: 'HLS'// wasm库地址libPath: 'http://localhost:8000/h265player/dist/lib',
}
let player = new GoldPlay(el, options}

整个项目分为四大模块、三大线程

分别是：

• UI模块

• Loader模块

• 数据处理模块

• 数据渲染模块

• main主线程

• 数据加载线程

• 数据处理线程

其中主线程负责整体项目的界面、下载、数据流、音频、视频各方面的功能调度；数据加载线程，则对元数据进行各种请求；数据处理线程，则会完成最终的数据解封装和解码。

而解封和解码分别用到了demuxer模块通过JS实现视频数据的解封装，从而获取到独立的视频（H265）数据和音频（AAC）数据；通过ffmpeg实现H265数据的软解码，编译成wasm。

四大模块则会完成播放器的显示、图像的展示、按钮的排布、数据的请求加载、视屏和音频的渲染及同步。

如果是对视频感兴趣的小伙伴可以来看看这个项目，最后给出一个效果图看下~

点击下方卡片，关注公众号“TJ君”

回复“H.265”，获取仓库地址

关注我，每天了解一个牛x、好用、有趣的东东

往期推荐

吊炸天的个性化卡片式标签页插件，谁用谁知道！

偷走不经意流逝的时光，摸鱼神器：神偷

小巧但强大，浏览器开发常用工具插件一枚

无暗箱操作，无后台，无后门，这款年会抽奖程序真不错

程序员鼓励师插件？

File Expander，让你能在IDEA里直接查阅Jar包压缩包内容！