JavaScript：动态检测iframe内容的媒体类型（如果它是视频/ gif或静态图像）

Question

我想用它们包含的视频或图片动态替换iframe。

跨域请求受到限制，但每个<iframe>都有src属性，因此可以在没有特定文件扩展名的情况下生成指向文件的直接链接。然后我们应该检测每个文件的媒体类型。我尝试使用下面的代码完成此任务，但它没有按预期工作（有时它有点工作，但将所有文件视为图像（甚至视频）：

        if($('video').length > 0) {
            iframe[i].parentNode.replaceChild(video, iframe[i]);
        } else if (image.complete) {
            iframe[i].parentNode.replaceChild(image, iframe[i]);
          } else {
            iframe[i].parentNode.replaceChild(link, iframe[i]);
          }

我还尝试了video.readyState > 0视频和image.naturalWidth !== 0图片，但没有成功。

带有完整代码的JSFiddle示例： https://jsfiddle.net/52st2foj/

只有JavaScript（也许是jQuery）才能实现这一点吗？我将不胜感激任何帮助。