{"id":13630600,"url":"https://github.com/nitin42/react-video-scroll","last_synced_at":"2025-03-16T19:30:35.430Z","repository":{"id":87330573,"uuid":"132782974","full_name":"nitin42/react-video-scroll","owner":"nitin42","description":"A React component to seek or control the video frame rate on scroll.","archived":false,"fork":false,"pushed_at":"2018-12-03T18:09:20.000Z","size":82834,"stargazers_count":138,"open_issues_count":4,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-12T16:09:58.466Z","etag":null,"topics":["react","scroll","video-frame-rate","web"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/nitin42.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-05-09T16:15:46.000Z","updated_at":"2024-05-03T20:23:08.000Z","dependencies_parsed_at":null,"dependency_job_id":"4402b6d4-0ffc-4670-a3c1-18da84921578","html_url":"https://github.com/nitin42/react-video-scroll","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-video-scroll","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-video-scroll/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-video-scroll/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/nitin42%2Freact-video-scroll/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/nitin42","download_url":"https://codeload.github.com/nitin42/react-video-scroll/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221667116,"owners_count":16860552,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["react","scroll","video-frame-rate","web"],"created_at":"2024-08-01T22:01:48.993Z","updated_at":"2024-10-27T11:08:20.908Z","avatar_url":"https://github.com/nitin42.png","language":"JavaScript","readme":"# react-video-scroll\n\n[![size](https://img.badgesize.io/https://unpkg.com/react-video-scroll?compression=gzip\u0026label=size)](https://unpkg.com/react-video-scroll)\n\n\u003e A React component to seek or control the video frame rate on scroll.\n\n## Motivation\n\nGo to [Oculus Go](https://www.oculus.com/go/) 😄\n\n## Demo\n\n\u003cp align='center'\u003e\n  \u003cimg src='./media/ReactVideoScroll.gif' /\u003e\n\u003c/p\u003e\n\n## Install\n\n```\nnpm install react-video-scroll\n```\n\nor if you use yarn\n\n```\nyarn add react-video-scroll\n```\n\n## Usage\n\nIn order to use this component, you will need to wrap the `video` element with a `source` tag under the `VideoScroll` component.\n\n**Example**\n\n```js\nimport React from 'react'\nimport { render } from 'react-dom'\nimport { VideoScroll } from 'react-video-scroll'\n\nconst setStyles = (wrapperEl, videoEl, playbackRate) =\u003e {\n  wrapperEl.style.marginTop = `calc(180% - ${Math.floor(videoEl.duration) *\n    playbackRate +\n    'px'})`\n  wrapperEl.style.marginBottom = `calc(180% - ${Math.floor(videoEl.duration) *\n    playbackRate +\n    'px'})`\n}\n\nfunction App() {\n  return (\n    \u003cVideoScroll\n      onLoad={props =\u003e\n        setStyles(props.wrapperEl, props.videoEl, props.playbackRate)\n      }\n      playbackRate={15}\n      style={{ position: 'sticky' }}\n    \u003e\n      \u003cvideo\n        tabIndex=\"0\"\n        autobuffer=\"autobuffer\"\n        preload=\"preload\"\n        style={{ width: '100%', objectFit: 'contain' }}\n        playsInline\n      \u003e\n        \u003csource type=\"video/mp4\" src=\"./oculus.mp4\" /\u003e\n      \u003c/video\u003e\n    \u003c/VideoScroll\u003e\n  )\n}\n\nrender(\u003cApp /\u003e, document.getElementById('root'))\n```\n\nDownload [oculus.mp4](./public/oculus.mp4), place it in the public folder which you're serving and then run the example.\n\n## API\n\n### `VideoScroll` Component\n\n#### Props\n\n##### `playbackRate`\n\n**type**: `number`\n\n**Description**: Set the playback rate when seeking the video on scroll.\n\n```js\n\u003cVideoScroll playbackRate={20}\u003e\n  \u003cvideo\u003e\n    \u003csource type=\"video/mp4\" source=\"some_file.mp4\" /\u003e\n  \u003c/video\u003e\n\u003c/VideoScroll\u003e\n```\n\n##### `onScroll`\n\n**type**: `function`\n\n**Return type**: `void`\n\n**Description**: `onScroll` is invoked when the page is scroll. It receives the following arguments -\n\n* `wrapperEl` - Reference to video wrapper i.e `VideoScroll` component\n\n* `videoEl` - Reference to video element\n\n* `currentFrame` - Current frame / current time of video\n\n* `playbackRate` - Playback rate\n\n* `duration` - Duration of video\n\n```js\nconst onScroll = (props) =\u003e {\n  const { currentFrame } =\u003e props\n\n  setState({ frame: Math.floor(currentFrame)})\n}\n\n\u003cVideoScroll onScroll={onScroll}\u003e\n  \u003cvideo\u003e\u003csource type=\"video/mp4\" src=\"some_file.mp4\" /\u003e\u003c/video\u003e\n\u003c/VideoScroll\u003e\n```\n\n##### `onLoad`\n\n**type**: `function`\n\n**Return type**: `void`\n\n**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 -\n\n* `wrapperEl` - Reference to video wrapper i.e `VideoScroll` component\n\n* `videoEl` - Reference to the video element\n\n* `playbackRate` - Playback rate of video\n\n```js\nconst onLoad = (props) =\u003e {\n  const { wrapper, playbackRate, el } = props\n\n  wrapper.style.marginTop = `calc(180% - ${Math.floor(el.duration) *\n    playbackRate +\n    'px'})`\n  wrapper.style.marginBottom = `calc(180% - ${Math.floor(el.duration) *\n    playbackRate +\n    'px'})`\n}\n\n\u003cVideoScroll onLoad={onLoad}\u003e\n  \u003cvideo\u003e\u003csource type=\"video/mp4\" src=\"some_file.mp4\" /\u003e\u003c/video\u003e\n\u003c/VideoScroll\u003e\n```\n\n##### `horizontalScroll`\n\n**type**: `boolean`\n\n**default**: `false`\n\n**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`.\n\nBy default, the video will seek on scrolling vertically.\n\n```js\n\u003cVideoScroll horizontalScroll={true}\u003e\n  \u003cvideo\u003e\n    \u003csource type=\"video/mp4\" src=\"some_file.mp4\" /\u003e\n  \u003c/video\u003e\n\u003c/VideoScroll\u003e\n```\n\n##### `setCurrentFrame`\n\n**type**: `Function`\n\n**Return value**: `number`\n\n**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 -\n\n* `duration` - Duration of video\n\n* `playbackRate` - Playback rate of video\n\n**`setCurrentFrame` should return a number value for setting the current frame of a video.**\n\n```js\nconst setFrame = (props) =\u003e {\n  const { duration, playbackRate } = props\n\n  return window.pageYOffset / 20 - playbackRate\n}\n\n\u003cVideoScroll setCurrentFrame={setFrame} horizontalScroll={true}\u003e\n  \u003cvideo\u003e\n    \u003csource type=\"video/mp4\" src=\"some_file.mp4\" /\u003e\n  \u003c/video\u003e\n\u003c/VideoScroll\u003e\n```\n","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-video-scroll","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fnitin42%2Freact-video-scroll","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fnitin42%2Freact-video-scroll/lists"}