https://github.com/tjenkinson/media-element-syncer

Synchronise two or more HTML5 media elements.
https://github.com/tjenkinson/media-element-syncer

mediacontroller mediaelement sync synchronisation

Last synced: 2 months ago
JSON representation

Synchronise two or more HTML5 media elements.

• Host: GitHub
• URL: https://github.com/tjenkinson/media-element-syncer
• Owner: tjenkinson
• License: mit
• Created: 2019-12-08T10:38:18.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2024-09-12T00:29:29.000Z (4 months ago)
• Last Synced: 2024-09-13T14:48:45.271Z (4 months ago)
• Topics: mediacontroller, mediaelement, sync, synchronisation
• Language: JavaScript
• Homepage: https://clever-pike-bb0ab3.netlify.com/demo.html
• Size: 1.47 MB
• Stars: 21
• Watchers: 3
• Forks: 1
• Open Issues: 13
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![npm version](https://badge.fury.io/js/media-element-syncer.svg)](https://badge.fury.io/js/media-element-syncer)

# Media Element Syncer

Synchronise two or more HTML5 media elements. Similar to the [unimplemented `MediaController` api](https://developer.mozilla.org/en-US/docs/Web/API/HTMLMediaElement/controller).

## How?

This works by continuously adjusing the `playbackRate` of the media elements, or performing a seek operation if the difference is too big.

## Installation

```

npm install --save media-element-syncer

```

## Usage

All media elements passed to `addChild` will remain synchronised with the source element.

`MediaElementSyncer` is eligible for garbage collection when there are no children.

```js

import { MediaElementSyncer } from 'media-element-syncer';

const source = document.getElementById('source');

const destination1 = document.getElementById('destination1');

const destination2 = document.getElementById('destination2');

const syncer = new MediaElementSyncer(source);

syncer.addChild(destination1);

syncer.addChild(destination2, { offset: -1000 });

// syncer.removeChild(destination1);

```

## Configuration

The optional second param to `MediaElementSyncer` takes an object which has the following optional properties:

- `refreshInterval`: how often to resync the elements. _(default: 200ms)_

- `correctionTime`: how many milliseconds into the future to aim for being in sync. _(default: 500ms)_

- `seekThreshold`: if the time is out by more than this amount, a seek will be performed instead of adjusting the `playbackRate`. _(default: 1000ms)_

## Demo

The code for the demo is [here](/src/demo.html) and there is a hosted version [here](https://clever-pike-bb0ab3.netlify.com/demo.html).