{"id":22207573,"url":"https://github.com/an678-mhg/vnetwork-player","last_synced_at":"2025-07-27T08:32:48.054Z","repository":{"id":210023248,"uuid":"725483098","full_name":"an678-mhg/vnetwork-player","owner":"an678-mhg","description":"A React component custom player support video m3u8, mp4","archived":false,"fork":false,"pushed_at":"2024-11-27T06:31:11.000Z","size":526,"stargazers_count":7,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"master","last_synced_at":"2024-11-27T07:19:00.793Z","etag":null,"topics":["library","player-video","react-library","reactjs"],"latest_commit_sha":null,"homepage":"https://www.npmjs.com/package/vnetwork-player","language":"TypeScript","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/an678-mhg.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,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2023-11-30T08:36:24.000Z","updated_at":"2024-11-27T06:31:15.000Z","dependencies_parsed_at":"2024-03-07T04:29:02.699Z","dependency_job_id":"7f344bf0-17e1-4267-abf6-036b7a1baf6b","html_url":"https://github.com/an678-mhg/vnetwork-player","commit_stats":null,"previous_names":["an678-mhg/vnetwork-player"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/an678-mhg%2Fvnetwork-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/an678-mhg%2Fvnetwork-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/an678-mhg%2Fvnetwork-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/an678-mhg%2Fvnetwork-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/an678-mhg","download_url":"https://codeload.github.com/an678-mhg/vnetwork-player/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":227786842,"owners_count":17819776,"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":["library","player-video","react-library","reactjs"],"created_at":"2024-12-02T19:13:40.523Z","updated_at":"2024-12-02T19:13:41.205Z","avatar_url":"https://github.com/an678-mhg.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# VNETWORK Player\n\n[![Downloads](https://img.shields.io/npm/dt/vnetwork-player.svg?style=flat\u0026color=success)](https://www.npmjs.com/package/vnetwork-player)\n![Libraries.io dependency status for latest release](https://img.shields.io/librariesio/release/npm/vnetwork-player)\n[![Build Size](https://img.shields.io/bundlejs/size/vnetwork-player)](https://pkg-size.dev/vnetwork-player)\n[![Version](https://img.shields.io/npm/v/vnetwork-player?style=flat\u0026color=success)](https://www.npmjs.com/package/vnetwork-player)\n\u003ca href=\"https://pkg-size.dev/vnetwork-player\"\u003e\u003cimg src=\"https://pkg-size.dev/badge/install/103906\" title=\"Install size for vnetwork-player\"\u003e\u003c/a\u003e\n\u003ca href=\"https://pkg-size.dev/vnetwork-player\"\u003e\u003cimg src=\"https://pkg-size.dev/badge/bundle/24854\" title=\"Bundle size for vnetwork-player\"\u003e\u003c/a\u003e\n\nA React component custom player support video m3u8, mp4\n\n\n## Demo Player \n\n\u003ca href=\"https://vnetwork-player.vercel.app/\" target=\"_blank\"\u003e\n  https://vnetwork-player.vercel.app/\n\u003c/a\u003e\n\n## Installation\n\n```bash\nnpm i vnetwork-player\n# or\n# yarn add vnetwork-player\n```\n\n## Import\n\n```jsx\nimport VPlayer from \"vnetwork-player\";\nimport \"vnetwork-player/dist/vnetwork-player.min.css\" // import css\n```\n\n## Examples\n\n### Video MP4\n\n```jsx\n\n// mp4 single src\n\n\u003cVPlayer\n  source=\"https://example.com/file-video.mp4\"\n  color=\"#ff0000\"\n  autoPlay\n  subtitle={[\n    {\n      lang: \"Fr\",\n      url: \"/fr.vtt\"\n    },\n    {\n      lang: \"En\",\n      url: \"/en.vtt\"\n    },\n  ]}\n/\u003e\n\n// mp4 multiple src\n\n\u003cVPlayer\n  source={\n    [\n      { label: \"720p\", url: \"https://example/file/720.mp4\" },\n      { label: \"1080p\", url: \"https://example/file/1080.mp4\" }\n    ]\n  }\n  color=\"#ff0000\"\n  autoPlay\n  subtitle={[\n    {\n      lang: \"Fr\",\n      url: \"/fr.vtt\"\n    },\n    {\n      lang: \"En\",\n      url: \"/en.vtt\"\n    },\n  ]}\n/\u003e\n\n```\n\n### Video M3U8\n\n```bash\nnpm i hls.js\n# or\n# yarn add hls.js\n```\n\n```jsx\nimport Hls from 'hls.js'\n\n// m3u8 single src\n\n\u003cVPlayer\n  source=\"https://example.com/file-video.mp4\"\n  color=\"#ff0000\"\n  autoPlay\n  subtitle={[\n    {\n      lang: \"Fr\",\n      url: \"/fr.vtt\"\n    },\n    {\n      lang: \"En\",\n      url: \"/en.vtt\"\n    },\n  ]}\n  Hls={Hls}\n/\u003e\n\n// m3u8 multiple src\n\n\u003cVPlayer\n  source={\n    [\n      { label: \"720p\", url: \"https://example/file/720.mp4\" },\n      { label: \"1080p\", url: \"https://example/file/1080.mp4\" }\n    ]\n  }\n  color=\"#ff0000\"\n  autoPlay\n  subtitle={[\n    {\n      lang: \"Fr\",\n      url: \"/fr.vtt\"\n    },\n    {\n      lang: \"En\",\n      url: \"/en.vtt\"\n    },\n  ]}\n  Hls={Hls}\n/\u003e\n\n```\n\n### Custom Ref\n\n```jsx\n\nconst ref = useRef(null)\n\nuseEffect(() =\u003e {\n  console.log(ref?.current) // Video element\n}, [ref?.current])\n\n\u003cVPlayer playerRef={ref} /\u003e\n\n```\n\n## Player props\n\n\u003ca href=\"https://github.com/an678-mhg/vnetwork-player/blob/master/src/utils/types.ts\" target=\"_blank\"\u003ehttps://github.com/an678-mhg/vnetwork-player/blob/master/src/utils/types.ts\u003c/a\u003e\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fan678-mhg%2Fvnetwork-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fan678-mhg%2Fvnetwork-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fan678-mhg%2Fvnetwork-player/lists"}