/video-worker

API wrapper for Youtube, Vimeo and Local videos

Primary LanguageJavaScriptMIT LicenseMIT

Video Worker

API wrapper for Youtube, Vimeo and Local videos

Getting Started

HTML

<!-- Video Worker -->
<script src="video-worker/dist/video-worker.min.js"></script>

Or use NPM

npm: npm install video-worker --save

Simple Example

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
  • Local Hosted mp4:./local-video.mp4,webm:./local-video.webm,ogv:./local-video.ogv

Note: for local 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.
showContols bool true Video controls.
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.

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) => { ... })
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();

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