Install
使用 tnpm 安装
npm install cool-canvas-player
Vanilla JS Usage
import
CanvasPlayer
constructor(canvas, imageURLs, options?: CanvasPlayerOptions)
canvas
:HTMLCanvasElement
,用于绘制图片的 canvasimageURLs
:string[]
一组图片序列的 URLoptions
: 非必需fitImageSize
:boolean
,默认true
- 是否将 canvas 的
width
和height
设置成第一张加载完成的图片的width
和height
- 是否将 canvas 的
posterFrame
:false|'first'|'last'|number
,默认'first'
'first'|'last'
: 默认显示第一张/最后一张图片number
: 默认显示imageURLs
中对应的图片
load(): Promise<HTMLImageElement[]>
- 加载所有图片
seek(i, options): Promise<void>
i
:0 <= i < imageURLs.length
options
: 非必需draw
: 是否将当前指定的图片绘制到 canvas 中,默认true
seekPercent(p, options): Promise<void>
- 相当于
seek(Math.round(p * (imageURLs.length - 1)), options)
play(options): Promise<void>
-
播放序列帧
-
options
:fps
:number
,每秒播放图片的张数,默认值 24mode
:enum PlayMode
,默认值Normal
Normal
: 顺序播放序列帧到结尾并停止Reverse
: 逆序播放序列帧到开头并停止Loop
: 顺序播放序列帧到结尾后从头开始Alternate
: 顺序播放序列帧到结尾后逆序播放,循环往复Live
: 实时流一直播放下去
waitingOnLoading
:boolean
,是否等待图片加载,默认true
true
: 等待直到要绘制的图片加载完成false
: 不等待图片加载,下一帧图片可绘制时直接跳过正在加载的图片
onUpdated
:(i: number) => void
,图片绘制完成后的回调,参数i
为所绘制的图片在imageURLs
中的索引onEnded
:(i: number) => void
,播放结束的回调- 当
mode
为PlayMode.Normal
时,i === -1
- 当
mode
为PlayMode.Reverse
时,i === imageURLs.length
- 当
mode
为PlayMode.Loop
或PlayMode.Alternate
时,onEnded
不会被触发
- 当
pause(): void
- 暂停
playing
: boolean
- 是否在播放
Example
; ;;;player.play;
React Usage
目前暴露的React
组件有两个:PlayerWithUrls
& PlayerWithOneUrl
。
PlayerWithUrls
这个组件主要用在已知多张图片地址,顺序加载的情况下。默认循环(Loop)播放。
Example
; <PlayerWithUrls url="https://example.com/example1.jpg" "https://example.com/example2.jpg" "https://example.com/example3.jpg" options= fitImageSize: false playOptions= mode: PlayModeLoop fps: 24 width=800 height=450/>
PlayerWithOneUrl
这个组件主要用在从固定设备如摄像机请求图片。请求地址单一,每次返回不同结果,实时(Live)展示。
Example
; <PlayerWithOneUrl url="https://example.com/example.jpg" options= fitImageSize: false playOptions= mode: PlayModeLive fps: 15 width=800 height=450/>