Getting error with poster attribute in <video> in AngularJS?

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
– Zakaria, Commented Jan 6, 2017 at 14:14
actually it was mistypes the actual condition is ng-if="thumbnail.length>0" — abhit
– abhit, Commented Jan 6, 2017 at 14:16
Where do you insert the URL? I can't find this in your example. — Konstantin A. Magg
– Konstantin A. Magg, Commented Jan 6, 2017 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 (localhost:8100/%7B%7Bthumbnail%7D%7D) is correct. — JSNinja
– JSNinja, Commented Jan 6, 2017 at 14:21

Fabien Sacrepeigne · Accepted Answer · 2017-01-06 16:10:47Z

6

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

answered Jan 6, 2017 at 16:10

Fabien Sacrepeigne

1568 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abhit Over a year ago

yeah maybe I have to interpolate my poster attribute

Collectives™ on Stack Overflow

Getting error with poster attribute in <video> in AngularJS?

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related