Intégration des sujets Reddit redessinés avec vidéo

[hjalali (Hossein Jalali)]

Comment pouvons-nous intégrer des vidéos Reddit dans notre publication ? Par exemple, cette publication :

Lien ici

Contient un code d’intégration comme celui-ci :

<blockquote class="reddit-card" data-card-created="1588774544"><a href="https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/">I also decided to edit at 2AM</a> from <a href="http://www.reddit.com/r/VALORANT">r/VALORANT</a></blockquote>
<script async src="//embed.redditmedia.com/widgets/platform.js" charset="UTF-8"></script>

[pfaffman (Jay Pfaffman)]

Et si on essayait ça ?

  https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/

Ce qui fait ceci :

Ah. Ce n’est pas idéal. Vous voulez que la vidéo se lise directement dans Discourse, et non que cela vous redirige vers Reddit.

[hjalali (Hossein Jalali)]

Merci.
Oui, si possible, nous voulons le lire directement là-bas, comme sur YouTube et Vimeo.

[Falco]

@pfaffman

Vous voulez que la vidéo soit lue directement dans Discourse, sans vous rediriger vers Reddit.

@hjalali

Oui, nous voulons, si possible, la lire directement ici, comme avec YouTube et Vimeo.

Haha, vous deux le voulez, mais avez-vous réfléchi à ce que veut Reddit ?

Depuis qu’ils ont changé toute leur philosophie et lancé le système v.redd.it, ce n’est plus la même chose.

@pfaffman

https://www.reddit.com/r/VALORANT/comments/gdyrsg/i_also_decided_to_edit_at_2am/

Toutes les balises OpenGraph et Twitter Card nous renvoient une image statique. Reddit est très clair : seule une image statique peut être intégrée.

Si vous creusez davantage, vous constaterez que la vidéo est dans un conteneur DASH, ce qui signifie que l’audio et la vidéo sont dans des fichiers séparés. Pour la faire lire dans Discourse, il faut au moins utiliser un lecteur vidéo JS personnalisé.

[hjalali (Hossein Jalali)]

En fait, Reddit autorise cela :

Lorsque vous cliquez sur le bouton Intégrer, il affiche ce qui suit :

Mon problème est de savoir comment permettre l’affichage de cela dans mon message sur mon site Discourse.

[Falco]

J’ai essayé le partage old.reddit et c’est aussi une image. Est-ce la nouvelle interface de Reddit ?

[hjalali (Hossein Jalali)]

Ouais, c’est le nouveau.

[Falco]

Oh, on dirait qu’ils sous-traitent cela à embed.ly.

En creusant un peu, il semble qu’on puisse utiliser l’ID du post pour construire un iFrame fonctionnel, après tout.

Sauf si @techAPJ veut s’en charger, je dirais #pr-bienvenue

<iframe src="https://old.reddit.com/mediaembed/gdyrsg" width="690" height="388">

[UN IFRAME QUI FONCTIONNE ET LANCE AUTOMATIQUEMENT LA VIDÉO]

[riking (Kane York)]

@Falco, pouvons-nous trouver une solution qui ne lance pas la vidéo automatiquement ?

Édition : Si nous appliquons de force allow="autoplay 'none'" à l’élément iframe dans le sanitizeur HTML, cela pourrait régler le problème (uniquement sur les nouveaux navigateurs).

[hjalali (Hossein Jalali)]

Aucun des boutons du lecteur ne fonctionne non plus (par exemple, pause, plein écran, etc.)

[Richie (Richie Rich)]

@Falco

Sauf si @techAPJ veut s’en charger, je dirais #pr-bienvenue

Quelqu’un est intéressé par une PR sur ce sujet ?

Si vous cliquez sur le bouton Partager > Intégrer sur cette URL d’exemple, puis copiez ce code :

<iframe id="reddit-embed"
src="https://www.redditmedia.com/r/timelapse/comments/w2al1z/amazing_timelapse_of_summertime_storms_in_florida/?ref_source=embed&amp;ref=share&amp;embed=true"
sandbox="allow-scripts allow-same-origin allow-popups"
style="border: none;" scrolling="no"
width="640" height="419">
</iframe>

La vidéo s’intègre et se lit dans la fenêtre de composition :

Mais la vidéo disparaît ensuite lorsque le message est soumis.

L’ajout de allow="autoplay 'none'" à la fin de l’élément iframe fait alors apparaître la vidéo, et elle se lit ensuite correctement avec tous les contrôles d’intégration qui fonctionnent (pause, lecture, etc.) :

<iframe id="reddit-embed"
src="https://www.redditmedia.com/r/timelapse/comments/w2al1z/amazing_timelapse_of_summertime_storms_in_florida/?ref_source=embed&amp;ref=share&amp;embed=true"
sandbox="allow-scripts allow-same-origin allow-popups"
style="border: none;" scrolling="no"
width="640" height="419"
allow="autoplay 'none'">
</iframe>

Comme ceci :