Nascent Plasticine Materialist

    media-element-syncer

    1.1.1 • Public • Published

    npm version

    Media Element Syncer

    Synchronise two or more HTML5 media elements. Similar to the unimplemented MediaController api.

    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.

    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 and there is a hosted version here.

    Install

    npm i media-element-syncer

    DownloadsWeekly Downloads

    2

    Version

    1.1.1

    License

    MIT

    Unpacked Size

    578 kB

    Total Files

    11

    Last publish

    Collaborators

    • tjenkinson