{"id":16557861,"url":"https://github.com/lewhunt/react-video-looper","last_synced_at":"2025-03-17T14:12:27.598Z","repository":{"id":43493572,"uuid":"233097379","full_name":"lewhunt/react-video-looper","owner":"lewhunt","description":"A video player component for looping inner sections of video. Packaged as an npm library and cdn script.","archived":false,"fork":false,"pushed_at":"2024-10-12T17:03:27.000Z","size":31934,"stargazers_count":28,"open_issues_count":19,"forks_count":6,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-24T20:54:54.956Z","etag":null,"topics":["javascript","looper","looping","playback","player","react","react-video-player","repeats","trimming","video","video-looper","video-player"],"latest_commit_sha":null,"homepage":"https://lewhunt.github.io/react-video-looper/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/lewhunt.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2020-01-10T17:28:30.000Z","updated_at":"2024-07-25T16:37:15.000Z","dependencies_parsed_at":"2024-10-26T20:28:43.089Z","dependency_job_id":"a1abd43e-a03e-43ec-b420-72029890d976","html_url":"https://github.com/lewhunt/react-video-looper","commit_stats":{"total_commits":52,"total_committers":2,"mean_commits":26.0,"dds":0.3653846153846154,"last_synced_commit":"61354bc707e225dcd18561f9249e8a226dd9ab1b"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewhunt%2Freact-video-looper","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewhunt%2Freact-video-looper/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewhunt%2Freact-video-looper/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/lewhunt%2Freact-video-looper/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/lewhunt","download_url":"https://codeload.github.com/lewhunt/react-video-looper/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":241758957,"owners_count":20015247,"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":["javascript","looper","looping","playback","player","react","react-video-player","repeats","trimming","video","video-looper","video-player"],"created_at":"2024-10-11T20:08:43.547Z","updated_at":"2025-03-03T23:49:35.927Z","avatar_url":"https://github.com/lewhunt.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Video Looper\n\nA React video player for looping inner sections of a video file. Packaged as an npm component library and CDN script.\n\n![Example](https://github.com/lewhunt/assets/raw/master/readme/react-video-looper-example.gif)\n\n```\n\u003cVideoLooper source='sample.mp4' start={4.31} end={9.48} loopCount={2} isDebugMode /\u003e\n```\n\n[See it in use here - React Fitness App](https://lewhunt.github.io/react-fitness-app/)\n\n[Demo Editor (with debug mode)](https://lewhunt.github.io/react-video-looper/)\n\n[CodePen Demo (bare-bones sample)](https://codepen.io/lewhunt/pen/vYEaKMj)\n\n## Intro\n\n### What is it?\n\nThis react component provides non-destructive inner looping on video files. By specifying start and end trim points it begins playback at zero and then repeats an infinite (or finite) loop on the trimmed portion of the video. Fullscreen by default.\n\n### Why do it?\n\nInitially built to assist in the development of an [interactive fitness app](https://lewhunt.github.io/react-fitness-app/), it offers an interesting alternative to the default HTML5 video loop attribute because it can play the original source file from the start but then repeat loop the trimmed portion of the video. In many cases it provides a more seamless loop compared to the default loop attribute or media fragment parameters.\n\n### How is it done?\n\nUnder the hood this component utilises two overlapping video elements that playback in turn. Running the demo in debug mode (with split view enabled) further illustrates this technique with debug text and the cloned video is set to greyscale. See the end of this readme for more info on the [editor](#demo-editor).\n\n## Install\n\n### npm package (recommended)\n\n```bash\nnpm i react-video-looper\n```\n\n### CDN script (for prototyping only)\n\n```js\n\u003cscript\n  type=\"text/javascript\"\n  src=\"https://unpkg.com/react-video-looper/umd/react-video-looper.min.js\"\n\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Node.js development setup (recommended)\n\n```js\nimport React from \"react\";\nimport VideoLooper from \"react-video-looper\";\nimport sampleVideo from \"../assets/sample.mp4\";\n\nexport default function Demo() {\n  return (\n    \u003cdiv\u003e\n      \u003cVideoLooper source=\"{sampleVideo}\" start={4.31} end={9.48} /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n### Browser script setup (for prototyping only)\n\n```js\n\u003cbody\u003e\n  \u003cdiv id=\"app\"\u003e\u003c/div\u003e\n  \u003cscript src=\"https://unpkg.com/@babel/standalone/babel.min.js\"\u003e\u003c/script\u003e\n  \u003cscript\n    src=\"https://unpkg.com/react@16/umd/react.production.min.js\"\n    crossorigin\n  \u003e\u003c/script\u003e\n  \u003cscript\n    src=\"https://unpkg.com/react-dom@16/umd/react-dom.production.min.js\"\n    crossorigin\n  \u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/react-video-looper/umd/react-video-looper.min.js\"\u003e\u003c/script\u003e\n  \u003cscript type=\"text/babel\"\u003e\n    ReactDOM.render(\n    \u003cVideoLooper source=\"sample.mp4\" start={4.31} end={9.48} /\u003e, document.getElementById('app'))\n  \u003c/script\u003e\n\u003c/body\u003e\n```\n\n## Options / Props\n\n| Name             | Type   | Required | Default      | Description                                                             |\n| ---------------- | ------ | -------- | ------------ | ----------------------------------------------------------------------- |\n| `source`         | string | required | 'sample.mp4' | Name of the video source file                                           |\n| `start`          | number | required | 4.31         | starting point of loop in seconds                                       |\n| `end`            | number | required | 9.48         | ending point of loop in seconds                                         |\n| `speed`          | number | optional | 1            | video playback rate                                                     |\n| `loopCount`      | number | optional | null         | optional amount of loops to run before playing to end of video          |\n| `autoPlay`       | bool   | optional | true         | automatically start video playback                                      |\n| `muted`          | bool   | optional | true         | disable audio of video loop                                             |\n| `playsInline`    | bool   | optional | true         | prevent automatic fullscreen mode in mobile browsers                    |\n| `isDebugMode`    | bool   | optional | false        | debug mode titles the active video instance and current playback time   |\n| `isSplitView`    | bool   | optional | false        | illustrative split-view of the two video instances playing side by side |\n| `width`          | string | optional | '100%'       | css width of the component (default is full width)                      |\n| `height`         | string | optional | '100vh'      | css height of the component (default is full height)                    |\n| `objectFit`      | string | optional | 'cover'      | css object-fit size of the video (default is clipped to fit)            |\n| `objectPosition` | string | optional | '40%'        | css object-position alignment of the video                              |\n\n## Demo Editor\n\nThe demo includes a simple editor that allows you to change some of the options. The [react-use-form-data hook](https://github.com/lewhunt/react-use-form-data) is used to manage the demo editor's data state:\n\n![Demo Editor Example](https://github.com/lewhunt/assets/raw/master/readme/react-use-form-data-example.gif)\n\n## Example In Use\n\nThe component is currently used in the [React Fitness App](https://lewhunt.github.io/react-fitness-app/):\n\n![React Fitness App Example](https://github.com/lewhunt/assets/raw/master/readme/react-fitness-app-example.gif)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flewhunt%2Freact-video-looper","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Flewhunt%2Freact-video-looper","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Flewhunt%2Freact-video-looper/lists"}