Search code examples
htmlangularjs

How to display video or image in single tag?

i have a drop down menu with 2 options img and videos, i have to display the data with respect to my drop down selection, so how can i achieve this please help me.

here is my HTML code :

<img class="cat-img" src="image path" style="width: 100px;margin: 10px 0px;"> 
or
 <video width="320" height="240" controls> <source src="videopath" type="video/mp4">
</video>

or how can i do this using 'ng if' please

Solution

  • Using `ng-if`

    select dropdown

    <select ng-model='option'> <option value='image'>Image</option> <option value='video'>Video</option> </select>

    Change your image/video code to this

     <img class="cat-img" src="image path" style="width: 100px;margin: 10px 0px;" ng-if="option=='image'"> 
 <video width="320" height="240" controls> <source src="videopath" type="video/mp4" ng-if="option=='video'"></video>

    If you want a single line for both this image/video better write a component for this.