jsmpeg 全屏_jsmpeg: MPEG1 Video Decoder in JavaScript

JSMpeg – MPEG1 Video & MP2 Audio Decoder in JavaScript

JSMpeg is a Video Player written in JavaScript. It consists of an MPEG-TS demuxer, MPEG1 video & MP2 audio decoders, WebGL & Canvas2D renderers and WebAudio sound output. JSMpeg can load static videos via Ajax and allows low latency streaming (~50ms) via WebSockets.

JSMpeg can decode 720p Video at 30fps on an iPhone 5S, works in any modern browser (Chrome, Firefox, Safari, Edge) and comes in at just 20kb gzipped.

Using it can be as simple as this:

Some more info and demos: jsmpeg.com

Usage

A JSMpeg video player can either be created in HTML using the CSS class jsmpeg for the container:

or by directly calling the JSMpeg.Player() constructor in JavaScript:

var player = new JSMpeg.Player(url [, options]);

Note that using the HTML Element (internally JSMpeg.VideoElement) provides some features on top of JSMpeg.Player. Namely a SVG pause/play button and the ability to "unlock" audio on iOS devices.

The url argument accepts a URL to an MPEG .ts file or a WebSocket server (ws://...).

The options argument supports the following properties:

canvas – the HTML Canvas elment to use for video rendering. If none is given, the renderer will create its own Canvas element.

loop – whether to loop the video (static files only). Default true.

autoplay - whether to start playing immediately (static files only). Default false.

audio - whether to decode audio. Default true.

video - whether to decode video. Default true.

poster – URL to an image to use as the poster to show before the video plays.

pauseWhenHidden – whether to pause playback when the tab is inactive. Default true. Note that browsers usually throttle JS in inactive tabs anyway.

disableGl - whether to disable WebGL and always use the Canvas2D renderer. Default false.

preserveDrawingBuffer – whether the WebGL context is created with preserveDrawingBuffer - necessary for "screenshots" via canvas.toDataURL(). Default false.

progressive - whether to load data in chunks (static files only). When enabled, playback can begin before the whole source has been completely loaded. Default true.

throttled - when using progressive, whether to defer loading chunks when they're not needed for playback yet. Default true.

chunkSize - when using progressive, the chunk size in bytes to load at a time. Default 1024*1024 (1mb).

decodeFirstFrame - whether to decode and display the first frame of the video. Useful to set