Question

基于URL，我需要显示<img>或<video>。有没有一种方法可以根据URL检测媒体类型？或者，也许有一些通用的html标签可以查看图像和视频？ URL的末尾没有特定的文件扩展名。

Answer 1

如果URL指向远程服务器上的本机文件（例如JPG，PNG或其他图像（与视频相同）），则您在最后一个句点不能分割并获取扩展名。

然后知道扩展名，就可以执行逻辑以确定是图像扩展名还是视频扩展名。

否则，您只需启动文件的编程下载，然后执行相同的检查即可。

Answer 2

一种简单的解决方案，您可以从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时-用户输入，来自REST的JSON，无论如何-在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。

通过URL检测媒体（图像，视频）类型

2 个答案: