标签：nat 视频播放器 ioc 根据 test 基于 css ref ocs
h265player开发
https://github.com/goldvideo/h265player
随着视频编码技术的发展，相比H.264, H.265同等画质体积仅为一半、带宽占用省一半、画质更细腻等诸多优势。 但Web浏览器还不支持H.265的解码播放，因此基于Web Assembly(封装FFmpeg)、JS解封装、Canvas投影以及AudioContext实现Web端的H265播放。
支持主要浏览器及其版本如下：
Chrome（>57） Safari (>11) Firefox (>52)
本项目是一个公开的基础可用版本，并不含有具体的业务代码。业务可基于此项目进行具体业务实现。
#创建根目录
* mkdir goldvideo
* cd goldvideo
# 下载h265player源码, 创建h265player目录
* git clone https://github.com/goldvideo/h265player.git
* cd h265player
# 安装依赖
* npm install
#以下打包命令任选一
* npm run dev #运行开发环境
* npm run test #运行测试环境
* npm run build #打包正式环境
* rollup -c #打包csj与esm版本
server {
listen 8000;
location / {
root <path of goldvideo>/goldvideo;
index index.html index.htm;
autoindex on;
}
}
重启nginx并访问demo地址，就能看到播放器画面，如果可以能正常播放视频时就表示成功了。http://localhost:8000/h265player/demo/demo.html
如果遇到错误，请通过检查路径配置以及资源是否加载完成等。您也可以给我们留言反馈问题，我们将尽快回复。
以上就完成了基本安装，想了解更多详情，可以接着往下看。
#可以直接npm安装构建后的文件，快速运行DEMO
* npm i goldvideo-player
具体参见 goldvideo example
下载 demuxer 库源码 或者 从 npm 安装 (https://www.npmjs.com/package/demuxer)
* cd goldvideo
* git clone https://github.com/goldvideo/demuxer.git
* cd demuxer
* npm install
# 打包模块，详情请查看demuxer项目里面的package.json文件
* npm install --global rollup
# 构建demuxer模块
* rollup -c ./rollup.config.js --environment BUILD_MODE:production
* cd h265player
# 从本地安装demuxer，调用本地构建的库
* npm install ../demuxer
decoder_wasm库之前已经编译并复制到 h265player/dist/lib/目录下。你也可以自己编译并替换libffmpeg.js与libffmpeg.wasm文件。
#如果想看源码和编译过程，可以查看decoder_wasm模块源码。
* cd goldvideo
* git clone http://github.com/goldvideo/decoder_wasm.git
* cd decoder_wasm
wasm安装略微复杂，详细查看README文件
├─goldvideo│ ├─demuxer│ ├─h265player│ ├─decoder_wasm│ ├─example播放器主要分为UI、Loader、数据处理、数据渲染四个部分和3个线程。一个是主线程，包括界面控制、下载控制、数据流控制、音视频控制等功能；数据加载线程，完成元数据和数据片段的请求；数据处理线程，完成数据解封装和解码。
通过JS实现了视频数据的解封装，从而获取到独立的视频（H265）数据和音频（AAC）数据。详细信息请参考demuxer模块：https://github.com/goldvideo/demuxer。
通过ffmpeg实现H265数据的软解码，如果要在浏览器中调用ffmpeg，需要把ffmpeg编译成wasm进行调用，具体ffmpeg编译成wasm过程，可参考decoder_wasm
通过yuv-canvas实现YUV数据渲染，ImagePlayer中会有一个队列存储YUV数据，并计算当前yuv数据的时间长度，大于等于readybufferLength的值时，会触发ImagePlayerReady事件。当音视频播放器都处于ready状态时，H265播放器触发dataReady事件，开始调用play方法进行视频播放。
Audio Player的实现基于Web Audio API, 包括AAC音频流的解码与PCM数据的播放。
Audio Context的部分音频节点提供了playbackRate属性以实现倍速播放的功能，但是音频在倍速播放的同时，音频的音调（pitch）也同步地升高/降低。
为实现变速不变调，项目中，我们使用了一个音频数据处理库SoundTouchJS，将处理过的变速不变调的音频数据提供给ScriptProcessorNode。
<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 class="play-container"></div>
//播放器容器
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组件请参考文档 组件添加componentadd
https://goldvideo.github.io/h265player/API/index.html
标签：nat 视频播放器 ioc 根据 test 基于 css ref ocs
原文地址：https://www.cnblogs.com/wujianming-110117/p/13291396.html
