search

lpellis / pyunfurl

Unfurl (Embed) any url into your site.
MIT License
7 stars 4 forks source link

Support for player cards #1

Open fluffy-critter opened 3 years ago

fluffy-critter commented 3 years ago

Hi, I'd really like to use this library but one of the sites I want to embed content from, Bandcamp, isn't seemingly supported. For example, when trying to unfurl one of my albums:

>>> print(pyunfurl.unfurl('https://sockpuppet.us/album/novembeat-2020')['html'])
<div class="unfurl unfurl-image">
    <a rel="noopener nofollow" target="_blank" href="https://sockpuppet.bandcamp.com/album/novembeat-2020">
        <img src="https://f4.bcbits.com/img/a3566420235_5.jpg">
    </a>
    <div class="unfurl-content">
        <a rel="noopener nofollow" target="_blank" class="unfurl-title" href="https://sockpuppet.bandcamp.com/album/novembeat-2020">Novembeat 2020, by Sockpuppet</a>
        <div>16 track album</div>
        <a rel="noopener nofollow" target="_blank" class="unfurl-domain" href="https://sockpuppet.bandcamp.com/album/novembeat-2020">sockpuppet.bandcamp.com</a>
    </div>
</div>

From what I can tell (having not delved too deeply into the code) it seems that the "player" card data is being ignored, and it's falling back to using just the image. Would it be possible to add support for player cards as well?

lpellis commented 3 years ago

I must have missed this issue, you are correct it currently only falls back to the image. Do you have some examples of how best to display media?

fluffy-critter commented 3 years ago

I believe with player cards it just provides you a URL to embed via iframe, and it's up to the card provider to provide the ideal experience.

fluffy-critter commented 3 years ago

To use the example in the URL I provided above, here's the relevant OpenGraph:

            <meta property="og:video"
                content="https://bandcamp.com/EmbeddedPlayer/v=2/album=1223510543/size=large/tracklist=false/artwork=small/">
            <meta property="og:video:secure_url"
                content="https://bandcamp.com/EmbeddedPlayer/v=2/album=1223510543/size=large/tracklist=false/artwork=small/">
            <meta property="og:video:type" content="text/html">
            <meta property="og:video:height" content="120">
            <meta property="og:video:width" content="400">

and if you just do the naive thing and do something like:

<iframe width="400" height="120" src="https://bandcamp.com/EmbeddedPlayer/v=2/album=1223510543/size=large/tracklist=false/artwork=small/"><a href="https://sockpuppet.bandcamp.com/album/novembeat-2020">Novembeat 2020, by Sockpuppet</a></iframe>

you get a perfectly serviceable player.

I don't know how universal that is though, given the og:video:type. Presumably if you get something other than text/html there you'd want to use a <video> tag instead, or something.