从 OpenGraph 预览中复制视频 - 类型 "text/html"

Question

我收到来自 Twitter 视频的 URL，但我无法嵌入视频并复制它。

我正在开发一个显示社交媒体元素的网站。在 Twitter 上，我处理从 API 获得的推文，如果我找到 link，我会使用 OpenGraph 进行检查。在某些情况下，我得到的 link 来自另一条推文，而那条推文有一个视频。我可以从该视频中获取 URL，但 HTML5 标签 无法播放它。

我从推特上得到这个URL：

https://twitter.com/VidaModernaOML/status/1087651084305281025

有了这个，我从 OpenGraph 得到了这个 JSON：

{
  "type": "video",
  "url": "https://twitter.com/VidaModernaOML/status/1087651084305281025",
  "title": "La Vida Moderna on Twitter",
  "image": {
  "url": "https://pbs.twimg.com/amplify_video_thumb/1087392680051728389/img/TdmPvoKgiNd_wPWr.jpg"
},
  "description": "“SHOW ME THE BILLETS\n\n @_rafamata_ → ”",
  "site_name": "Twitter",
  "video": {
    "url": "https://twitter.com/i/videos/1087651084305281025?embed_source=facebook",
    "secure_url": "https://twitter.com/i/videos/1087651084305281025?embed_source=facebook",
    "type": "text/html",
    "width": "1200",
    "height": "675"
  }
}

使用 video.url 中的 URL 我正在我的代码中尝试这样做：

<video width="100%" height="100%" style="background-color:#000000" autoplay muted loop>
    <source src="https://twitter.com/i/videos/1087651084305281025?embed_source=facebook" type="video/mp4">
</video>

但是视频无法加载。我尝试使用接收到的 ("text/html") 和所有接受的类型更改 "type" 属性，但结果相同。

Answer 1

如果您查看该视频的源代码，您会发现它根本不是视频。相反，它是一个 HTML 页面，加载一些 JavaScript 以显示视频。

您可以将其放入 iframe - 例如：

<iframe src="https://twitter.com/i/videos/1087651084305281025"></iframe>

这将嵌入视频以在您的网站上播放。

从 OpenGraph 预览中复制视频 - 类型 "text/html"

Reproduce video from OpenGraph preview - Type "text/html"

javascript

twitter

node.js

html5-video

facebook-opengraph