❤
npm
Sign UpSign In

clappr-pip-plugin

2.0.1 • Public • Published

npm version

Clappr Picture-In-Picture Plugin

A plugin for clappr which adds support for picture-in-picture on devices which support it, currently iOS on some models.

Screenshot

Usage

Add both Clappr and the pip plugin scripts to your HTML:

<head>
  <script type="text/javascript" src="http://cdn.clappr.io/latest/clappr.min.js"></script> 
  <script type="text/javascript" src="https://cdn.jsdelivr.net/clappr.pip-plugin/latest/clappr-pip-plugin.js"></script> 
</head>

You can also find the project on npm: https://www.npmjs.com/package/clappr-pip-plugin

Then just add ClapprPIPPlugin into the list of plugins of your player instance.

var player = new Clappr.Player({
  source: "http://your.video/here.mp4",
  plugins: [ClapprPIPPlugin]
});

That's it, a button will be shown on the media control to enable picture in picture on devices which support it.

Demo

To run the demo start a web server with the root directory being the root of this repo, and then browse to the "index.html" file in the "demo" folder.

I am also hosting a demo at http://tjenkinson.me/clappr-pip-plugin/

Development

Install dependencies:

npm install

Build:

npm run build

Minified version:

npm run release

Versions

Current Tags

  • Version
    Downloads (Last 7 Days)
    • Tag
  • 2.0.1
    3
    • latest

Version History

Package Sidebar

Install

npm i clappr-pip-plugin

Repository

github.com/tjenkinson/clappr-pip-plugin

Homepage

github.com/tjenkinson/clappr-pip-plugin#readme

Weekly Downloads

3

Version

2.0.1

License

MIT

Last publish

Collaborators

  • tjenkinson
Try on RunKit
Report malware