Previously, I used Vue.js to load various text and media data from an object into the DOM. Sometimes it was images, other times videos. To handle this, I came up with the following solution:
<img id="example-image" :src="item.media" :alt="item.image + 'example pic'" @error="loadVideo()">
<video id="example-video">
<source :src="item.media" type="video/mp4">
</video>
This way, if the content is an image, it will display as an image. If it's a video (which would fail to load in an IMG tag), it triggers a method to hide the image and show the video instead.
Unfortunately, this approach is not optimal as it works well in Chrome but has issues in Safari where the content won't display until fully downloaded on the client side – leading to unnecessary bandwidth usage.
I thought about checking the file extension using a method and dynamically loading the content with the appropriate HTML tag based on that. For example:
getFileExtension(filename) {
return filename.slice((filename.lastIndexOf(".") - 1 >>> 0) + 2);
}
If anyone has a better idea or suggestion, I would greatly appreciate it. Thank you very much.