Skip to content
A plugin for clappr that adds support for picture-in-picture on devices which support it.
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
demo
dist
src
.babelrc
.gitignore
LICENSE
README.md
package.json
screenshot.png
webpack.config.js

README.md

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/npm/clappr-pip-plugin@latest/dist/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

You can’t perform that action at this time.