{"id":28471918,"url":"https://github.com/webfactory/video-utils","last_synced_at":"2025-07-06T08:04:55.382Z","repository":{"id":275115364,"uuid":"924698940","full_name":"webfactory/video-utils","owner":"webfactory","description":"Web Component with progressive enhancements for the HTML \u003cvideo\u003e element","archived":false,"fork":false,"pushed_at":"2025-06-12T09:10:38.000Z","size":10,"stargazers_count":2,"open_issues_count":1,"forks_count":0,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-07-01T22:36:06.572Z","etag":null,"topics":["web-component"],"latest_commit_sha":null,"homepage":"","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/webfactory.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,"zenodo":null}},"created_at":"2025-01-30T13:47:08.000Z","updated_at":"2025-06-12T09:10:40.000Z","dependencies_parsed_at":"2025-01-31T10:20:25.378Z","dependency_job_id":"e6b1ea99-0030-4163-ba4f-0fc8ce7e9af0","html_url":"https://github.com/webfactory/video-utils","commit_stats":null,"previous_names":["webfactory/video-utils"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/webfactory/video-utils","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Fvideo-utils","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Fvideo-utils/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Fvideo-utils/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Fvideo-utils/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/webfactory","download_url":"https://codeload.github.com/webfactory/video-utils/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/webfactory%2Fvideo-utils/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263868249,"owners_count":23522317,"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":["web-component"],"created_at":"2025-06-07T11:09:24.767Z","updated_at":"2025-07-06T08:04:55.356Z","avatar_url":"https://github.com/webfactory.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# \u0026lt;video-utils\u0026gt;\n\nWeb Component with progressive enhancements for the HTML \u0026lt;video\u003e element\n\n## Installation\n\n```\nnpm install @webfactoryde/video-utils\n```\n\n## Usage\n\nThe `\u003cvideo-utils\u003e` Web Component is meant to be a lightweight wrapper and progressive accessibility enhancement for `\u003cvideo\u003e` elements that autoplay muted background video.\n\nIt supports manual controls (pause and play buttons) so the video can meet [WCAG 2.1 SC 2.2.2: Pause, Stop, Hide](https://www.w3.org/TR/WCAG21/#pause-stop-hide). \n\nIt also implements a media query for `prefers-reduced-motion: reduced`, an OS level user preference option that signals that automatic movement should be limited, and prevents autoplay if the media query (and user preference) matches.\n\nBackground infos:\n- https://github.com/w3c/wcag/issues/3766\n- https://github.com/w3c/wcag/issues/3478\n- https://www.scottohara.me/note/2019/07/12/reduced-motion-video.html\n\n### Steps to implement:\n\n1. The JS file \"video-utils.js\" must be loaded. Depending on browser support requirements, transpilation for older browsers is recommended.\n2. Wrap your  `\u003cvideo\u003e` with `\u003cvideo-utils\u003e`.\n3. Add both a pause and a play `\u003cbutton\u003e` with your desired markup (e.g. nested icon, attributes, translated text, etc.). The buttons need to be made identifiable with `data-video-utils-play` and `data-video-utils-pause` respectively. The Web Component leaves positioning and aesthetics of the buttons to the outside context.\n\n### Example\n\n```\n\u003cvideo-utils\u003e\n    \u003cvideo autoplay=\"\" muted=\"\" loop=\"\" playsinline=\"\"\u003e\n        \u003csource src=\"https://download.blender.org/peach/bigbuckbunny_movies/big_buck_bunny_480p_h264.mov\"\u003e\n    \u003c/video\u003e\n    \u003cbutton data-video-utils-play\u003ePlay\u003c/button\u003e\n    \u003cbutton data-video-utils-pause\u003ePause\u003c/button\u003e\n\u003c/video-utils\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebfactory%2Fvideo-utils","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fwebfactory%2Fvideo-utils","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fwebfactory%2Fvideo-utils/lists"}