{"id":17989413,"url":"https://github.com/etesam913/custoplayer","last_synced_at":"2025-03-25T23:30:41.004Z","repository":{"id":106974538,"uuid":"591135448","full_name":"Etesam913/Custoplayer","owner":"Etesam913","description":"A React.js npm package that allows for the rapid creation of customizable video players.","archived":false,"fork":false,"pushed_at":"2023-11-06T03:46:58.000Z","size":4458,"stargazers_count":19,"open_issues_count":10,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-03-20T22:08:54.677Z","etag":null,"topics":["javascript","npm","react","typescript","video","video-player","video-player-library"],"latest_commit_sha":null,"homepage":"https://etesam913.github.io/Custoplayer/","language":"TypeScript","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/Etesam913.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":"2023-01-20T01:50:06.000Z","updated_at":"2024-03-08T03:15:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"8c008d25-b181-425c-b756-94e293116abe","html_url":"https://github.com/Etesam913/Custoplayer","commit_stats":null,"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Etesam913%2FCustoplayer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Etesam913%2FCustoplayer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Etesam913%2FCustoplayer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Etesam913%2FCustoplayer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Etesam913","download_url":"https://codeload.github.com/Etesam913/Custoplayer/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":245561112,"owners_count":20635677,"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","npm","react","typescript","video","video-player","video-player-library"],"created_at":"2024-10-29T19:14:38.511Z","updated_at":"2025-03-25T23:30:40.972Z","avatar_url":"https://github.com/Etesam913.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1\u003eCustoplayer\u003c/h1\u003e\n\u003cp\u003eA React.js npm package that allows for the rapid creation of customizable video players. \u003c/p\u003e\n\u003cspan\u003e\n  \u003cimg src=\"https://img.shields.io/badge/license-MIT-green\"\u003e\u003c/img\u003e\n  \u003cimg src=\"https://img.shields.io/github/issues/etesam913/Custoplayer\"\u003e\u003c/img\u003e\n  \u003ca href=\"https://codecov.io/gh/Etesam913/Custoplayer\"\u003e\n    \u003cimg src=\"https://codecov.io/gh/Etesam913/Custoplayer/branch/main/graph/badge.svg?token=GOZ1AQ77C2\"/\u003e\n  \u003c/a\u003e\n  \u003cimg src=\"https://github.com/Etesam913/Custoplayer/actions/workflows/linting.yml/badge.svg\"/\u003e\n  \u003cimg src=\"https://github.com/Etesam913/Custoplayer/actions/workflows/tests.yml/badge.svg\"/\u003e\n  \u003cimg src=\"https://img.shields.io/npm/v/custoplayer\"/\u003e\n\n\u003c/span\u003e\n\u003cimg src=\"https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs%2FWritten-By-Human-Not-By-AI-Badge-white.svg\"/\u003e\n\n\u003ch2\u003eDemo Video\u003c/h2\u003e\n\nhttps://github.com/Etesam913/Custoplayer/assets/55665282/fedcb5a5-ec94-4fe0-b554-2bf78cf62c6a\n\n\u003ch2\u003e\u003ca href=\"https://etesam913.github.io/Custoplayer/quick-start\"\u003eDocumentation Page\u003c/a\u003e \u003c/h2\u003e\n\n\u003ch2\u003e📦 Installation\u003c/h2\u003e\n\u003ch3\u003enpm\u003c/h3\u003e\n\n```\nnpm install custoplayer\n```\n\n\u003ch3\u003eyarn\u003c/h3\u003e\n\n```\nyarn add custoplayer\n```\n\n\u003ch2\u003e💻 Example Usage\u003c/h2\u003e\n\n```jsx\nimport React from 'react';\nimport { Custoplayer } from 'custoplayer';\n\nfunction CustoplayerExample() {\n  return (\n    \u003cCustoplayer\n      poster='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/custoplayer-demo-poster.png'\n      src='https://custoplayer.nyc3.cdn.digitaloceanspaces.com/docs/compressed-custoplayer-demo.mp4'\n      values={{\n        previewTooltip: {\n          id: 'text',\n        },\n        controlsBar: {\n          animate: 'movement',\n          barColor: 'rgba(28, 28, 28, 0.85)',\n        },\n        item1: {\n          id: 'playButton1',\n          buttonColor: '#b7cef4',\n        },\n        item2: {\n          id: 'volumeButton1',\n          barId: 'volumeBar2',\n          volumeColor: '#a4c3f5',\n          buttonColor: '#a4c3f5',\n        },\n        item3: {\n          id: 'currentTime',\n          textColor: '#b7cef4',\n        },\n        item4: {\n          id: 'progressBar1',\n          progressColor: '#a4c3f5',\n        },\n        item5: {\n          id: 'duration',\n          textColor: '#b7cef4',\n        },\n        item6: {\n          id: 'settingsButton1',\n          buttonColor: '#a4c3f5',\n          settingsMenuColor: '#a4c3f5',\n          settingsMenuOrientation: 'left',\n          options: {\n            playbackSpeed: [0.25, 0.5, 1, 1.5, 2],\n          },\n        },\n        item7: {\n          id: 'fullscreenButton1',\n          buttonColor: '#b7cef4',\n        },\n      }}\n    /\u003e\n  );\n}\n\nexport default CustoplayerExample;\n```\n\n\u003ch2\u003eOverview\u003c/h2\u003e\n\u003ch3\u003eThings you can customize:\u003c/h3\u003e\n\n\u003ch4\u003e🎥 Types of Video Elements\u003c/h4\u003e\n\u003cul\u003e\n  \u003cli\u003eIt's your choice regarding what you want for your video player. \u003c/li\u003e\n  \u003cli\u003eThe inclusion or absence of a play button, volume button/slider, progress bar, fullscreen button, or a settings button is all up to you.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch4\u003e📍 The Location of Video Elements\u003c/h4\u003e\n\u003cul\u003e\n  \u003cli\u003eMaybe you want your play button to be on the right edge of the video and the fullscreen button to be on the left edge of the video.\u003c/li\u003e\n  \u003cli\u003eAlternatively, you may want your progress bar to be to the right of the play button.\u003c/li\u003e\n  \u003cli\u003eChanging the location of video elements in a custoplayer component is very easy to do through the item prop.\u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch4\u003e💄 The Appearance of Video Elements\u003c/h4\u003e\n\u003cul\u003e\n  \u003cli\u003eChanging the appearance of video elements is important when trying to create or match a brand identity.\u003c/li\u003e\n  \u003cli\u003eThe colors of a play buttons, progress bar, volume bar, fullscreen button, settings button, and more can be customized. \u003c/li\u003e\n  \u003cli\u003eIn addition, there are different variants of a component. \u003c/li\u003e\n\u003c/ul\u003e\n\n\u003ch2\u003e See More at the \u003ca href=\"https://etesam913.github.io/Custoplayer/docs/quick-start\"\u003eDocumentation Page\u003c/a\u003e \u003c/h2\u003e\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetesam913%2Fcustoplayer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fetesam913%2Fcustoplayer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetesam913%2Fcustoplayer/lists"}