react-video-scroll

A React component to seek or control the video frame rate on scroll.

Downloads in past

Stats

StarsIssuesVersionUpdatedCreatedSize
react-video-scroll
1.0.16 years ago6 years agoMinified + gzip package size for react-video-scroll in KB

Readme

react-video-scroll
size
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
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 = `calc(180% - ${Math.floor(videoEl.duration) *
    playbackRate +
    'px'})`
}

function App() {
  return (
    <VideoScroll
      onLoad={props =>
        setStyles(props.wrapperEl, props.videoEl, props.playbackRate)
      }
      playbackRate={15}
      style={{ position: 'sticky' }}
    >
      <video
        tabIndex="0"
        autobuffer="autobuffer"
        preload="preload"
        style={{ width: '100%', objectFit: 'contain' }}
        playsInline
      >
        <source type="video/mp4" src="./oculus.mp4" />
      </video>
    </VideoScroll>
  )
}

render(<App />, document.getElementById('root'))

Download oculus.mp4, place it in the public folder which you're serving and then run the example.

API

VideoScroll Component

Props

playbackRate
type: number
Description: Set the playback rate when seeking the video on scroll.
<VideoScroll playbackRate={20}>
  <video>
    <source type="video/mp4" source="some_file.mp4" />
  </video>
</VideoScroll>
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

const onScroll = (props) => {
  const { currentFrame } => props

  setState({ frame: Math.floor(currentFrame)})
}

<VideoScroll onScroll={onScroll}>
  <video><source type="video/mp4" src="some_file.mp4" /></video>
</VideoScroll>
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

const onLoad = (props) => {
  const { wrapper, playbackRate, el } = props

  wrapper.style.marginTop = `calc(180% - ${Math.floor(el.duration) *
    playbackRate +
    'px'})`
  wrapper.style.marginBottom = `calc(180% - ${Math.floor(el.duration) *
    playbackRate +
    'px'})`
}

<VideoScroll onLoad={onLoad}>
  <video><source type="video/mp4" src="some_file.mp4" /></video>
</VideoScroll>
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.
<VideoScroll horizontalScroll={true}>
  <video>
    <source type="video/mp4" src="some_file.mp4" />
  </video>
</VideoScroll>
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.
const setFrame = (props) => {
  const { duration, playbackRate } = props

  return window.pageYOffset / 20 - playbackRate
}

<VideoScroll setCurrentFrame={setFrame} horizontalScroll={true}>
  <video>
    <source type="video/mp4" src="some_file.mp4" />
  </video>
</VideoScroll>