Feature

Options

PGSController

exporttypePGSControllerOption={renderOption:{preferHTMLCanvasElement:boolean;// preffer HTMLCanvasElement in Main Thread. (default: false, recommended firefox is true)webWorker:boolean;// use WebWorker for rendering (default: false)}}

PGSSupFeeder/PGSAsyncSupFeeder

exporttypePGSSupFeederOption={timeshift:number;// offset for time (default: 0)preload:'none'|'decode'|'render';// prelodd rgba data (default: none)}

Getting Started

Requirements: Wrapping Relative Element Needed!

<divstyle="position: relative; display: inline-block;"><!-- This Relative Wrapping Needed! --><videoid="video"></video></div>

Work with SUP file (sync)

<scripttype="module">import{PGSController,PGSSupFeeder}from"pgs.js";constres=awaitfetch('./something.sup');constsup=awaitres.arrayBuffer();constvideo=document.getElementById('video');constcontroller=newPGSController();constfeeder=newPGSSupFeeder(sup);controller.attachFeeder(feeder);controller.attachMedia(video)</script>

Work with SUP file (async)

<scripttype="module">import{PGSController,PGSAsyncSupFeeder}from"pgs.js";constres=awaitfetch('./something.sup');constvideo=document.getElementById('video');constcontroller=newPGSController();constfeeder=newPGSAsyncSupFeeder(res.body);// use `feeder.done` for wait loadingcontroller.attachFeeder(feeder);controller.attachMedia(video)</script>

Work with M2TS

<scripttype="module">import{PGSController,PGSMpegTsFeeder}from"pgs.js";constvideo=document.getElementById('video');constcontroller=newPGSController();constfeeder=newPGSMpegTsFeeder();// call `feeder.feed(arraybuffer, pts, dts, timescale)` for insert PEScontroller.attachFeeder(feeder);controller.attachMedia(video)</script>

Build

yarnyarn build