Getting error with poster attribute in

Question

I have written the following code:

<div class="item item-input video-preview-container" ng-if="thumbnail.length > 0">
                <video poster="{{thumbnail}}" ng-src="{{clipSrc}}" class="centerme margin-vert-2x" controls="controls" preload="metadata" webkit-playsinline="webkit-playsinline"></video>
                <i class="ion ion-android-cancel fs30 margin-left-2x" ng-click="removeVideo()"></i>
            </div>

now on running this i am getting error:

GET http://localhost:8100/%7B%7Bthumbnail%7D%7D 404 (Not Found)

however it is noticeable that the error is coming when my div isn't yet loaded as my ng-if condition is still less than 0

UPDATE: the problem is with poster="{{thumbnail}}" code as when i remove this the error is not coming.

remove the "==true" part and try with just `ng-if="thumbnail.length"` — Zakaria, Jan 06 '17 at 14:14
actually it was mistypes the actual condition is `ng-if="thumbnail.length>0"` — abhit, Jan 06 '17 at 14:16
Where do you insert the URL? I can't find this in your example. — Konstantin A. Magg, Jan 06 '17 at 14:20
Instead of ng-if use ng-show. That way your div will reside in the DOM. Also can you confirm if the image URL (http://localhost:8100/%7B%7Bthumbnail%7D%7D) is correct. — JSNinja, Jan 06 '17 at 14:21
urls are in the controller.....what i am saying here is that the — abhit, Jan 06 '17 at 14:22
Possible duplicate http://stackoverflow.com/questions/15728424/html5-video-is-not-working-with-angularjs-ng-src-tag — JSNinja, Jan 06 '17 at 14:28
the problem is not with ng-src ..i have updated the question. — abhit, Jan 06 '17 at 14:28
The problem is while interpolation of the thumbnail variable passed to the poster attribute. %7B and %7D you notice in the url are code for {{ and }} — JSNinja, Jan 06 '17 at 14:36
Try making a directive like in this example http://jsfiddle.net/kmturley/mgosw7kx/4/ — JSNinja, Jan 06 '17 at 14:47

score 6 · Accepted Answer · answered Jan 06 '17 at 16:10

6

Have you tried using ng-attr-poster ? Most of time these problems are due to data binding not happening

answered Jan 06 '17 at 16:10

Fabien Sacrepeigne

146
7

yeah maybe I have to interpolate my poster attribute – abhit Jan 09 '17 at 05:47

Getting error with poster attribute in in AngularJS?

1 Answers1

Getting error with poster attribute in