PHPackages                             avtomon/player.js - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. avtomon/player.js

ActiveLibrary

avtomon/player.js
=================

TypeScript/JavaScript player

186TypeScript

Since Nov 16Pushed 5y ago1 watchersCompare

[ Source](https://github.com/avtomon/player.js)[ Packagist](https://packagist.org/packages/avtomon/player.js)[ RSS](/packages/avtomon-playerjs/feed)WikiDiscussions master Synced yesterday

READMEChangelogDependenciesVersions (1)Used By (0)

Player.js
=========

[](#playerjs)

Viewer on pure JavaScript. At the moment it can display video, graphics and books in PDF format.

#### Installation

[](#installation)

`composer reqire avtomon/player.js`

#### Description

[](#description)

The module requires an HTML block with one of the predefined classes:

- **video** - video player will be created;
- **image** - image viewer; **book** - the viewer of books in PDF format

If there is such a block, it is very easy to create a block:

Suppose that such a block is:

```

```

then the code for creating the player object in the simplest case:

```
let player = new Player (document.querySelector('div.video'));

```

The second parameter of the constructor can be a configuration object-the object implementing the following interface:

```
interface IPlayerOptions {

/**
     * Path to file with styles
     */
    readonly styleFilePath?: string;

/**
     * Select the first item when initializing the player
     */
    readonly activate?: boolean;

/**
     * Class of viewing unit
     */
    readonly mainWrapperClass?: string;

/**
     * Class block preview
     */
    readonly imageWrapperClass?: string;

/**
     * Width of the scroll buttons
     */
    readonly scrollButtonsWidth?: number;

/**
     * Error of click on scroll buttons
     */
     readonly scrollButtonsPadding?: number;

/**
      * Images with this class are not loaded into the player
      */
      readonly imageStopClass?: string;
}

```

Each resource loaded into the viewer has a preview in the form of an image. Actually, in the form of images, new elements are added to the player and then converted into an internal format.

You can add elements to the player in the following way:

```
player.addItem(image, true);

```

Elements are always added in the form of the HTMLImageElement object, which should contain the necessary most were:

- *src* - image path;
- *title* - name of the downloaded resource;
- ***data-object-src*** - path to the resource that represents the image (link to video, picture or book).

and may contain optional attributes:

- *data-type* -this attribute can be used to specify an optional resource type if you want to divide resources by types.

This creates *<span>* elements with the back attributes + by default, the *class* attribute is set to  *img* the internal HTML code will be:

```
close

```

if you use the library [materializecss](https://materializecss.com), then such a markup element will add a player element delete button.

The second parameter specifies whether to move to the added element of the same tale after adding or not.

Delete items:

```
deleteItem(index);

```

where  *index* is the index of the deleted item in the player.

If supported by the module unit at the time of initialisatie player already contains the image with necessary attributes, they are automatically added to the player, with the exception of those that contain the class specified by the Directive **imageStopClass** configuration of the player (*IPlayerOptions*), the default class is **no-image**.

 **note:**If you plan to develop the project yourself and build it with the *script build.sh* you will need to install < b>Gulp and its plugins specified in the *script init.sh* in the global scope, and why run the *script init.sh* for linking. Or install all dependencies directly into the project.

[Method documentation](docs_ru)

###  Health Score

19

—

LowBetter than 10% of packages

Maintenance20

Infrequent updates — may be unmaintained

Popularity11

Limited adoption so far

Community7

Small or concentrated contributor base

Maturity31

Early-stage or recently created project

 Bus Factor1

Top contributor holds 100% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/10077243?v=4)[Aleksandr Avtomonov](/maintainers/avtomon)[@avtomon](https://github.com/avtomon)

---

Top Contributors

[![avtomon](https://avatars.githubusercontent.com/u/10077243?v=4)](https://github.com/avtomon "avtomon (18 commits)")

### Embed Badge

![Health badge](/badges/avtomon-playerjs/health.svg)

```
[![Health](https://phpackages.com/badges/avtomon-playerjs/health.svg)](https://phpackages.com/packages/avtomon-playerjs)
```

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)