rendfall / mini-video-playback

Make the video pop out so that you could move it wherever you like

Mini Video Playback (npm)

Make the video pop out so that you could move it wherever you like.

Install

$ npm install mini-video-playback

Usage

document.addEventListener('DOMContentLoaded', () => {
    const videoTagElementRef = document.querySelector('video');
    const miniVideoPlayback = new MiniVideoPlayback(videoTagElementRef, {
        width: 480,
        height: 270
    });
    miniVideoPlayback.show();
}, false);

Options

width [number]

Set preview width (in px units)

Default: 480px

height [number]

Set preview height (in px units)

Default: 270px

movable [boolean]

Allow to drag element

Default: true

parentElement [HTMLElement]

Point parent element where preview will be embeded

Default: document.body

API

show()

Show floating playback preview

hide()

Hide floating playback preview

Troubleshooting

Cross-Origin Resource Sharing (CORS)

Due to CORS you have to provide video resource locally or from server with proper Access-Control-Allow-Origin header.

Changelog

All changes are listed here

License

The MIT License @ 2018