react-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

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>