vernak2539/angular-media-events

angular directives for media events

Angular Media Events

This library should introduce angular directives that respond to events on media objects.

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.

**To Rollup from Webpack**

v2 will use rollup.js to do packaging instead of webpack. This is due to the fact that webpack is better suited for application building, and rollup is better suited for library/module building. Please let me know if it doesn't work in any way.

Supported Events

This list should grow as time goes on.

• loadedmetadata (example)
• progress (example)
• play (example)
• pause (example)
• ended (example)

Setup

Installing

Bower

bower install angular-media-events --save

NPM

npm install angular-media-events --save

Including

<script src="/bower_components/angular-media-events/dist/media-events.js"></script>
// or
import angularMediaEvents from 'angular-media-events';

Using in Angular

// using script include
angular.module('myApp', ['media-events']);
angular.module('myApp', [window.angularMediaEvents]);

// or using import
angular.module('myApp', [angularMediaEvents]);

Events

loadedmetadata

• available params (in template):
  • anything in the scope
  • $event (jqlite/jQuery Event object)
  • attrs
    • width
    • height
  • Note: some videos do not return these attributes. I believe this is due to how it is encoded/what codec is used

  <video ng-src="..." on-loaded-metadata="someFunction($event, attrs)" />

progress

• available params (in template):
  • anything in the scope
  • $event (jqlite/jQuery Event object)
  • attrs
    • buffered

  <video ng-src="..." on-progress="someFunction($event, attrs)" />

play (on-play)

• available params (in template):
  • anything in the scope
  • $event (jqlite/jQuery Event object)

  <video ng-src="..." on-play="someFunction($event)" />

pause (on-pause)

• available params (in template):
  • anything in the scope
  • $event (jqlite/jQuery Event object)

  <video ng-src="..." on-pause="someFunction($event)" />

ended (on-ended)

• available params (in template):
  • anything in the scope
  • $event (jqlite/jQuery Event object)

  <video ng-src="..." on-ended="someFunction($event)" />

Contributing

Please feel free to contribute. Checkout the guidelines. I'm pretty responsive, if I say so myself, so hit me up.