Handle Vimeo serving WebP images

[tw2113]

Vimeo has switched to WebP. It's also switched to image URLs that have no file type suffix.

Example:
https://i.vimeocdn.com/video/1141331067_640

WordPress does not yet support WebP in the media library at the time of this post. However it should in WP 5.8 as per https://core.trac.wordpress.org/ticket/35725

I think we need to do a couple things.

1. Amend https://github.com/WebDevStudios/Automatic-Featured-Images-from-Videos/blob/master/automatic-featured-images-from-videos.php#L282-L283 to potentially be just for Youtube, and exclude Vimeo. This would make us not end up worrying about query args which we shouldn't be getting anyway?
2. Probably require WP 5.8 for our next release, to help handle WebP support in general.

Only downside to item 2 is that it leaves previous users in the dark for Vimeo support, as we can't control what they serve.

[Nicscott01]

Personally I don't like losing Vimeo support. It's currently "one of the big 2" and many businesses use them. In my current application of this plugin, I actually use a custom Vimeo get to authenticate so I can pull thumbnails of protected content. Have you thought about a premium version of the plugin to provide addition support for protected content? Revenue could help offset the development costs for this. I'd be willing to help contribute/partner on this.

Also, what's the harm in simply changing the image to the one with a play button on it (at least temporarily)--to continue Vimeo support. To me this doesn't seem like it should be a deal killer.

Another thought is to look for a 3rd party cloud service or library that we could use to get the webp from Vimeo and then convert to a PNG or JPG for upload to WP. Not the most elegant, but yea it could work.

[tw2113]

If there's somewhere within Vimeo's public API endpoints and everything, that isn't WebP, then we can definitely re-point things to that for the pre-5.8 users and generally recover earlier users until they're on a version of WP that does support WebP. Just a matter of identifying one.

I'd prefer not seeking out and relying on a 3rd party image converting service.

[Nicscott01]

So there is. I had posted this on the WP support forum a few days ago. Here's the sample response from the API and you can see that there's a "link_with_play_button" parameter that's a PNG.

Cache-Control: private, no-store, no-cache
Content-Type: application/vnd.vimeo.picture+json
X-Ratelimit-Limit: 1000
X-Ratelimit-Remaining: 977
X-Ratelimit-Reset: 2021-05-26T15:46:21+00:00

{
  "total": 3,
  "page": 1,
  "per_page": 25,
  "paging": {
    "next": null,
    "previous": null,
    "first": "/videos/548451126/pictures?page=1",
    "last": "/videos/548451126/pictures?page=1"
  },
  "data": [
    {
      "uri": "/videos/548451126/pictures/1135511065",
      "active": true,
      "type": "custom",
      "sizes": [
        {
          "width": 100,
          "height": 75,
          "link": "https://i.vimeocdn.com/video/1135511065_100x75?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135511065_100x75&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 200,
          "height": 150,
          "link": "https://i.vimeocdn.com/video/1135511065_200x150?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135511065_200x150&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 295,
          "height": 166,
          "link": "https://i.vimeocdn.com/video/1135511065_295x166?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135511065_295x166&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 640,
          "height": 360,
          "link": "https://i.vimeocdn.com/video/1135511065_640x360?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135511065_640x360&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 832,
          "height": 540,
          "link": "https://i.vimeocdn.com/video/1135511065_832x540?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135511065_832x540&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 832,
          "height": 540,
          "link": "https://i.vimeocdn.com/video/1135511065_832x540?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135511065_832x540&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 832,
          "height": 540,
          "link": "https://i.vimeocdn.com/video/1135511065_832x540?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135511065_832x540&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 832,
          "height": 540,
          "link": "https://i.vimeocdn.com/video/1135511065_832x540?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135511065_832x540&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 1280,
          "height": 720,
          "link": "https://i.vimeocdn.com/video/1135511065_1280x720?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135511065_1280x720&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 1920,
          "height": 1080,
          "link": "https://i.vimeocdn.com/video/1135511065_1920x1080?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135511065_1920x1080&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        }
      ],
      "resource_key": "b07e2bab2953206d60b12c468ff074db572c7b5f",
      "default_picture": false
    },
    {
      "uri": "/videos/548451126/pictures/1135500631",
      "active": false,
      "type": "custom",
      "sizes": [
        {
          "width": 100,
          "height": 75,
          "link": "https://i.vimeocdn.com/video/1135500631_100x75?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135500631_100x75&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 200,
          "height": 150,
          "link": "https://i.vimeocdn.com/video/1135500631_200x150?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135500631_200x150&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 295,
          "height": 166,
          "link": "https://i.vimeocdn.com/video/1135500631_295x166?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135500631_295x166&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 640,
          "height": 360,
          "link": "https://i.vimeocdn.com/video/1135500631_640x360?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135500631_640x360&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 640,
          "height": 416,
          "link": "https://i.vimeocdn.com/video/1135500631_640x416?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135500631_640x416&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 960,
          "height": 624,
          "link": "https://i.vimeocdn.com/video/1135500631_960x624?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135500631_960x624&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 1280,
          "height": 720,
          "link": "https://i.vimeocdn.com/video/1135500631_1280x720?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135500631_1280x720&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 1280,
          "height": 832,
          "link": "https://i.vimeocdn.com/video/1135500631_1280x832?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135500631_1280x832&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 1920,
          "height": 1080,
          "link": "https://i.vimeocdn.com/video/1135500631_1920x1080?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135500631_1920x1080&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        },
        {
          "width": 1920,
          "height": 1248,
          "link": "https://i.vimeocdn.com/video/1135500631_1920x1248?r=pad",
          "link_with_play_button": "https://i.vimeocdn.com/filter/overlay?src0=https%3A%2F%2Fi.vimeocdn.com%2Fvideo%2F1135500631_1920x1248&src1=http%3A%2F%2Ff.vimeocdn.com%2Fp%2Fimages%2Fcrawler_play.png"
        }
      ],
      "resource_key": "c7992883aeebbf246e59912d96c76e33d009cbcd",
      "default_picture": false
    }
  ]
}

[tw2113]

Not sure what endpoint that is from, but I'm all ears.

That said, I just tested some things with our current implementation, so good timing on your comment.

Say we're trying to embed https://vimeo.com/552398689

We get a response of "thumbnail_large":"https:\/\/i.vimeocdn.com\/video\/1141331067_640" with the JSON/etc from what we use now. If you visit https://i.vimeocdn.com/video/1141331067_640 in the browser, you get the webp version. If you append .jpg/.png, you get the equivalent version.

https://i.vimeocdn.com/video/1141331067_640.jpg
https://i.vimeocdn.com/video/1141331067_640.png

So we could probably just force one, instead of rely on letting it choose itself, until perhaps WP has webp support later this summer, or just permanently.

[Nicscott01]

Looks like that works. I was using this endpoint: /videos/{video_id}/pictures to get the private video images.

[tw2113]

@Nicscott01 i feel like maybe a filter override for API endpoint may be beneficial for you. Where someone could do their own endpoint fetches and return the appropriate detail, like the image URL or similar. Would you agree?

[Nicscott01]

Yes, a filter for custom API endpoint would be very helpful. Thank you!

[tw2113]

Still wanting to leave things open here for the custom endpoint, but even with WP 5.8 beta 3, it didn't seem to be recognizing the webp endpoint, even when i explicitly appended .webp to the image url, so going to hardcode that to .jpg for the moment.

[tw2113]

First part handled in 54bfb10

[tw2113]

@Nicscott01 Can you point out and remind me where you're doing custom endpoints at? For example, are you in the wds_check_for_vimeo() function or wds_get_vimeo_details() ? Trying to determine the best place to provide an override.

[Nicscott01]

I’m doing it in wds_get_vimeo_details(). My workaround for now was to: remove_action( 'save_post', 'wds_check_if_content_contains_video', 10, 2 ); add_action( 'save_post', 'lsta_check_if_content_contains_video', 10, 2 ); And then write my own function lsta_get_vimeo_details(). LMK if that makes sense.

…

On Jun 25, 2021, at 2:18 PM, Michael Beckwith ***@***.***> wrote: @Nicscott01 <https://github.com/Nicscott01> Can you point out and remind me where you're doing custom endpoints at? For example, are you in the wds_check_for_vimeo() function or wds_get_vimeo_details() ? Trying to determine the best place to provide an override. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#69 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABUCZCJDGHOZ4YELOEBC55DTUTB6RANCNFSM45W7GNWQ>.

[tw2113]

It does, but at the same time it's taking over everything really early in the process and basically overriding EVERYTHING.

Would you be willing to zip up your copy and share it with me? I'd like to do a diff comparison to see all the changes done. Even just gist pastes of the main file, and whatever you've set up for your lsta_check_if_content_contains_video callback should be well enough.

[tw2113]

I'm going to punt the override details to a later release as I don't want to hold up on a 1.2.0 which has some good fixes in it.