Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@cycjimmy/jsmpeg-player

Package Overview
Dependencies
Maintainers
0
Versions
17
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@cycjimmy/jsmpeg-player

MPEG1 Video Player Based On JSMpeg

  • 6.1.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.7K
decreased by-9.86%
Maintainers
0
Weekly downloads
 
Created
Source

JSMpeg Player(TS Player)

libraries dependency status libraries sourcerank Release date rollup semantic-release npm license

  • jsmpeg-player has been renamed to @cycjimmy/jsmpeg-player for scoped NPM package.
  • JSMpeg player is based on jsmpeg.
  • The video must be compressed into the TS format of MPEG1 / MP2.
  • Apple device automatically plays without sound, you need to guide the user to click on the video in the lower right corner of the video icon to unlock the sound. (no similar problem in non-autoplay mode)
  • Demo

How to use

Install

NPM version NPM bundle size npm download

$ npm install @cycjimmy/jsmpeg-player --save
# or
$ yarn add @cycjimmy/jsmpeg-player

Usage

import JSMpeg from '@cycjimmy/jsmpeg-player';
# OR
const JSMpeg = require('@cycjimmy/jsmpeg-player');
new JSMpeg.VideoElement(videoWrapper, videoUrl [, options] [, overlayOptions])
  • JSMpeg.VideoElement config:

    • videoWrapper: [String | Element] The wrapper of the video. The height and width of the wrapper are recommended to be initialized.
    • videoUrl: [String] A URL to an MPEG .ts file
    • options: [Object] support:
      • canvas: [String | Element] The HTML canvas element to use for video rendering. If none is given, the renderer will create its own canvas element. Default ''.
      • poster: [String] URL to an image to use as the poster to show before the video plays. (Recommended to set it manually)
      • autoplay: [Boolean] Whether to start playing immediately. Default false.
      • autoSetWrapperSize: [Boolean] Whether to set the wrapper element size automatically when the video loaded. Default false.
      • loop: [Boolean] Whether to loop the video (static files only). Default false.[overwrite]
      • control: [Boolean] Whether the user can control. Default true.
      • decodeFirstFrame: [Boolean] Whether to decode and display the first frame of the video. Default true.
      • picMode: [Boolean] Picture mode (no playButton). Default false.
      • progressive: [Boolean] whether to load data in chunks (static files only). Default true.
      • chunkSize [Number] The chunk size in bytes to load at a time. Default 1024*1024 (1mb).
      • hooks: [Object] The hook function
        • play: [Function] The hook function when the video play.
        • pause: [Function] The hook function when the video pause.
        • stop: [Function] The hook function when the video stop.
        • load: [Function] The hook function when the video established.
    • overlayOptions: [Object] More options can view the jsmpeg options
  • JSMpeg.VideoElement instance supports the following methods:

    • play(): Start playback
    • pause(): Pause playback
    • stop(): Stop playback and seek to the beginning
    • destroy(): Stop playback and empty video wrapper
  • JSMpeg.VideoElement.player instance API can view the JSMpeg.Player API

Use in browser

jsdelivr

<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>

CDN

To use via a CDN include this in your HTML:

<script src="https://cdn.jsdelivr.net/npm/@cycjimmy/jsmpeg-player@6/dist/jsmpeg-player.umd.min.js"></script>

Encoding Video/Audio for jsmpeg by ffmpeg. E.g:

$ 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
  • options
    • -s: video size
    • -b:v: video bit rate
    • -r: frame rate
    • -ar: sampling rate
    • -ac: number of audio channels
    • -b:a: audio bit rate

Keywords

FAQs

Package last updated on 25 Oct 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc