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

i'm tyring write own custom directive html video element, got this:

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

so got markup:

  <video finalcut-player id="html5-player" controls>     <source src="videos/react@iugh.mp4" type="video/mp4">   </video> 

so far i've achieved event catched @ controller. i'm not sure how can either programatically start player or change , reload sources.

how can achieve it?

$elem jquery object. can access method , properties this:

$elem[0].play(); 

here's demo.