Angularjs - video not played when binded inside promise

Question

I have a video directive which plays html5 video:

    (function(){
    angular.module('app.video')
                .directive('demoVideo', demoVideo);


    function demoVideo(){
        return{
            templateUrl: "videoTemplate.html",
            controller: function(videoService, $sce){
                var vm = this;
                videoService.get().then(function(data){
                    vm.videoDataUrlMp4 = $sce.trustAsResourceUrl(data.video);//"http://pdl.vimeocdn.com/89496/595/203684545.mp4?token2=1418313891_4826d99475da5695f5d7999863fb212c&aksessionid=732c8c4ae38ae4aa"
                });
            },
            bindToController: true,
            controllerAs: 'video'  
        }
    }    

})();

The template is:

<script type="text/ng-template" id="videoTemplate.html">
<video id="video" controls="true">
        <source id="mp4" ng-src="{{ video.videoDataUrlMp4 }}" type="video/mp4">
        <p>Your user agent does not support the HTML5 Video element.</p>
</video>

The problem is that the video is not loaded. (I can see that the src is set to video's source, but it is not loaded. When I change the binding to be direct (not inside a callback), it does work!

I tried $scope.$apply() with no luck (throws an error).

What am I missing here?

tnx!

Pytth Pytth · Accepted Answer · 2014-12-11T16:25:16

Have you tried returning the value?

Like this:

     videoService.get().then(function(data){
                    vm.videoDataUrlMp4 = $sce.trustAsResourceUrl(data.video);//"http://pdl.vimeocdn.com/89496/595/203684545.mp4?token2=1418313891_4826d99475da5695f5d7999863fb212c&aksessionid=732c8c4ae38ae4aa";
                    return vm.video.DataUrlMp4;
                });

Angularjs - video not played when binded inside promise

1 Answers