Определить тип медиа (изображение, видео) по URL

Question

На основании URL мне нужно показать либо <img>, либо <video>. Есть ли способ определить тип носителя по URL-адресу? Или, может быть, есть какой-то общий тег HTML, который позволяет просматривать как изображение, так и видео? И в конце URL-адреса нет конкретного расширения файла.

Answer 1

Простое решение, в котором вы извлекаете расширение из URL и ищите Map(), чтобы сопоставить тип элемента с расширением:

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

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

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

---

Оригиналответ

Составьте два списка расширений файлов, которые сопоставляются с img и видео файлами.Сохраните их как два массива.

Когда вы сталкиваетесь с URL-адресом - пользовательским вводом, JSON из REST и т. Д. - найдите расширение в URL-адресе и посмотрите, какому списку оно принадлежит.

Затем создайте свойэлемент и введите URL-адрес в его источник, например:

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

const url = new URL("http://example.com/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;
}

Это не особенно надежное решение: возможно, в ваших путях есть точки, но, по крайней мере, используется URL() извлечет файловую часть URL, которая может иметь параметры.

Обратите внимание, что createElement принимает любой узел DOM в качестве родительского, он не обязательно должен быть document.

Answer 2

Если URL-адрес указывает на собственный файл на удаленном сервере, такой как JPG, PNG или другое изображение (то же самое для видео), чем вы можете разделить в последний период и получить расширение.

Затем, когда расширение известно, вы можете выполнить логику, чтобы определить, является ли оно расширением изображения или расширением видео.

В противном случае вы просто запустите программную загрузку файла и затем выполните то же самоепроверьте.