jsmpeg 全屏_jsmpeg: JSMpeg 是用 JavaScript 编写的视频播放器

最新推荐文章于 2024-08-22 08:10:44 发布

小蛋子儿哦

最新推荐文章于 2024-08-22 08:10:44 发布

阅读量1.4k

点赞数

文章标签： jsmpeg 全屏

本文链接：https://blog.csdn.net/weixin_42502977/article/details/112831557

版权

JSMpeg 是一个用 JavaScript 编写的轻量级视频播放器，支持通过 WebSockets 实现低延迟流式传输。它可以解码 720p 视频并在各种现代浏览器上流畅运行。JSMpeg 支持创建 HTML 元素或直接在 JavaScript 中初始化播放器，并提供了丰富的配置选项，如是否解码音频、循环播放等。要使用 JSMpeg，你需要一个 MPEG-TS 格式的视频源，可以使用 ffmpeg 进行编码。此外，JSMpeg 还提供了一个简单的 WebSocket 服务器示例，允许从 Raspberry Pi 等设备进行实时流式传输。

摘要由CSDN通过智能技术生成

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.

disableWebAssembly - whether to disable WebAssembly and always use JavaScript decoders. 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 up the Canvas size and use the frame as the "poster" image. This has no effect when using autoplay or streaming sources. Default true.

maxAudi