Jessibuca H5直播流播放器

Jessibuca H5直播流播放器是一款开源的纯 H5 直播流播放器，通过 emscripten 将音视频解码库编译成 js（wasm）运行于浏览器之中。：兼容几乎所有浏览器，可以运行在 PC、手机、微信等平台中，无需额外安装插件，方便用户在不同设备和环境下使用。支持解码 H.264 视频（baseline、main、high profile 全支持，支持解码 B 帧视频）。

使用教程

Jessibuca H5直播流播放器新手指南

丰富的视频格式支持：

支持解码 H.264 视频（baseline、main、high profile 全支持，支持解码 B 帧视频）。

支持解码 H.265 视频（flv id == 12）。

支持解码 AAC 音频（lc、he、hev2 profile 全支持）以及 PCMA 音频和 PCMU 音频格式。

播放控制功能：

可设置播放缓冲区时长，能实现 0 缓冲极限低延迟，但网络抖动可能会造成卡顿现象；支持智能不花屏丢帧，长时间播放绝不累积延迟。

自带控制条，可以通过配置显示或隐藏底部控制条，并且支持音量调节（0 - 1 的音量范围）。

多实例与性能优化：支持创建多个播放实例，利用 web worker 多核解码，提升多画面播放性能。

安全的传输支持：支持 https/wss 加密视频传输，保证视频内容传输安全。

其他特性：支持多种视频缩放模式，如填充、等比、等比缩放 3 种模式；支持视频录制（基于 mediarecorder 录制 mp4 和 webm 格式的视频）。

使用攻略

准备工作：

获取文件：从官方渠道（如官方网站或官方提供的下载链接）获取最新的 Jessibuca 文件，其中包含 jessibuca.js、jessibuca.d.ts、decoder.js、decoder.wasm 这 4 个重要文件。

确定项目环境：如果是在网页项目中使用，确保项目的开发环境能够正确引入 JavaScript 文件；如果是在移动端应用中集成，需要根据应用的开发框架和技术选型进行相应的配置。

文件引入与配置：

网页项目：

将获取的 4 个文件放置在项目的合适位置。可以根据项目结构，将它们放在 public 文件夹下（如果项目没有 public 文件夹，也可以放在 static 文件夹中）。

在网页的 标签中引入 jessibuca.js 文件，以便在页面中能够使用该播放器的功能。例如： 。

如果文件的存放地址发生了变化，需要修改 decoder.js 的路径配置。通常在 jessibuca.js 文件中会有一个配置项指定 decoder.js 的路径，确保该路径正确指向实际的 decoder.js 文件位置。

移动端应用（以 Android 为例）：

将 jessibuca.js 和 decoder.js 等文件添加到项目的 assets 文件夹中（如果项目有特定的资源文件夹，也可以根据项目要求放置）。

在应用的代码中，使用合适的方法加载 JavaScript 文件。例如，在 Android 中可以使用 WebView 来加载网页，并通过 WebView 的 loadUrl 方法加载本地的 jessibuca.js 文件。

播放器初始化：

创建播放器容器：在网页的 HTML 代码中，创建一个用于放置播放器的容器元素，例如

。在移动端应用中，根据应用的界面布局，创建一个对应的视图容器用于显示播放器。

 

初始化 Jessibuca 播放器：在 JavaScript 代码中，使用 new window.Jessibuca({...}) 来创建一个播放器实例，并传入相应的配置参数。例如：

javascript

复制

let playerContainer = document.getElementById('player-container');

let jessibucaPlayer = new window.Jessibuca({

container: playerContainer,

videobuffer: 0.2, // 缓存时长

isresize: false,

loadingtext: '加载中',

debug: true,

showbandwidth: true,

operatebtns: {

fullscreen: true,

screenshot: true,

play: true,

audio: true,

},

forcenooffscreen: true,

isnotmute: false,

});

视频播放：

设置视频源：获取要播放的直播流地址，并将其设置到播放器的 play 方法中。例如：jessibucaPlayer.play("http://your-live-stream-url");。确保直播流地址的有效性和可访问性。

功能：

1、支持解码H.264视频(Baseline, Main, High Profile全支持，支持解码B帧视频)

2、支持解码H.265视频（flv id == 12）

3、支持解码AAC音频(LC,HE,HEv2 Profile全支持)

4、支持解码MP3音频以及Speex音频格式

5、可设置播放缓冲区时长，可设置0缓冲极限低延迟（网络抖动会造成卡顿现象）

6、支持智能不花屏丢帧，长时间播放绝不累积延迟。

7、可创建多个播放实例

8、程序精简，经CDN加速，GZIP压缩（实际下载500k），加载速度更快

9、同时支持http-flv和websocket-flv协议以及websocket-raw私有协议（裸数据，传输量更小，需要搭配Monibuca服务器） 注：以http-flv请求时，存在跨域请求的问题，需要设置access-control-allow-origin, websocket-flv默认不存在此问题

10、支持HTTPS/WSS加密视频传输，保证视频内容传输安全

11、手机浏览器内打开视频不会变成全屏播放

操作介绍

-支持 m3u8/HLS 播放;

-支持 HTTP-FLV/WS-FLV 播放;

-支持 H265 播放;

-支持直播和点播播放;

-支持全屏显示;

-支持重连播放；

1.2 使用与下载：

下载路径：

使用：看下载后的README.md

https://gitee.com/tumao2/EasyPlayer.js?_from=gitee_search

2.jessibuca

Jessibuca是一款开源的纯H5直播流播放器，通过Emscripten将音视频解码库编译成Js（wasm)运行于浏览器之中。兼容几乎所有浏览器，可以运行在PC、手机、微信中，无需额外安装插件。

2.1 功能说明：

支持解码H.264视频(Baseline, Main, High Profile全支持，支持解码B帧视频)

支持解码H.265视频（flv id == 12）

支持解码AAC音频(LC,HE,HEv2 Profile全支持)

支持解码PCMA音频以及PCMU音频格式

可设置播放缓冲区时长，可设置0缓冲极限低延迟（网络抖动会造成卡顿现象）

支持智能不花屏丢帧，长时间播放绝不累积延迟。

可创建多个播放实例

程序精简，经CDN加速，GZIP压缩（实际下载500k），加载速度更快

同时支持http-flv和websocket-flv协议以及websocket-raw私有协议（裸数据，传输量更小，需要搭配Monibuca服务器） 注：以http-flv请求时，存在跨域请求的问题，需要设置access-control-allow-origin, websocket-flv默认不存在此问题

支持HTTPS/WSS加密视频传输，保证视频内容传输安全

手机浏览器内打开视频不会变成全屏播放

手机浏览器内打开长时间不会息屏

支持解码8kHz PCM_ALAW, PCM_MULAW的G.711音频

支持填充，等比，等比缩放 3中视频缩放模式

自带底部UI,支持原子化配置是否显示(播放/暂停、音量调节、截屏、录制/暂停录制、全屏/取消全屏、流量显示)

自带底部UI适配H5移动端，并支持web端全屏

支持OffscreenCanvas，提升Webgl渲染性能

支持WebWorker多核解码，提升多画面播放性能

支持WebCodecs硬件解码API

支持WebCodecs硬件解码配置通过video标签渲染或者canvas标签渲染画面

支持MediaSourceExtensions 硬件解码

支持WebCodecs和MediaSourceExtensions硬解码失败的情况下自动切换到wasm软解码

支持同一个播放地址视频分辨率发生变化的时候视频不花屏(仅软解码)

支持同一个播放地址音频采样和编码发生改变的时候音频自动切换

支持视频录制(WebM、MP4格式)，(MP4格式支持在IOS VLC播放器显示时长播放，Android VLC播放器无法显示时长播放,PC VLC播放器可以播放)

3.skeyewebplayer

永久免费H5直播点播播放器，支持FLV、HLS、WS-FLV、WS-RTSP、HEVC/H265、WEBRTC 超低延迟，高效稳定。

3.1 功能说明：

具有 H.264 + AAC 编解码器播放功能

支持Websocket-RTSP播放;

支持 m3u8(HLS) 播放;

支持 HTTP-FLV/WS-FLV 播放;

支持 HEVC/H265 播放;

支持直播和点播播放;

支持全屏显示;

支持重连播放；

HTTP FLV RTSP低延迟实时流播放 (HLS延时稍大一点，大概在5s—10s左右)

WS-FLV 通过 WebSocket 实时流播放

支持全屏或比例显示;

支持播放器快照截图;

支持Android、iOS播放;

Jessibuca目录结构：

obj 存放emscripten编译好的各种解码库的字节码库

public 存放编译输出的js和wasm文件以及renderer.js

thirdparty 各种第三方解码库的代码（已修改）和编译脚本

新功能

支持解码H.264视频(Baseline, Main, High Profile全支持，支持解码B帧视频)

支持解码H.265视频（flv id == 12）

支持enhanced-rtmpH265格式。

支持解码AAC音频(LC,HE,HEv2 Profile全支持)

支持解码PCMA音频以及PCMU音频格式

可设置播放缓冲区时长，可设置0缓冲极限低延迟（网络抖动会造成卡顿现象）

支持WASM智能不花屏丢帧，前台长时间播放绝不累积延迟。

可创建多个播放实例

程序精简，经CDN加速，GZIP压缩（实际下载500k），加载速度更快

同时支持http-flv和websocket-flv协议以及websocket-raw私有协议（裸数据，传输量更小，需要搭配Monibuca服务器） 注：以http-flv请求时，存在跨域请求的问题，需要设置access-control-allow-origin, websocket-flv默认不存在此问题

支持HTTPS/WSS加密视频传输，保证视频内容传输安全

手机浏览器内打开视频不会变成全屏播放

手机浏览器内打开长时间不会息屏

支持解码8kHz PCM_ALAW, PCM_MULAW的G.711音频

支持填充，等比，等比缩放 3中视频缩放模式

支持0，90，180，270度画面旋转

自带底部UI,支持原子化配置是否显示(播放/暂停、音量调节、截屏、录制/暂停录制、全屏/取消全屏、流量显示)

自带底部UI适配H5移动端，并支持web端全屏(操作栏适配横屏)

自带底部UI支持设置成自动隐藏，只有鼠标聚焦到播放器内部才会显示，移除之后，会消失。

支持键盘快捷键

支持OffscreenCanvas，提升Webgl渲染性能

支持WebWorker多核解码，提升多画面播放性能

支持WebCodecs硬件解码API

支持WebCodecs硬件解码配置通过video标签渲染或者canvas标签渲染画面

支持MediaSourceExtensions 硬件解码

支持WebCodecs和MediaSourceExtensions硬解码失败的情况下自动切换到wasm软解码

支持同一个播放地址视频分辨率发生变化的时候视频不花屏(仅软解码)

支持同一个播放地址音频采样和编码发生改变的时候音频自动切换

支持视频录制(WebM、MP4格式[video/webm;codecs=h264])，(MP4格式支持在IOS VLC播放器显示时长播放，Android VLC播放器无法显示时长播放,PC VLC播放器可以播放)

PRO版本

支持开源版几乎所有的方法和事件，支持无缝升级到PRO版本。

wasm解码模式下默认work线程中发起Http-Flv、WS请求，减少主线程往worker线程传递数据，提升性能。

360浏览器可播放使用MSE加速解码H265。

最新edge可使用MSE加速解码H265。

最新chrome 107版本及以上支持使用Webcodecs硬件加速解码播放H265。

支持WASM切换到后台播放，长时间播放绝不累积延迟。

支持MSE硬解码智能不花屏丢帧，长时间播放绝不累积延迟。

支持MSE切换到后台播放，长时间播放绝不累积延迟。

支持Webcodecs硬解码智能不花屏丢帧，长时间播放绝不累积延迟。

支持Webcodecs切换到后台播放，长时间播放绝不累积延迟。

支持检测网络延迟，并可以设置延迟达到一定时间段重新触发播放逻辑。

支持只播放直播流或者TF卡流中的单一视频或者单一音频数据。

支持语音通讯：支持设置采集PCM/G711A/G711U格式的数据、支持设置采样率16000Hz或8000Hz，支持设置采样精度32bits或者16bits或者8bits，支持设置单通道或双通道。

支持UI控件语音通讯交互按钮，提供事件回调，方便全屏模式下操作。

支持音视频流（TF卡流）的倍数播放，支持2/4/8/16/32/64倍数控制，支持设置多少倍之后只解码I帧播放。

支持UI控件音视频流（TF卡流）的底部24小时进度条，并支持精度控制，提供事件回调，方便全屏模式下操作。

支持TF卡流暂停(不断开连接，停止渲染，方便业务通过接口方式通知服务器不推流，不会触发页面渲染超时)和恢复播放。

支持UI控件PTZ操作盘，提供事件回调，方便全屏模式下操作。

支持UI控件直接关闭播放器，并有事件通知，方便在多屏模式下，对直接对某个播放页面进行关闭操作。

支持UI控件流分辨率配置和展示，提供事件回调，方便在全屏模型下操作。

支持UI控件电子放大，提供事件回调，方便在全屏模型下操作。

支持UI控件在TF卡流配置不断流暂停，并且提供事件监听，方便上层去配合服务器端停止发送流，实现不断流的暂停功能。

支持UI控件切换显示模式(拉伸、缩放、正常)

支持HLS H264格式协议。

支持HLS H265格式协议。

支持镜像旋转(水平+垂直)。

支持加密私有协议流 (M7S服务器)播放。

支持webrtc标准流播放。

支持webrtc(zlm服务器播放地址)流播放。

支持webrtc(srs服务器播放地址)流录制。

支持webrtc(阿里云播放地址)流播放。

支持WebTransport协议播放。

支持H264裸流播放。

支持H265裸流播放。

支持Fmp4 H264格式播放。

支持Fmp4 H265格式播放。

支持MPEG2-TS H264格式播放。

支持MPEG2-TS H265格式播放。

支持MSE硬解码之后通过canvas渲染播放。

支持WASM解码之后通过video渲染播放。

支持WCS硬解码之后通过canvas webgl2渲染播放。

支持视频录制MP4(MPEG-4)格式,支持H264、H265格式，录制的视频支持seek，快进，显示总时长等（仅支持视频录制，暂不支持音频）。

支持视频录制Flv格式，支持H264、H265格式，录制的视频支持seek，快进，显示总时长等（vlc播放器）。

支持播放器自定义水印,支持播放器播放过程中，显示水印，例如公司名称，公司logo等。

支持截图加自定义水印,支持调用截图接口的时候，添加自定义水印，例如公司名称，公司logo等。

支持全屏水印，支持在播放窗口下，显示水印，例如公司名称，公司logo等。

支持SIMD软解码加速(使用Chrome/Edge 91, Firefox89及之后正式提供的SIMD指令集加速解码, 在1080P以上分辨率带来100%-300%的性能提升)。

支持播放过程中动态切换分辨率。

支持webgpu渲染canvas （需要chrome canary 版本，然后设置chrome://flags/#enable-unsafe-webgpu 打开） 最新版本chrome（>=113）默认支持。

支持抛出SEI数据，方便上层业务进行二次开发。

支持NxN路UI多屏播放(支持1x1,2x2,3x3,4x4),支持不规则多屏播放(3-1，4-1)。

支持国标SM4加密流播放。

支持XOR加密流播放。

支持定制化服务开发。