Video Worker

API wrapper for Youtube, Vimeo and Self-Hosted videos

Table of Contents

• Import VideoWorker
  • ESM
  • ESM CDN
  • UMD
  • UMD CDN
  • CJS (Bundlers like Webpack)
• Use VideoWorker
• Options
• Events
• Methods
• Video Providers
• For Developers

Import VideoWorker

Use one of the following examples to import script.

ESM

We provide a version of VideoWorker built as ESM (video-worker.esm.js and video-worker.esm.min.js) which allows you to use VideoWorker as a module in your browser, if your targeted browsers support it.

<script type="module">
  import VideoWorker from "video-worker.esm.min.js";
</script>

ESM CDN

<script type="module">
  import VideoWorker from "https://cdn.jsdelivr.net/npm/video-worker@2/+esm";
</script>

UMD

VideoWorker may be also used in a traditional way by including script in HTML and using library by accessing window.VideoWorker.

<script src="video-worker.min.js"></script>

UMD CDN

<script src="https://cdn.jsdelivr.net/npm/video-worker@2/dist/video-worker.min.js"></script>

CJS (Bundlers like Webpack)

Install VideoWorker as a Node.js module using npm

npm install video-worker

Import VideoWorker by adding this line to your app's entry point (usually index.js or app.js):

import VideoWorker from 'video-worker';

Use VideoWorker

import VideoWorker from 'video-worker';

const videoObject = new VideoWorker('https://www.youtube.com/watch?v=ab0TSkLe-E0');

if (videoObject.isValid()) {
  // retrieve iframe/video dom element.
  videoObject.getVideo((video) => {
    const $parent = video.parentNode;

    // insert video in the body.
    document.body.appendChild(video);

    // remove temporary parent video element (created by VideoWorker).
    $parent.parentNode.removeChild($parent);
  });
}

Video URLs examples:

• YouTube https://www.youtube.com/watch?v=ab0TSkLe-E0
• Vimeo https://vimeo.com/110138539
• Self Hosted mp4:./self-hosted-video.mp4,webm:./self-hosted-video.webm,ogv:./self-hosted-video.ogv

Note: for self-hosted videos required only 1 video type, not necessary use all mp4, webm and ogv. This need only for maximum compatibility with all browsers.

Options

Name | Type | Default | Description :--- | :--- | :------ | :---------- autoplay | bool | false | Video autoplay. loop | bool | false | Video playing loop. showControls | bool | true | Video controls. accessibilityHidden | bool | false | Add accessibility attributes for videos used on backgrounds. mute | bool | false | Mute sound. volume | int | 100 | Volume level from 0 to 100. startTime | float | 0 | Start time in seconds when video will be started (this value will be applied also after loop). endTime | float | 0 | End time in seconds when video will be ended.

Example

new VideoWorker('<URL_TO_YOUR_VIDEO>', {
  autoplay: true,
  loop: true,
  startTime: 10,
});

Events

Name | Parameters | Description :--- | :----- | :---------- ready | event | Fires only once, when the video is ready to play. volumechange | event | Fires when video volume changed. timeupdate | event | Fires when video current time changed. started | event | Fires only once, when the video is started playing. play | event | Fires on video play start. pause | event | Fires on video paused. ended | event | Fires on video ended. error | error | Fires on video error

Example

videoObject.on('ready', (event) => {
  console.log('video ready', event);
});

Methods

Name | Result | Description :--- | :----- | :---------- isValid | bool | Check if the video is successfully determined and ready to use. play | - | Play video. pause | - | Pause video. mute | - | Mute sound. unmute | - | Unmute sound. getMuted | int | Get mute state. videoObject.getMuted((muted) => { ... }) setVolume | - | Set volume level (takes integer value from 0 to 100). videoObject.setVolume(40); getVolume | int | Get volume level. videoObject.getVolume((volume) => { ... }) setCurrentTime | - | Set current time in seconds. videoObject.setCurrentTime(40); getCurrentTime | int | Get current time in seconds. videoObject.getCurrentTime((currentTime) => { ... }) getImageURL | string | Retrieves Youtube/Vimeo video poster image URL. videoObject.getImageURL((url) => { ... }) getVideo | dom | Retrieves iframe/video dom element. videoObject.getVideo((video) => { ... })

Example

videoObject.mute();

Video Providers

By default VideoWorker provides support for Youtube, Vimeo and Self-Hosted videos. There is a possibility to extend providers list and add support for different platform.

Example:

VideoWorker.providers.MyVideoProvider = class MyVideoProvider extends VideoWorker.BaseClass {
  type = 'my-video-provider';
  ...
}

All available methods for custom provider class you can find in existing providers - https://github.com/nk-o/video-worker/tree/master/src/providers

For Developers

Installation

• Run npm install in the command line. Or if you need to update some dependencies, run npm update

Building

• npm run build to run build

Linting

• npm run js-lint to show eslint errors
• npm run js-lint-fix to automatically fix some of the eslint errors