Based on the URL I need to show either <img> or <video>. Is there a way to detect the media type based on the URL? Or maybe there is some generic html tag that allows to view both image and video? And there is no specific file extension at the end of the URL.

Based on the URL I need to show either <img> or <video>. Is there a way to detect the media type based on the URL? Or maybe there is some generic html tag that allows to view both image and video? And there is no specific file extension at the end of the URL.

• javascript
• html
• angular

• 1 Is there a sample URL you can give – balzee Commented Jun 13, 2019 at 19:48
• Check the extension of file will be the easiest way – Ali Adravi Commented Jun 13, 2019 at 19:49
• I don't know how many possible extension can be at the end of the URL. It can be jpg, mp4 and lots of other known or unknown formats. I just know that there are only images and videos – Ararat Harutyunyan Commented Jun 13, 2019 at 19:50
• 1 @msanford probably I'll do as you offered. I think you can write it as an answer. – Ararat Harutyunyan Commented Jun 13, 2019 at 20:13
• @AraratHarutyunyan Done, as a minimal example. – msanford Commented Jun 13, 2019 at 20:22

3 Answers 3

A simple solution in which you extract the extension from the URL and search a Map() to match element type to extension:

const types = new Map([["jpg", "img"], ["gif", "img"], ["mp4", "video"], ["3gp", "video"]])

const url = new URL("http://example./image.jpg")
const extension = url.pathname.split(".")[1]

const element = document.createElement(types.get(extension))
element.src = url

Original answer

Make two lists of file extensions that map to img and video files. Store these as two arrays.

When you encounter the URL - user input, JSON from REST, whatever - find the extension in the URL and see which list it belongs to.

Then create your element and inject the URL into its source, such as:

const images = ["jpg", "gif", "png"]
const videos = ["mp4", "3gp", "ogg"]

const url = new URL("http://example./image.jpg")
const extension = url.pathname.split(".")[1]

if (images.includes(extension)) {
  let img = document.createElement('img');
  img.src = url;
} else if (videos.includes(extension)) {
  let video = document.createElement('video');
  video.src = url;
}

This is not an especially robust solution: perhaps your paths have dots in them, but at least the use of URL() will extract the file portion of a URL that might have parameters.

Note that createElement takes any DOM node as a parent, it doesn't have to be document.

If the URL is pointing to a native file on a remote server, such as a JPG, PNG, or other image (Same for video) than you can to a Split on the last period and grab the extension.

Then once the extension is known, you can perform logic to determine if it's an image extension, or a video extension.

Otherwise, you would just initiate a programmatic download of the file and then perform the same check.

const isVideoUrl = (url) => {   
    const indexOfTheAssetType = url.split(".").length - 1; // because the extension will always be at the end   
    const assetType = url.split(".")[indexOfTheAssetType].toUpperCase();   
    const isTheAssetVideoType = [
        "WEBM",
        "MPG",
        "MPEG",
        "MPE",
        "MP4",
        "M4P",
        "M4V",
        "AVI",
        "WMV",
        "MOV"].includes(assetType);   
    return isTheAssetVideoType; 
    };