Comment intégrer une vidéo dans GitHub README.md?


Réponses:


118

Le " Github Flavored Markdown " ne prend en charge ce type de fonctionnalité pour aucune page:

Un ancien fil de support "Intégrer des vidéos YouTube dans des fichiers de démarque" a déclaré:

Avec pages.github.io, oui, partout ailleurs, non.

(Remarque: comme détaillé dans « Page de projet Github de niveau supérieur », github.io est le nouveau domaine pour les pages utilisateur et organisation depuis avril 2013.
La page de publication GitHub est présentée ici )

Cela pourrait être une demande de fonctionnalité comme la mise en évidence de la syntaxe.

Par exemple: " Vidéo HTML5 en démarque " (août 2010):

Existe-t-il un moyen d'implémenter une vidéo HTML5 dans le README.markdownfichier?

Pas actuellement, mais nous pourrions étendre ce que vous pouvez faire avec les fichiers README à l'avenir.

En attendant, vous pouvez le faire avec GitHub Pages et nos Wikis.


Benjamin Oakes confirme dans les commentaires (mai 2012):

J'ai envoyé une demande d'assistance. La réponse a été que l'intégration de vidéos n'est pas prise en charge.


2
Ces liens semblent rompus; ils m'emmènent sur github.com/contact maintenant. Quelqu'un a-t-il accès à une version archivée? J'ai du mal à le retirer du Google Cache ou de la Wayback Machine.
Benjamin Oakes

1
Pour ce que ça vaut La vidéo HTML5 dans les pages wiki ne semble plus fonctionner.
Benjamin Oakes

J'ai envoyé une demande d'assistance. La réponse a été que l'intégration de vidéos n'est pas prise en charge.
Benjamin Oakes

17
Y a-t-il un problème public quelque part que je pourrais voter?
Will

2
@hyipscript Je ne sais pas vraiment: ces citations proviennent d'un thread de support GitHub vieux de 5 ans (j'ai restauré le lien dans la réponse), de [Chris Wanstrath - defunkt] ( github.com/defunkt ), l'un des co- fondateurs de GitHub. Je n'ai pas plus de détails à ce sujet.
VonC

252

Je recommande fortement de placer la vidéo dans un site Web de projet créé avec GitHub Pages au lieu du fichier Lisez- moi , comme décrit dans la réponse de VonC ; ce sera beaucoup mieux que n'importe laquelle de ces idées. Mais si vous avez besoin d'une solution rapide comme j'en avais besoin, voici quelques suggestions.

Utilisez un gif

Voir la réponse de aloisdg , le résultat est génial, les gifs sont affichés dans le readme de github;)

Utiliser une image de lecteur vidéo

Vous pourriez inciter l'utilisateur à penser que la vidéo est sur la page Lisez-moi avec une image. Cela ressemble à un truc de publicité, ce n'est pas parfait, mais ça marche et c'est drôle;).

Exemple:

[![Watch the video](https://i.imgur.com/vKb2F1B.png)](https://youtu.be/vt5fpE0bzSY)

Résultat:

Voir la vidéo

Utilisez l'image d'aperçu de YouTube

Vous pouvez également utiliser l'image générée par YouTube pour votre vidéo.

Pour les URL YouTube sous la forme de:

https://www.youtube.com/watch?v=<VIDEO ID>
https://youtu.be/<VIDEO URL>

Les URL d'aperçu se présentent sous la forme de:

https://img.youtube.com/vi/<VIDEO ID>/maxresdefault.jpg
https://img.youtube.com/vi/<VIDEO ID>/hqdefault.jpg

Exemple:

[![Watch the video](https://img.youtube.com/vi/T-D1KVIuvjA/maxresdefault.jpg)](https://youtu.be/T-D1KVIuvjA)

Résultat:

Voir la vidéo

Utiliser l'ascininème

Si votre cas d'utilisation est quelque chose qui s'exécute dans un terminal, asciinema vous permet d'enregistrer une session de terminal et intègre une belle démarque.

Appuyez sur le bouton Partager et copiez l'extrait de démarque.

Exemple:

[![asciicast](https://asciinema.org/a/113463.png)](https://asciinema.org/a/113463)

Résultat:

asciicast


1
Il existe également des outils sympas pour créer un gif ou des images svg animées à partir de vos asciicasts (par exemple github.com/marionebl/svg-term-cli ) ;-)
JepZ

100

Je combine les réponses d' Alexandre Jasmin et Gab Le Roux comme ceci:

[![Demo CountPages alpha](https://share.gifyoutube.com/KzB6Gb.gif)](https://www.youtube.com/watch?v=ek1j272iAmc)

Démo:

Démo CountPages alpha

Vous pouvez voir cette démo sur github .

J'ai utilisé gifyoutube ici, mais je recommande d'utiliser un convertisseur gif local (comme ffmpeg, voyez comment ) au lieu d'un convertisseur en ligne.

Pour enregistrer votre écran en gif directement, vous voudrez peut-être vérifier ScreenToGif .


1
Je pense que cela devrait être la réponse choisie. Ceci est le plus proche d'une vidéo que vous pouvez obtenir, et la plupart des gens , il est une vidéo. Qu'est-ce qu'une vidéo? Les images fixes bougent en séquence pour nous donner l'illusion qu'il joue. Un gif animé est la même chose ... Bien que l'OP ait spécifiquement demandé une vidéo flash, ce qui est impossible, vous utiliseriez cette méthode pour convertir la vidéo flash en un gif animé.
Wade

1
vous monsieur êtes intelligent; J'utilise ça partout maintenant. Vous voudrez peut-être ajouter l'url à choisir, c'est-à-dire l'url directe (je n'ai pas pu trouver d'url share.gifyoutube.com cependant)
Dheeraj Bhaskar

Notez que le site est maintenant gifs.com, vous permet de télécharger sur j.gifs.com et vous oblige à avoir un compte gifs.com pour télécharger
Jeroen Wiert Pluimers

1
Licecap est une bonne alternative à screentogif pour les utilisateurs de mac!
J.beenie

26

Pour des animations simples, vous pouvez utiliser un gif animé. J'en utilise un dans ce fichier README par exemple.


1
@HarishKayarohanam "jusqu'à ce que github apporte cette fonctionnalité" de manière générale ou travaillent / travaillaient-ils sur une telle chose? Si oui, ils auraient dû le finir maintenant? :)
Paul

2
@Paul Non, ils ne travaillent pas là-dessus, comme je l'ai appris il y a quelques mois ... N'hésitez pas à résoudre le problème! github.com/github/markup/issues/538
Petr Dvořák

En faisant cela, veuillez considérer l'accessibilité. Les personnes ayant des difficultés d'attention peuvent avoir du mal à saisir du texte si une animation en mouvement est visible à côté.
Eneroth3

6

juste pour étendre la réponse de @ GabLeRoux:

[<img src="https://img.youtube.com/vi/<VIDEO ID>/maxresdefault.jpg" width="50%">](https://youtu.be/<VIDEO ID>)

De cette façon, vous pourrez ajuster la taille de l'image miniature dans le fichier README.md sur votre dépôt Github.


3

Ceci est un ancien message mais je cherchais une réponse et j'ai trouvé ceci: https://gifs.com . Téléchargez simplement la vidéo, puis cela crée un gif que nous pouvons ajouter facilement dans une démarque github. Je l'ai essayé, la qualité du gif est bonne.

En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.