so I have a database with user uploads. Users can either upload images, or videos.
On an admin page, these videos/images should be diplsayed.
What works is the following:
<repeat group="{{@userUploads}}" value="{{@upload}}">
<div class="col-sm-4">
<video style="width:100%;" controls>
<source src="/{{@upload.path}}"/>
Your browser does not support the video tag.
</video>
<img src="/{{@upload.path}}"/>
</div>
</repeat>
Yes, I'm using Fat Free Framework, but doesn't change any behaviour here, so it doesn't really mind for the quesiton.
Now as mentioned, this works, but also displays both (working video and not working image or working image but not working video)... I've tried nesting the image into the video tag, however, this doesn't work either.
Is there any way I could reach the effect, that depending on the path (respectively the image filetype), I display the correct thing (image or video)? My only idea so far is checking the src of each tag with JS after creation and then hiding the thing, where the filetype doesn't match, however, this seems like a pretty ugly solution for me (first displaying everything, then checking for various filetypes, where I could forget things, etc.)