Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Handle Vimeo serving WebP images #69

Open
tw2113 opened this issue May 28, 2021 · 13 comments
Open

Handle Vimeo serving WebP images #69

tw2113 opened this issue May 28, 2021 · 13 comments

Comments

@tw2113
Copy link
Member

tw2113 commented May 28, 2021

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

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
Copy link
Member Author

tw2113 commented May 28, 2021

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

Nicscott01 commented May 28, 2021

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
Copy link
Member Author

tw2113 commented May 28, 2021

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

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

@tw2113
Copy link
Member Author

tw2113 commented Jun 2, 2021

@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
Copy link

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

@tw2113
Copy link
Member Author

tw2113 commented Jun 25, 2021

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 tw2113 added this to the 1.2.0 milestone Jun 25, 2021
@tw2113
Copy link
Member Author

tw2113 commented Jun 25, 2021

First part handled in 54bfb10

@tw2113
Copy link
Member Author

tw2113 commented Jun 25, 2021

@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
Copy link

Nicscott01 commented Jun 28, 2021 via email

@tw2113
Copy link
Member Author

tw2113 commented Jun 28, 2021

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
Copy link
Member Author

tw2113 commented Jun 29, 2021

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.

@tw2113 tw2113 modified the milestones: 1.2.0, Future Release Jun 29, 2021
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants