# @meisterplayer/plugin-html5player

> Meister plugin for playing video with the html5player

Latest version **5.9.3** (published 2018-12-17) · Apache-2.0 license · 0 weekly downloads

## Install

```sh
npm install @meisterplayer/plugin-html5player
pnpm add @meisterplayer/plugin-html5player
yarn add @meisterplayer/plugin-html5player
bun add @meisterplayer/plugin-html5player
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 5.9.3 |
| Published | 2018-12-17 |
| First published | 2017-04-28 |
| Weekly downloads | 0 |
| License | Apache-2.0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 141.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | Triple |
| Maintainers | franklin-waller, i.toby, kajb, licensetriple, ppbraam, rtl-video, smashingpat, thomasvdam |
| Keywords | meister, video, plugin |

## Links

- npm: https://www.npmjs.com/package/@meisterplayer/plugin-html5player
- Repository: https://github.com/meisterplayer/player-html5player
- Homepage: https://github.com/meisterplayer/player-html5player#readme
- Issues: https://github.com/meisterplayer/player-html5player/issues
- npm.io page: https://npm.io/package/@meisterplayer/plugin-html5player

## Alternatives

- [@sindresorhus/slugify](https://npm.io/package/@sindresorhus/slugify.md) — 3.7M weekly downloads
- [solid-js](https://npm.io/package/solid-js.md) — 2.7M weekly downloads
- [expo-glass-effect](https://npm.io/package/expo-glass-effect.md) — 2.5M weekly downloads
- [nanoassert](https://npm.io/package/nanoassert.md) — 780.8K weekly downloads
- [@ffmpeg/ffmpeg](https://npm.io/package/@ffmpeg/ffmpeg.md) — 529.5K weekly downloads

## Recent versions

- 5.9.3 (latest) — 2018-12-17
- 5.9.2 — 2018-12-13
- 5.9.1 — 2018-11-20
- 5.9.0 — 2018-10-30
- 5.8.0 — 2018-06-12
- 5.7.0 — 2018-05-01
- 5.6.2 — 2018-02-26
- 5.6.1 — 2018-02-05
- 5.5.1 — 2017-11-07
- 5.5.0 — 2017-08-28
- 5.4.0 — 2017-06-27
- 5.3.2 — 2017-06-23
- 5.3.1 — 2017-06-20
- 5.2.0 — 2017-05-29
- 5.1.0 — 2017-04-28

## README

HMTL5 Player plugin for Meister
=========

This plugin allows playback using the HTML5 player. This is only a player plugin so it cannot play media on it's own, it needs a media plugin to play. For example the plugin [BaseMedia](https://github.com/meisterplayer/media-basemedia) 

Getting started
---------

Load the plugin by adding the ```Html5Player``` configuration object to the Meister initialisation options.

``` JavaScript
var meisterPlayer = new Meister('#player', {
    Html5Player: {}
});

// Continue Meister configuration
Meister.setItem({ ... });
Meister.load();
```

Config options
----------

The following options can be set in the Html5Player: {} config.

### checkInterval *[Number]* (default: 200) ###

The interval checks (in ms) if the player is buffering. The player decides if it's buffering if the player is not paused and the currentTime hasn't moved compared to the last position. Higher numbers result in a longer time before the player decides whether or not the player is buffering.

Example:


``` JavaScript
var meisterPlayer = new Meister('#player', {
    Html5Player: {
        checkInterval: 300,
    }
});
```

### playerSeekDebounce *[Number]* (default: 500) ###

Due to differences in how browsers handle seeking through video it is necessary to debounce the trigger for the 'playerSeekComplete' event. Higher values reduce the number of duplicate events at the cost of losing some accuracy. By default this trigger is debounced for 500 milliseconds.

Example:

``` JavaScript
var meisterPlayer = new Meister('#player', {
    Html5Player: {
        playerSeekDebounce: 700,
    }
});
```



### audioOnly *[Boolean]* (default: false) ###

Set the player in audio only mode. This results in using only the ```<audio>``` tag for playback instead of using the ```<video>``` tag. If you want this option only to set per item you can use the [mediaType]() property on ```setItem();```

Example:

``` JavaScript
var meisterPlayer = new Meister('#player', {
    Html5Player: {
        audioOnly: true,
    }
});
```

### defaultAudioImage *[String]* (default: '') ###

Sets the image for audioOnly streams. This way you can create a visual indicating the stream is audio only.

Example: 

``` JavaScript
var meisterPlayer = new Meister('#player', {
    Html5Player: {
        audioOnly: true,
        defaultAudioImage: 'https://example.com/images/audio.png',
    }
});
```

### iosPlaysInline *[Boolean]* (default: false) ###

Adds the attribute playsinline to the ```<video>``` or ```<audio>``` element. This way you can play the video inline on iOS devices. 

Example: 

``` JavaScript
var meisterPlayer = new Meister('#player', {
    Html5Player: {
        iosPlaysInline: true
    }
});
```

### startMuted *[Boolean]* (default: false) ###

Options to start the player in muted mode.

Example: 

``` JavaScript
var meisterPlayer = new Meister('#player', {
    Html5Player: {
        startMuted: true
    }
});
```

### posterImage *[String]* (default: undefined) ###

A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is shown as the poster frame.

Example:

``` JavaScript
var meisterPlayer = new Meister('#player', {
    Html5Player: {
        posterImage: 'http://example.com/poster.png'
    }
});
```

### enableKeyBoardShortcuts *[Boolean]* (default: true) ###

Enables the keyboard shorcuts on meister

Example: 

``` JavaScript
var meisterPlayer = new Meister('#player', {
    Html5Player: {
        enableKeyBoardShortcuts: false // Disables the keyboard shorcuts
    }
});
```


Item options
--------

The following options are available for per item configuration.

### mediaType *[String]* (default: undefined) ###

The same as the config option ```audioOnly``` only this can be set per item.

Example: 

``` JavaScript
var meisterPlayer = new Meister('#player', {
    Html5Player: {}
});

meisterPlayer.setItem({
    src: 'INSERT_SRC_HERE',
    mediaType: 'audio',
    type: 'mp4'
});
```

### crossorigin *[String]* (default: undefined) ###

Sets the crossorigin attribute on the ```<video>``` or ```<audio>``` element. For more information on this attribute and what properties can be set, you can visit the [MDN Documentation](https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_settings_attributes)

Example: 

``` JavaScript
var meisterPlayer = new Meister('#player', {
    Html5Player: {}
});

meisterPlayer.setItem({
    src: 'INSERT_SRC_HERE',
    crossorigin: 'anonymous',
    type: 'mp4'
});
```

---
_Source: https://npm.io/package/@meisterplayer/plugin-html5player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._