Piped
Piped copied to clipboard
TeamPiped
OpenGraph/oEmbed support
Describe the feature
Comparison of meta-information received in the same video from Piped and YouTube:
oEmbed and OpenGraph is a simple tools to get meta-information and even a built-in player for YouTube videos that can be implemented in Piped. Thanks to it, all links to an instance in any provider will not look identical to each other and allow you to see the context of the video before you click on the link.
Why would this be useful to add?
- Will allow you to embed the Piped player directly into any site that supports embedded media
- Allows you to see the title, description and cover art of the video without clicking on the link, facilitating visual search
Concept(s)
OpenGraph
Here it's simple, just specify in the template a set of meta nodes with the keys with the prefix og: and values obtained from the YouTube video page and adapted for the Piped instance:
<meta property="og:site_name" content="Piped"> <!-- site name -->
<meta property="og:url" content="https://piped.privacy.com.de/watch?v=tsD4im7K3wg"> <!-- video page URL -->
<meta property="og:title" content="How does it feel to live long enough to see all your favorite franchises go down in flames?"> <!-- video title -->
<meta property="og:image" content="https://pipedproxy.kavin.rocks/vi_webp/tsD4im7K3wg/maxresdefault.webp?host=i.ytimg.com"> <!-- thumbnail URL -->
<meta property="og:image:width" content="1280"> <!-- thumbnail width -->
<meta property="og:image:height" content="720"> <!-- thumbnail height -->
<meta property="og:description" content="origin: Star Trek Discovery Season 1 - re:Viewhttps://youtu.be/ri7v-utIcvY"> <!-- video description -->
oEmbed
Architecturally, you should provide a router intended only for receiving requests from providers for previews and responding to them, like /oembed, like YouTube. This router should accept GET requests with query parameters and respond to them with JSON/XML (depending on provider's preferences) in a special format.
Since Piped instances cannot appear in the global providers list in time, to detect and exploit the oEmbed router by a provider, it needs to be prompted with a link node in the template and/or Link server header.
Headers examples:
Host: piped.kavin.rocks
Link: <https://piped.kavin.rocks/oembed?url=https%3A%2F%2Fpiped.kavin.rocks%2Fwatch%3Fv%3DtsD4im7K3wg&format=json>; rel="alternate"; type="application/json+oembed"; title="JSON oEmbed"
Link: <https://piped.kavin.rocks/oembed?url=https%3A%2F%2Fpiped.kavin.rocks%2Fwatch%3Fv%3DtsD4im7K3wg&format=xml>; rel="alternate"; type="text/xml+oembed"; title="XML oEmbed"
...
Template examples:
<html>
<head>
...
<link rel="alternate" type="application/json+oembed" href="https://piped.kavin.rocks/oembed?url=https%3A%2F%2Fpiped.kavin.rocks%2Fwatch%3Fv%3DtsD4im7K3wg&format=json" title="JSON oEmbed" />
<link rel="alternate" type="text/xml+oembed" href="https://piped.kavin.rocks/oembed?url=https%3A%2F%2Fpiped.kavin.rocks%2Fwatch%3Fv%3DtsD4im7K3wg&format=xml" title="XML oEmbed" />
...
</head>
<body>
...
It is desirable to support both formats and both methods of routing identification for backward compatibility with older ISPs that do not know how to JSON or get data from headers.
A JSON response to an oEmbed request for a video might look something like this:
{
"type": "video", // embed type
"version": "1.0", // always "1.0"
"title": "How does it feel to live long enough to see all your favorite franchises go down in flames?", // video title
"author_name": "Cyber Zomb", // channel name
"author_url": "https://piped.privacy.com.de/channel/UCUtc7dMxnccC8XXXqZAHf-A", // channel url
"provider_name": "Piped", // site name
"provider_url": "https://piped.kavin.rocks/", // base url of instance
"cache_age": 3600, // the proposed response caching time by the provider in seconds
"thumbnail_url": "https://pipedproxy.kavin.rocks/vi_webp/tsD4im7K3wg/maxresdefault.webp?host=i.ytimg.com", // video thumbnail
"thumbnail_width": 1280, // thumbnail width
"thumbnail_height": 720, // thumbnail height
"html": "...", // HTML code for downloading and rendering an embedded player of the requested size
"width": 425, // player width requested by provider
"height": 344 // player height requested by provider
}
Additional context
No response
Acknowledgements
- [X] I have searched the existing issues and this is NOT a duplicate or related to another open issue.
- [X] I have written a short but informative title.
- [X] I filled out all of the requested information in this form.
I had developed this proxy as a workaround for this some time ago, so I don't know if it still works. The code can be found here: piped-html-proxy I have been thinking of writing an extension for Caddy, in order to replace it. I don't know which approach best fits the project.
kinda surprised this isnt considered high priority. its a pretty large blocker for the average person to be willing to use piped. i have for now resorted to just providing both links, with the pipe linked set to not preview so it can just piggyback off the youtube preview
but that just means the ty link is used 99% of the time sadly. once i convince people to load the actual piped page they have no problem with piped player for the most part but its never going to be viable as a true replacement missing something as basic as link previews
I had developed this proxy as a workaround for this some time ago, so I don't know if it still works. The code can be found here: piped-html-proxy I have been thinking of writing an extension for Caddy, in order to replace it. I don't know which approach best fits the project.
Any progress with the Caddy extension? I would love this feature as I am quite surprised it isn't implemented yet from the last time I checked.
I had developed this proxy as a workaround for this some time ago, so I don't know if it still works. The code can be found here: piped-html-proxy I have been thinking of writing an extension for Caddy, in order to replace it. I don't know which approach best fits the project.
Any progress with the Caddy extension? I would love this feature as I am quite surprised it isn't implemented yet from the last time I checked.
There is no progress on the Caddy extension, but the proxy works.
Please open an issue there if you need more help to configure it for your instance.