video-worker v2.2.0

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

Example

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

Events

Example

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

Methods

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