react-picture-in-picture

React Component that allow you to easily implement the Picture-in-Picture API (https://w3c.github.io/picture-in-picture/) in your app

play with the demo

Install

npm install --save react-picture-in-picture

or

yarn add react-picture-in-picture

Usage

import React, { useState } from 'react'

import Reactpip from 'react-picture-in-picture'

const ReactpipExemple = () =>{
  const[active, setActive] = useState(false)
  render () {
    return (
      <>
        <Reactpip isActive= {active} >
          <source src="https://cdn.arnellebalane.com/videos/original-video.mp4"/>
        </Reactpip>
        <button onClick = {() => setActive(!active)}>Toggle Picture in Picture</button>
      </>
    )
  }
}
export default ReactpipExemple

Props

Here the list of all props :

Name	type	Description	Is required ?	Default value
id	string	set a custom id to the video player	no	'videopip'
isActive	boolean	state that allow to turn on or of the pip mode	no	false
callBackSuccessOnEnable	function	function that would be called if the media where successfully go to pip mode	no	❌
callBackSuccessOnDisable	function	function called when the pip mode is successfully disabled	no	❌
style	style object	style that would be apply to the video element	no	❌
className	string	className that would be apply to the video element	no	❌
autoplay	boolean	enable autoplay on the video player	no	false
controls	boolean	enable or not video controls	no	true
children	node	children element that can be include between the element (eg : < source > tag)	no	❌
loop	boolean	enable loop play on the video	no	false
muted	boolean	mute the video player sound	no	false
classOnEnable	string	css class that would be activate on the video player when pip mode is enable	no	❌

License

MIT © Thomascogez