CODEWITHSUNDEEP
javascriptangularjshtml
diegoaguilar
diegoaguilar

Reputation: 8376

How to access to a a HTML video functions from an Angular custom directive?

I'm tyring to write an own custom directive for HTML video element, I got this:

finalCutApp.directive('finalcutPlayer', ($timeout) => {
    return {
        restrict: 'A',
        link: ($scope, $elem, $attrs) => {
            $elem.on('canplay', () => {
                $timeout(()=> {$scope.$emit('finalcutplayer.events.canplay')});
            });
        }
    };
});

So I got this markup:

  <video finalcut-player id="html5-player" controls>
    <source src="videos/[email protected]" type="video/mp4">
  </video>

So far I've achieved to get the event catched up at my controller. However I'm not sure how I can either programatically start the player or even change and reload its sources.

How can I achieve it?

Upvotes: 0

Views: 65

Answers (1)

Kovalenko Ivan
Kovalenko Ivan

Reputation: 172

$elem is Jquery object. You can access method and properties like this:

$elem[0].play();

Here's demo.

Upvotes: 1

Related Questions