react-video-scroll
v1.0.1
A React component to seek or control the video frame rate on scroll.
0/weekUpdated 3 years agoISCUnpacked: 22.1 KB
Published by Nitin Tulswani
npm install react-video-scrollreact-video-scroll
> A React component to seek or control the video frame rate on scroll.
Motivation
Go to Oculus Go 😄
Demo
Install
``
npm install react-video-scroll
or if you use yarn
`
yarn add react-video-scroll
Usage
In order to use this component, you will need to wrap the video element with a source tag under the VideoScroll component.
Example
`js
import React from 'react'
import { render } from 'react-dom'
import { VideoScroll } from 'react-video-scroll'
const setStyles = (wrapperEl, videoEl, playbackRate) => {
wrapperEl.style.marginTop = calc(180% - ${Math.floor(videoEl.duration) *
playbackRate +
'px'})
wrapperEl.style.marginBottom =
playbackRate +
'px'})
}
function App() {
return (
setStyles(props.wrapperEl, props.videoEl, props.playbackRate)
}
playbackRate={15}
style={{ position: 'sticky' }}
>
autobuffer="autobuffer"
preload="preload"
style={{ width: '100%', objectFit: 'contain' }}
playsInline
>
)
}
render(
`
Download oculus.mp4, place it in the public folder which you're serving and then run the example.
API
$3
#### Props
##### playbackRate
type: number
Description: Set the playback rate when seeking the video on scroll.
`js`
##### onScroll
type: function
Return type: void
Description: onScroll is invoked when the page is scroll. It receives the following arguments -
* wrapperEl - Reference to video wrapper i.e VideoScroll component
* videoEl - Reference to video element
* currentFrame - Current frame / current time of video
* playbackRate - Playback rate
* duration - Duration of video
`js
const onScroll = (props) => {
const { currentFrame } => props
setState({ frame: Math.floor(currentFrame)})
}
`
##### onLoad
type: function
Return type: void
Description: onLoad is invoked when the video is finished loading. Use onLoad to update the height of video wrapper or video element, or applying some other styles to adjust the video on the page. It receives the following arguments -
* wrapperEl - Reference to video wrapper i.e VideoScroll component
* videoEl - Reference to the video element
* playbackRate - Playback rate of video
`js
const onLoad = (props) => {
const { wrapper, playbackRate, el } = props
wrapper.style.marginTop = calc(180% - ${Math.floor(el.duration) *
playbackRate +
'px'})
wrapper.style.marginBottom =
playbackRate +
'px'})
}
`
##### horizontalScroll
type: boolean
default: false
Description: Set horizontalScroll to true for seeking the video on horizontal scroll. Set the styles of wrapper or video element using onLoad callback before setting the value for horizontalScroll.
By default, the video will seek on scrolling vertically.
`js`
##### setCurrentFrame
type: Function
Return value: number
Description: Use setCurrentFrame to set the current frame of video. By default, the frame rate is managed [internally]() using pageXOffset and pageYOffset value. setCurrentFrame receives the following arguments -
* duration - Duration of video
* playbackRate - Playback rate of video
setCurrentFrame should return a number value for setting the current frame of a video.
`js
const setFrame = (props) => {
const { duration, playbackRate } = props
return window.pageYOffset / 20 - playbackRate
}
``