JS - Display either image or video with instanceof?

Question

I'm getting the cloudinary image/video ID like this:

<?php echo cloudinary_url($_upload->getPublicId()); ?>

which gives a URL like: http://res.cloudinary.com/dviiu412p/image/upload/v1/campaigns/1/jfle7ilxkyfmj9mjggwa

And then rendering it out as an image or video like so:

<img class="lazy-load"
    src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
    data-src="<?php echo cloudinary_url($_upload->getPublicId()); ?>" />

<video class="lazy-load" controls>
    <source data-src="<?php echo cloudinary_url($_upload->getPublicId(), array("resource_type"=>video, "height"=>230, "width"=>340, "format"=>webm)); ?>" type="video/webm">
</video>

The problem is I only want to serve either an image or video (whichever one was uploaded by the user). Is there a way I can achieve this? I was thinking instanceof might be able to do this but I've never used it before. Any help would be much appreciated

score 0 · Accepted Answer · answered Sep 19 '16 at 17:56

Assuming the source of $_upload is the upload response than you'd have the resource_type value as well. You need the value of resource_type coupled with the public ID to distinguish between resources (image, video or raw). You can then use a switch-case block to generate the correct tag.

For example,

<!-- language: lang-php -->

switch ($result["resource_type"]) {
  case "image":
    // generate image tag
    break;
  case "video":
    // generate video tag
    break;
}

JS - Display either image or video with instanceof?

1 Answers1