Display poster image for video

ggrossetie commented 4 years ago

Also we should add a link to the video.

Reference implementation: https://github.com/asciidoctor/asciidoctor-pdf/blob/8d1d0d9bd2f63b5bf2fdad6ac4eda9e1bd749f89/lib/asciidoctor/pdf/converter.rb#L1638

thom4parisot commented 4 years ago

Do you know about oEmbed? Sounds like a good generic way to achieve that — although it requires a network roundtrip per video.

ggrossetie commented 4 years ago

No but it looks interesting!

although it requires a network roundtrip per video.

True but I guess that's the price to pay to be more portable/generic. I can't get a large thumbnail on Vimeo:

http://vimeo.com/api/v2/video/{videoId}.xml: http://vimeo.com/api/v2/video/76979871.xml

<thumbnail_large>https://i.vimeocdn.com/video/452001751_640.webp</thumbnail_large>

https://vimeo.com/api/oembed.xml?url=http%3A%2F%2Fvimeo.com%2F{videoId}: https://vimeo.com/api/oembed.xml?url=http%3A%2F%2Fvimeo.com%2F76979871

<thumbnail_url>https://i.vimeocdn.com/video/452001751_295x166.webp</thumbnail_url>

But I can get a thumbnail image with a play button (which is nice but non-standard):

<thumbnail_url_with_play_button>
https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F452001751_295x166.webp&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png
</thumbnail_url_with_play_button>

I've also noticed that the code in Asciidoctor PDF (Ruby) does not work on all YouTube videos. For instance:

https://img.youtube.com/vi/iwGFalTRHDA/maxresdefault.jpg

Since there's not "maxres" image, we get a default image. But using oEmbed, we get one: https://i.ytimg.com/vi/iwGFalTRHDA/hqdefault.jpg

But even when a "maxres" exists, oEmbed points to the "hq" image:

https://www.youtube.com/oembed?url=http%3A%2F%2Fwww.youtube.com%2Fwatch%3Fv%3DsOpMrVnjYeY&format=xml

Using maxwidth and maxheight does not seem to change the thumbnail image.

thom4parisot commented 4 years ago

Ah, strange:

curl http://vimeo.com/api/v2/video/76979871.json

(which is similar to…)

curl https://vimeo.com/api/oembed.json?url=http%3A%2F%2Fvimeo.com%2F76979871

It returns the following output:

[
   {
      "description" : "It may look (mostly) the same on the surface, but under the hood we totally rebuilt our player. Here’s a quick rundown of some of the coolest new features:<br />\r\n<br />\r\n• Lightning fast playback<br />\r\n• Redesigned Share screen<br />\r\n• Closed caption and subtitle compatible<br />\r\n• HTML5 by default<br />\r\n• Purchase-from-player functionality for embedded Vimeo On Demand trailers<br />\r\n• More responsive than ever (go ahead, resize it, we dare you!!!)<br />\r\n<br />\r\nWe’re really proud of these updates. So proud that we made a spiffy new page to showcase all the reasons why we have the best video player in the galaxy. Check it out here: http://vimeo.com/player<br />\r\n<br />\r\nIn short, this is a player that even haters can love.",
      "duration" : 62,
      "embed_privacy" : "anywhere",
      "height" : 720,
      "id" : 76979871,
      "mobile_url" : "https://vimeo.com/76979871",
      "tags" : "",
      "thumbnail_large" : "http://i.vimeocdn.com/video/452001751_640.jpg",
      "thumbnail_medium" : "http://i.vimeocdn.com/video/452001751_200x150.jpg",
      "thumbnail_small" : "http://i.vimeocdn.com/video/452001751_100x75.jpg",
      "title" : "The New Vimeo Player (You Know, For Videos)",
      "upload_date" : "2013-10-15 14:08:29",
      "url" : "https://vimeo.com/76979871",
      "user_id" : 152184,
      "user_name" : "Vimeo Staff",
      "user_portrait_huge" : "http://i.vimeocdn.com/portrait/9934446_300x300",
      "user_portrait_large" : "http://i.vimeocdn.com/portrait/9934446_100x100",
      "user_portrait_medium" : "http://i.vimeocdn.com/portrait/9934446_75x75",
      "user_portrait_small" : "http://i.vimeocdn.com/portrait/9934446_30x30",
      "user_url" : "https://vimeo.com/staff",
      "width" : 1280
   }
]

ggrossetie / asciidoctor-web-pdf

Display poster image for video #127