A plugin for clappr which adds support for picture-in-picture on devices which support it, currently iOS on some models.
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.
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/
Install dependencies:
npm install
Build:
npm run build
Minified version:
npm run release