喜欢研究视频的小伙伴,想必对 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/goldvideo; index index.html index.htm; autoindex on; } } 然后重启Nginx,此时访问如下地址: http://localhost:8000/h265player/demo/demo.html 能正常播放视频的话就表示启动成功了。 那如何在实际页面上展示呢?可以在页面的head标签里面增加如下内容: 然后需要创建一个p,作为播放器的容器 最后新建一个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。 四大模块则会完成播放器的显示、图像的展示、按钮的排布、数据的请求加载、视屏和音频的渲染及同步。 如果是对视频感兴趣的小伙伴可以来看看这个项目:https://github.com/goldvideo/h265player 最后,记得关注我哟,带你看更多有意思的好用工具。