CODEWITHSUNDEEP
htmlangularjs
Ekoar
Ekoar

Reputation: 481

angular ngSrc doesn't work with html video tag

I am trying to load a list of video on a page after uploaded video :

<div class="form-group">
    <label for="video" class="col-sm-2 control-label control-image">video</label>
    <div class="col-sm-10">
        <ul id="video" ng-repeat="video in vm.item.video" ng-if="vm.item.video.length > 0">
            <li>
                <video width="400" controls><source ng-src="{{vm.uploadDomain + video}}" type="video/mp4">> </video>
                </video>
            </li>
        </ul>
    </div>
</div>

<div class="form-group" ng-class="{'true': '', 'false': 'has-error'}[vm.isValidated('video')]">
    <label class="col-sm-2 control-label control-image">upload</label>
    <div class="col-sm-10">
        <dt-file-uploader  mode="basic"
                          ng-model="vm.item.video"
                          setting="vm.uploader_video"></dt-file-uploader>
    </div>
</div>

but it doesn't work, It fail to load the source of these video , what can I do to fix this problem?

Upvotes: 1

Views: 2384

Answers (1)

Sachila Ranawaka
Sachila Ranawaka

Reputation: 41427

you can create a custom filter like this. 

.filter("trustUrl", function($sce) {
    return function(Url) {
        return $sce.trustAsResourceUrl(Url);
    };
});

in the html add filter in src 

<video width="400" controls>
   <source ng-src="{{vm.uploadDomain + video | trustUrl}}" type="video/mp4">
</video>

Upvotes: 1

Related Questions