https://github.com/rendfall/mini-video-playback

Make the video pop out so that you could move it wherever you like
https://github.com/rendfall/mini-video-playback

media playback player playing preview video

Last synced: 8 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/rendfall/mini-video-playback
• Owner: rendfall
• License: mit
• Created: 2018-03-16T20:49:02.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2019-04-06T14:23:09.000Z (about 7 years ago)
• Last Synced: 2025-02-14T12:17:42.775Z (over 1 year ago)
• Topics: media, playback, player, playing, preview, video
• Language: JavaScript
• Homepage: https://rendfall.github.io/mini-video-playback/demo/
• Size: 1.22 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# Mini Video Playback ([npm](https://www.npmjs.com/package/mini-video-playback))

[![npm version](https://badge.fury.io/js/mini-video-playback.svg)](https://badge.fury.io/js/mini-video-playback)

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

![logo-128.png](https://raw.githubusercontent.com/rendfall/mini-video-playback/master/assets/logo-128.png "Logo")

## Install

```

$ npm install mini-video-playback

```

## Usage

```javascript

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](./CHANGELOG.md)

## License

[The MIT License](http://rendfall.mit-license.org) @ 2018