CODEWITHSUNDEEP
angularjsmodel-view-controllerhtml5-video
isherwood
isherwood

Reputation: 61083

How to play video inside Angular-Bootstrap modal on open?

I'm loading videos dynamically based on a scope array of resources:

this.open = function (size, resource) {
    var modalInstance = $uibModal.open({
        templateUrl: 'playModal.html',
        controller: 'ModalInstanceCtrl',
        size: size,
        resolve: {
            resource: function () {
                return resource;
            }
        }
    });

    modalInstance.rendered.then(function () {
        $('#resource-video')[0].play();
    });
};

As you can see, I'm using a jQuery selector to find the HTML5 video tag and play it in a callback on the modal's rendered event. What would be the "Angular way" to do this and maintain MVC discipline?

Upvotes: 1

Views: 2891

Answers (1)

rob
rob

Reputation: 18513

You could create a raw JavaScript "class" that takes care of manipulating the video given the raw dom element. e.g.

function VideoControl(videoElement) {
  this.videoElement = videoElement;
}

VideoControl.prototype.play = function() {
  this.videoElement.play();
}

VideoControl.prototype.pause = function() {
  this.videoElement.pause();
}

In order to instantiate it and actually pass the dom element into it you could wrap it in a directive. e.g.

app.directive('videoControl', function($parse) {
  return {
    restrict: 'A',
    link: function(scope, element, attrs) {
      var videoControlModel = $parse(attrs.videoControl);
      videoControlModel.assign(scope, new VideoControl(element[0]));
    }
  };
})

Then you can use this video control directive like this:

<button ng-click="videoControl.play()">Play</button>

<video  class="video" controls video-control="videoControl">
    ...
</video>

Here is a working plunker: https://plnkr.co/edit/2epHSCo6wwyCplNhOBSe?p=preview

Upvotes: 1

Related Questions