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

Question

I'm receiving an URL from a Twitter video and I'm not able to embed the video and reproduce it.

I'm developing a web site that shows social media elements. On Twitter, I process the tweets I get from the API and, if I find a link, I check it out with OpenGraph. In some cases, the link I get is from another tweet, and that tweet has a video. I'm able to get the URL from that video, but HTML5 Tag won't play it.

I get this URL from Twitter:

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

With that, I get this JSON from OpenGraph:

{
  "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"
  }
}

With the URL from video.url I'm trying this on my code:

<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>

But video won't load. I've tried changing "type" attribute using the received ("text/html") and all the accepted type, but same result.

Answer 1

If you look at the source code of that video, you'll see that it isn't a video at all. Instead, it is an HTML page which loads some JavaScript in order to display the video.

You could put it in an iframe - for example:

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

That will embed the video for playback on your site.