【前端】jsmpeg 介绍及使用
文章目录
- 一、简介
- 二、使用方法
- 1、HTML 元素方式
- 2、JSMpeg.Player() 构造函数
- 2.1 构建
- 2.2 属性
- 2.3 方法
- 三、为 JSMpeg 编码视频/音频
一、简介
JSMpeg 是一个用 JavaScript 编写的视频播放器。它由 MPEG-TS 解复用器、MPEG1 视频和 MP2 音频解码器、WebGL 和 Canvas2D 渲染器以及 WebAudio 声音输出组成。JSMpeg 可以通过 Ajax 加载静态视频，并允许通过 WebSockets 进行低延迟流（~50 毫秒）
获取 JSMpeg 的主要方式是从其官方 GitHub 仓库获取：
https://github.com/phoboslab/jsmpeg
二、使用方法
JSMpeg 提供了两种基本的播放器创建方式。
1、HTML 元素方式
<div class="jsmpeg" data-url="ws://your-websocket-server:port"></div>
2、JSMpeg.Player() 构造函数
2.1 构建
var player = new JSMpeg.Player(url [, options]);
参数说明：
- url： url 参数接受 MPEG .ts 文件或 WebSocket 服务器 （ws://…） 的 URL
- options：
| 属性 | 说明 | 默认值 |
|---|---|---|
canvas | 用于视频渲染的 HTML Canvas 元素。如果未提供，渲染器将创建自己的 Canvas 元素 | - |
loop | 是否循环播放视频（仅限静态文件） | true |
autoplay | 是否立即开始播放（仅限静态文件） | false |
audio | 是否解码音频 | true |
video | 是否解码视频 | true |
poster | 视频播放前显示的海报图像的 URL | - |
pauseWhenHidden | 当标签页处于非活动状态时是否暂停播放。注意浏览器通常会在非活动标签页中限制 JS 执行 | true |
disableGl | 是否禁用 WebGL 并始终使用 Canvas2D 渲染器 | false |
disableWebAssembly | 是否禁用 WebAssembly 并始终使用 JavaScript 解码器 | false |
preserveDrawingBuffer | WebGL 上下文是否创建时带有 preserveDrawingBuffer - 对于通过 canvas.toDataURL() 进行"截图"是必需的 | false |
progressive | 是否分块加载数据（仅限静态文件）。启用后，可以在整个源完全加载之前开始播放 | true |
throttled | 使用渐进式加载时，是否推迟加载当前播放不需要的数据块 | true |
chunkSize | 使用渐进式加载时，每次加载的数据块大小（字节） | 1048576 (1MB) |
decodeFirstFrame | 是否解码并显示视频的第一帧。可用于设置 Canvas 大小并将该帧用作"海报"图像。在使用自动播放或流媒体源时无效 | true |
maxAudioLag | 流媒体播放时，音频队列的最大长度（秒） | - |
videoBufferSize | 流媒体播放时，视频解码缓冲区的大小（字节） | 524288 (512KB) |
audioBufferSize | 流媒体播放时，音频解码缓冲区的大小（字节） | 131072 (128KB) |
onVideoDecode(decoder, time) | 每个视频帧解码和渲染后调用的回调函数 | - |
onAudioDecode(decoder, time) | 每个音频帧解码后调用的回调函数 | - |
onPlay(player) | 播放开始时调用的回调函数 | - |
onPause(player) | 播放暂停时调用的回调函数（例如调用 .pause() 或源已结束） | - |
onEnded(player) | 播放到达源结束时调用的回调函数（仅在 loop 为 false 时调用） | - |
onStalled(player) | 当没有足够数据进行播放时调用的回调函数 | - |
onSourceEstablished(source) | 源首次接收到数据时调用的回调函数 | - |
onSourceCompleted(source) | 源接收到所有数据时调用的回调函数 | - |
使用示例：
<canvas width="640" height="480"></canvas>
<script>var canvas = document.querySelector('canvas');var url = 'ws://localhost:8550';var player = new JSMpeg.Player(url, {canvas: canvas,audio: false});
</script>
2.2 属性
| 方法/属性 | 说明 |
|---|---|
.volume | 获取或设置音频音量（0-1） |
.currentTime | 获取或设置当前播放位置（秒） |
.paused | 只读属性，表示播放是否处于暂停状态 |
2.3 方法
| 方法/属性 | 说明 |
|---|---|
.play() | 开始播放 |
.pause() | 暂停播放 |
.stop() | 停止播放并跳转到开头 |
.nextFrame() | 前进一帧视频（不解码音频）。成功返回 true，数据不足时返回 false |
.destroy() | 停止播放，断开数据源连接并清理 WebGL 和 WebAudio 状态。调用后播放器将不可用。如果播放器创建了 canvas 元素，则会从文档中移除 |
三、为 JSMpeg 编码视频/音频
JSMpeg 仅支持使用 MPEG1 视频编解码器和 MP2 音频编解码器播放 MPEG-TS 容器。视频解码器无法正确处理 B 帧（尽管现代编码器似乎默认使用这些帧），并且视频的宽度必须是 2 的倍数。
您可以使用 ffmpeg 对合适的视频进行编码，如下所示：
ffmpeg -i in.mp4 -f mpegts -codec:v mpeg1video -codec:a mp2 -b 0 out.ts