{"id":19511706,"url":"https://github.com/thecodetherapy/annotated-player","last_synced_at":"2025-07-26T11:03:43.686Z","repository":{"id":44282723,"uuid":"223367260","full_name":"TheCodeTherapy/annotated-player","owner":"TheCodeTherapy","description":"A React-based HTML5 video-player with configurable time-based markers / annotations on the video's timeline progress bar to jump to specific points in time.","archived":false,"fork":false,"pushed_at":"2023-05-07T08:42:20.000Z","size":10926,"stargazers_count":9,"open_issues_count":7,"forks_count":4,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-04-26T03:44:53.422Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"bsd-3-clause","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TheCodeTherapy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"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,"zenodo":null}},"created_at":"2019-11-22T09:18:12.000Z","updated_at":"2025-01-17T03:31:14.000Z","dependencies_parsed_at":"2025-04-26T03:42:53.244Z","dependency_job_id":null,"html_url":"https://github.com/TheCodeTherapy/annotated-player","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TheCodeTherapy/annotated-player","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTherapy%2Fannotated-player","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTherapy%2Fannotated-player/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTherapy%2Fannotated-player/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTherapy%2Fannotated-player/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TheCodeTherapy","download_url":"https://codeload.github.com/TheCodeTherapy/annotated-player/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TheCodeTherapy%2Fannotated-player/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":267155337,"owners_count":24044382,"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","status":"online","status_checked_at":"2025-07-26T02:00:08.937Z","response_time":62,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"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":[],"created_at":"2024-11-10T23:22:23.547Z","updated_at":"2025-07-26T11:03:43.679Z","avatar_url":"https://github.com/TheCodeTherapy.png","language":"CSS","readme":"# Annotated Player\n\nAnnotated Player is a **React-based HTML5 video-player** with configurable **time-based markers** on the video's timeline progress bar, to jump to specific points in time.\n\nEach marker, when mouse-overed, shows its respective marker Title, Description and Thumbnail inside the player, so the user can have a preview of that specific point.\n\nThis player may be useful for long lectures or talks in which several subjects are explored, or simply to organize any video into easily accessible chapters or sections. The marker's thumbnail uses an image file instead of a frame from the video so you can customize a slide or image that better represents that video's section.\n\nThe video player also tries to provide smooth transitions to the video seeking action, thus, also when you click on a marker.\n\nYou can view the final result / production build at [https://player.mgz.me](https://player.mgz.me)\n\nYou can also check my WebGL Projects at my personal website [https://mgz.me](https://mgz.me) ).\n\n- The player is a single React Component, and can be imported to any desired page with `import VideoPlayer from '../../player/VideoPlayer';` (with obvious required replacements regarding the relative path from where the Component is being imported and invoked).\n\n- The configuration is as simple as possible. It can be done by editing a single JavaScript Object as in the example below:\n\n```\nconst videoMarkers = {\n\n    '00:51': {\n        'title': 'Happiness',\n        'description': 'Sharing what we value with our best friends is like sowing happiness.',\n        'thumbURL': 'https://s3.eu-west-2.amazonaws.com/s3uk.mgz.me/vod/happines.jpg'\n    },\n    '02:16': {\n        'title': 'The Awakening',\n        'description': 'Incredible things can happen when you\\'re brave enough to explore the world and push through its limits.',\n        'thumbURL': 'https://s3.eu-west-2.amazonaws.com/s3uk.mgz.me/vod/awakening.jpg'\n    },\n    '03:17': {\n        'title': 'The Sounds we make Together',\n        'description': 'Music can break all barriers. It is the most powerful form of communication.',\n        'thumbURL': 'https://s3.eu-west-2.amazonaws.com/s3uk.mgz.me/vod/sounds.jpg'\n    }\n};\n```\n\nAs it can be seen in the example above, the object key represents a time in Mins:Secs for a specific desired point on the video, and the object assigned to the same key contains the annotation Title, Description and the Thumbnail image URL.\n\n**This project is a WIP, in its very initial stages of development, and there's a lot of room for improvement.**\n\nIn a near future, I'll extend the configuration possibilities in a sense that the timeline colors, annotation symbols, and even the annotations' CSS previews styles will offer the possibility of being customized in the same object used to store the markers.\n\nSmooth transitions when seeking a different point on the video were implemented in quite a hackish way, but it works fine for now, however, there's also a lot of room for improvements and optimization for this feature.\n\nI also plan to provide this player as npm-package in a near future once I consider it to be polished enough.\n\n## Development\n\n### `npm start`\n\nRuns the app in the development mode, making it available with real-time preview at [http://localhost:3000] with lint errors in the browser's console.\n\n### `npm run build`\n\nBuilds the app for production to the `build` folder, correctly bundling React in production mode by optimizing the build for the best file compression, minification and viewing performance.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthecodetherapy%2Fannotated-player","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fthecodetherapy%2Fannotated-player","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fthecodetherapy%2Fannotated-player/lists"}