JSMpeg 玩家( TS 玩家)
- jsmpeg 游戏机 已更名为 @cycjimmy/jsmpeg-player,用于范围化的国家预防机制软件包.
- JSMpeg 播放器基于 齐平格。 。 。 .
- 视频必须被压缩为MPEG1/MP2的TS格式.
- 带声音的自动播放被浏览器屏蔽,直到页面收到用户手势: 苹果设备在无声音的情况下自动播放,需要引导用户点击视频图标右下角的视频来解锁声音. Chrome和Safari遵循相同的自動播放政策,即声音会与相片保持同步,并在用户与页面互动后立即启动,或者可以通过同一图标立即解锁. (非自动播放模式下没有类似问题)
- 演示
如何使用
安装
$ npm install @cycjimmy/jsmpeg-player --save
# or
$ yarn add @cycjimmy/jsmpeg-player
使用量
import JSMpeg from '@cycjimmy/jsmpeg-player'
// new JSMpeg.VideoElement(videoWrapper, videoUrl [, options] [, overlayOptions])
-
JSMpeg.VideoElement配置 :videoWrapper: [结 元素] 录像的包装——要么是 必须符合现有元素的 CSS 选择器,或DOM元素本身。 一定是个 容器元素 (例如a)div; 不要通过<canvas>它本身——画布的子孙是倒行逆施的内涵,而永远不会被渲染出,这导致了黑幕. 通过画布canvas选项。 建议将包装的高度和宽度初始化.videoUrl: [标]一非空生弦. 内置来源接受亲属或http(s)://MPEG- TS 资源的 URL( 文件名不必以.ts),或 aws://编号 :wss://URL提供MPEG-TS. 已经创建的WebSocket实例不被接受。 自定义来源( O)source内overlayOptions定义自己的投入.options: [标 支持:canvas: [结 元素] HTML 画布元素用于视频渲染 。 如果未给出, 渲染器将创建自己的画布元素 。 默认''。 。 。 .poster: [打入] URL到一个图像,作为海报在视频播放前显示. (建议手动设置)autoplay曰:[宝. 是否立即开始播放 。 默认false。 。 。 .autoSetWrapperSize曰:[宝. 是否在视频加载时自动设置包装元素大小 。 默认false。 。 。 .loop曰:[宝. 是否循环视频( 只有静态文件) 。 默认false。 。 。 .[覆盖]control曰:[宝. 用户是否可以控制 。 内置的播放按钮和点击切换仅适用于静态文件 :ws://编号 :wss://现场源头没有内置的回放控制,必须使用play()编号 :pause()默认true。 。 。 .decodeFirstFrame曰:[宝. 是否解码并显示视频的第一个帧 。 默认true。 。 。 .picMode: [Boolean] 图片模式(没有播放按钮). 默认false。 。 。 .progressive: [Boolean] 是否用块装入数据(仅静态文件) 。 默认true。 。 。 .chunkSize[数目] 一次装入的字节块大小 。 默认1024*1024(单位:1mb).hooks: [标 钩子功能play: [功能] 视频播放时会起钩子的作用.pause: [功能] 视频暂停时会起钩子功能.stop: [功能] 视频停止时会起钩子功能.load: [功能] 视频建立时的钩子功能.
overlayOptions: [标 更多选项可以查看 jsmpeg 选项protocols: [String QQ Array] WebSocket子程序,转发给new WebSocket(url, protocols)(单位:千美元)ws://财务报告和审定财务报表wss://仅限URL). 能够携带起重机标志。 默认undefined。见 WebSocket 认证。 。 。 .preserveDrawingBuffer曰:[宝. 保留WebGL绘图缓冲器,这样画布就可以被读取回来,例如用它来快照canvas.toDataURL()默认false。见 抓图。 。 。 .
-
JSMpeg.VideoElement实例支持以下方法:play(): 开始重播pause(): 暂停播放stop(): 停止播放并寻求开始destroy():停止回放,释放出出源,渲染器,解码器和音频,以及空的视频包装. 玩家被移除时需要,请查看 多个玩家。 。 。 .
-
JSMpeg.VideoElement.player实例 API 可以查看 JSMPEG (英语). 玩家 API
抓图
WebGL 绘图缓冲器一旦一个帧被合成就被清除了,所以不准备就读取画布就会返回黑色图像. 设定 preserveDrawingBuffer 内 overlayOptions数字 :
const video = new JSMpeg.VideoElement('#videoWrapper', 'video.ts', {}, {
preserveDrawingBuffer: true,
})
// Any time after the first frame has been rendered
const dataUrl = video.els.canvas.toDataURL('image/png')
- 当创建了WebGL上下文时会读取旗帜,所以必须在建设时通过——不能在已经运行的玩家上被启用.
- 如果你通过自己的元素
canvas选项,它已经有一个 WebGL 上下文(因为)getContext('webgl')在玩家创建之前就曾呼吁过它),该上下文被再用而旗被忽略. 让玩家创建上下文取而代之. - 保存缓冲器有性能成本,所以如果不需要快照,就不要挂上国旗.
- 不需要WebGL:与
disableGl: true玩家返回 Canvas 2D 渲染器, 其中toDataURL()总是有效的,以更高的CPU使用率为代价.
WebSocket 认证
浏览器无法设置 Authorization 在 WebSocket 握手时的标题—— new WebSocket(url, protocols) 是WebSocket API提供的所有服务。 最接近浏览器本地化的选项是将信使作为子协议发送到服务器上作为 Sec-WebSocket-Protocol 请求头( 退出 URL 并退出访问日志) :
const video = new JSMpeg.VideoElement('#videoWrapper', 'wss://example.com/stream', {}, {
protocols: ['Bearer.<token>'],
})
const player = new JSMpeg.Player('wss://example.com/stream', {
protocols: ['Bearer.<token>'],
})
- 服务器必须接受子协议和 回声 握手反应
Sec-WebSocket-Protocol) (中文(简体) ). 如果所请求的子protocol中没有一个被响应,浏览器会中止连接. - 每个值必须是有效的 HTTP 符 (RFC 7230 (法语)没有空格,
+, (中文(简体) ),/或者说=. JWTs (base64url) 适配;包含这些字符的符号需要基于 cookie 的 Auth 代替(握手自动发送 cookie 用于目标来源).
多个玩家
每个 JSMpeg.VideoElement 是一个完整,独立的玩家:它打开了自己的源链接,创建了自己的WebGL上下文并运行自己的解码回路. 只有 AudioContext 而WASM模块是共享的,因此可以同时玩出多少玩家被浏览器和设备所约束,而不是这个库.
- 浏览器将每页的活的WebGL上下文数上限为(Chrome有16个,一些移动浏览器上更少). 过去的限制 历史最悠久的背景被放弃 画布是黑色的 没有任何例外.
- 每个流被解码在主线程上的软件中,每个玩家都会自行分配解码缓冲(视频为512 KB,默认音频为128 KB). 由多条流组成的网格竞争相同的CPU时间,无论使用何种渲染器.
progressive: true(默认)整个流每个播放器保留一个开放请求,这与HTTP/1.1的每个源头的~6连接算上. 这仅适用于静态文件;ws://财务报告和审定财务报表wss://来源不受影响.
打电话 destroy() 当玩家离开时. 在SPA中,将建筑师返回的实例丢弃,例如将其叫到 componentDidMount 而不存储结果 —— 在其标记消失后让玩家运行: socket, WebGL 上下文和解码回路全部存活. 然后几道导航就足以使页面疲惫不堪,由于无所投放,硬重载似乎是唯一的固定.
// React
componentDidMount() {
this.video = new JSMpeg.VideoElement('#videoWrapper', 'wss://example.com/stream');
}
componentWillUnmount() {
this.video.destroy();
this.video = null;
}
将许多相机保留在屏幕上:
disableGl: true—— Canvas 2D 渲染器不消耗WebGL上下文,以更高的CPU使用率为代价.audio: false——省去相机网格的音频解码.- 仅为可见的平板块创建播放器( 例如:
IntersectionObserver和destroy()当他们离开风景区时. - 服务于缩略图中的低比特率子流;用于软件解码每个流物质的分辨率和比特率大于平分数.
在浏览器中使用
<div id="videoWrapper"></div>
<script src="jsmpeg-player.umd.min.js"></script>
<script>
var videoUrl = '../static/media/test_video.ts';
new JSMpeg.VideoElement('#videoWrapper', videoUrl);
</script>
光盘N
要通过CDN使用,请在您的 HTML 中包含此内容:
<script src="https://cdn.jsdelivr.net/npm/@cycjimmy/jsmpeg-player@7/dist/jsmpeg-player.umd.min.js"></script>
移动到 v7
v7 放弃了 CommunityJS 构建并提升了节点和浏览器目标. import 并且浏览器全局不变,所以大多数消费者根本不需要改变.
dist/jsmpeg-player.cjs不再生产exports不再暴露一个require条件.require('@cycjimmy/jsmpeg-player')由于节点可以require()一个 ES 模块,但它返回模块命名空间:使用require('@cycjimmy/jsmpeg-player').default。 。 。 .main财务报告和审定财务报表module两个点dist/jsmpeg-player.esm.js编辑browser字段仍然指向用于CDN和遗留工具的UMD构建.engines.node现在^22.22.2 || >=24.15.0,新的建筑工具链的地板.engines因此它只会限制贡献者和消费者,而不是消费者.- 建设目标
es2015与defaults浏览器列表,因此IE不再被支持. 贝贝降平已去, 这使得jsmpeg-player.esm.js大约24%jsmpeg-player.umd.min.js略为小于v6. - 深道继续通过
./dist/*输出. - 运行时间 CSS 仍然作为 a 注入
<style>元素; 没有要导入的样式表.
// CommonJS consumers: require() can load an ES module from Node 20.19 on
const JSMpeg = require('@cycjimmy/jsmpeg-player').default
发展
$ npm run dev # Vite dev server on top of the root index.html
$ npm run lint # ESLint (flat config, @antfu/eslint-config)
$ npm run lint:style # Stylelint for src/**/*.{css,scss}
$ npm test # node --test
$ npm run package # build dist/ and assemble .release/
index.html 在寄存器根是开发条目: 它导入 src/ 通过Vite,所以变化出现时没有积分. static/index.html 是 GitHub 页面演示并装入预建 jsmpeg-player.umd.js 一个平地 <script> 标记; npm run build:deployment 组装到 .publish/。见 捐款额 检查CI运行.
为视频/音频编码 齐平格 以 ffmpeg 数据. 例如:
$ ffmpeg -i input.mp4 -f mpegts \
-codec:v mpeg1video -s 640x360 -b:v 700k -r 25 -bf 0 \
-codec:a mp2 -ar 44100 -ac 1 -b:a 64k \
output.ts
- 选项
-s: 视频大小-b:v: 视频比特率-r: 帧率-ar:采样率-ac: 音频频道数量-b:a: 音频比特率