{"id":16393121,"url":"https://github.com/vernak2539/angular-media-events","last_synced_at":"2025-10-26T14:30:22.412Z","repository":{"id":34789036,"uuid":"38772786","full_name":"vernak2539/angular-media-events","owner":"vernak2539","description":"angular directives for media events","archived":false,"fork":false,"pushed_at":"2019-11-14T11:53:56.000Z","size":157,"stargazers_count":5,"open_issues_count":1,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2024-10-04T11:47:44.931Z","etag":null,"topics":["angular","angular-directive","media-events"],"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/vernak2539.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-07-08T18:38:20.000Z","updated_at":"2020-02-07T02:18:38.000Z","dependencies_parsed_at":"2022-09-15T09:51:22.773Z","dependency_job_id":null,"html_url":"https://github.com/vernak2539/angular-media-events","commit_stats":null,"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vernak2539%2Fangular-media-events","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vernak2539%2Fangular-media-events/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vernak2539%2Fangular-media-events/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/vernak2539%2Fangular-media-events/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/vernak2539","download_url":"https://codeload.github.com/vernak2539/angular-media-events/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":219862795,"owners_count":16555951,"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":["angular","angular-directive","media-events"],"created_at":"2024-10-11T04:52:25.104Z","updated_at":"2025-10-26T14:30:22.104Z","avatar_url":"https://github.com/vernak2539.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Angular Media Events [![Build Status](https://travis-ci.org/vernak2539/angular-media-events.svg?branch=master)](https://travis-ci.org/vernak2539/angular-media-events)\n\nThis library should introduce angular directives that respond to [events on media objects][1].\n\n[![Sauce Test Status](https://saucelabs.com/browser-matrix/alvernacchia.svg)](https://saucelabs.com/u/alvernacchia)\n\n\n*Please note, the SauceLabs badge will show results for all tests run, not just master. If the build status is \"passing\" on the master branch, you can be sure that all these browser versions are passing.*\n\n## \\*\\*To Rollup from Webpack\\*\\*\n\nv2 will use [rollup.js][13] to do packaging instead of webpack. This is due to the fact that webpack is better suited for application building,\nand rollup is better suited for library/module building. Please let me know if it doesn't work in any way.\n\n\n#### Supported Events\n\nThis list should grow as time goes on.\n\n* [loadedmetadata][2] ([example][3])\n* [progress][6] ([example][5])\n* [play][9] ([example][10])\n* [pause][7] ([example][8])\n* [ended][11] ([example][12])\n\n## Setup\n\n### Installing\n\n#### Bower\n```\nbower install angular-media-events --save\n```\n\n#### NPM\n```\nnpm install angular-media-events --save\n```\n\n### Including\n\n```js\n\u003cscript src=\"/bower_components/angular-media-events/dist/media-events.js\"\u003e\u003c/script\u003e\n// or\nimport angularMediaEvents from 'angular-media-events';\n```\n\n### Using in Angular\n\n```js\n// using script include\nangular.module('myApp', ['media-events']);\nangular.module('myApp', [window.angularMediaEvents]);\n\n// or using import\nangular.module('myApp', [angularMediaEvents]);\n```\n\n## Events\n\n### loadedmetadata\n\n* **available params** (in template):\n  * anything in the scope\n  * `$event` (jqlite/jQuery Event object)\n  * `attrs`\n    * `width`\n    * `height`\n  * **Note:** some videos do not return these attributes. I believe this is due to how it is encoded/what codec is used\n\n```html\n  \u003cvideo ng-src=\"...\" on-loaded-metadata=\"someFunction($event, attrs)\" /\u003e\n```\n\n### progress\n\n* **available params** (in template):\n  * anything in the scope\n  * `$event` (jqlite/jQuery Event object)\n  * `attrs`\n    * `buffered`\n\n```html\n  \u003cvideo ng-src=\"...\" on-progress=\"someFunction($event, attrs)\" /\u003e\n```\n\n### play (on-play)\n\n* **available params** (in template):\n  * anything in the scope\n  * `$event` (jqlite/jQuery Event object)\n\n```html\n  \u003cvideo ng-src=\"...\" on-play=\"someFunction($event)\" /\u003e\n```\n\n### pause (on-pause)\n\n* **available params** (in template):\n  * anything in the scope\n  * `$event` (jqlite/jQuery Event object)\n\n```html\n  \u003cvideo ng-src=\"...\" on-pause=\"someFunction($event)\" /\u003e\n```\n\n### ended (on-ended)\n\n* **available params** (in template):\n  * anything in the scope\n  * `$event` (jqlite/jQuery Event object)\n\n```html\n  \u003cvideo ng-src=\"...\" on-ended=\"someFunction($event)\" /\u003e\n```\n\n## Contributing\n\nPlease feel free to contribute. Checkout [the guidelines][4]. I'm pretty responsive, if I say so myself, so hit me up.\n\n[4]: https://github.com/vernak2539/angular-media-events/blob/master/CONTRIBUTING.md\n[1]: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events\n[3]: #loadedmetadata\n[5]: #progress\n[2]: https://developer.mozilla.org/en-US/docs/Web/Events/loadedmetadata\n[6]: https://developer.mozilla.org/en-US/docs/Web/Events/progress\n[7]: https://developer.mozilla.org/en-US/docs/Web/Events/pause\n[8]: #pause-on-pause\n[9]: https://developer.mozilla.org/en-US/docs/Web/Events/play\n[10]: #play-on-play\n[11]: https://developer.mozilla.org/en-US/docs/Web/Events/ended\n[12]: #ended-on-ended\n[13]: https://rollupjs.org/\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvernak2539%2Fangular-media-events","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fvernak2539%2Fangular-media-events","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fvernak2539%2Fangular-media-events/lists"}