Naphthalene Possum Management

    react-video-scroll

    1.0.1 • Public • Published

    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>

    Install

    npm i react-video-scroll

    DownloadsWeekly Downloads

    83

    Version

    1.0.1

    License

    ISC

    Unpacked Size

    22.1 kB

    Total Files

    5

    Last publish

    Collaborators

    • nitin42