Custom HTML5 video player controls with AngularJS

angularjs, html, javascript, video

Solution

How about this:

In your HTML, set `ng-click="video($event)"` (don't forget the `$event` argument), which calls the following function:

$scope.video = function(e) {
    var videoElements = angular.element(e.srcElement);
    videoElements[0].pause();
}

I believe this is the simplest method.

Documentation for angular.element

Also, this might help you get used to Angular: How do I “think in AngularJS/EmberJS(or other client MVC framework)” if I have a jQuery background?

Problem

I'm new with AngularJS. I must create customs controls for a video player (HTML5 `<video>`). Basically, I would use `getElementById('myvideotag')`, listen clicks on the video for play/pause. How I can do this with AngularJS ? Binding the click with `ng-click="videoPlayPause()"` but then, how I play or pause the video. How I use the classic methods of `<video>` ? I guess it's really simple... I didn't get all the AngularJS concepts yet ! Thank you :) Oh, the code... in the view: ``` <video autoplay="autoplay" preload="auto" ng-click="video()"> <source src="{{ current.url }}" type="video/mp4" /> </video> ``` In the right controller: ``` $scope.video = function() { this.pause(); // ??? } ```

Original source

Related problems