¿Cómo incrustar un video en GitHub README.md?


Respuestas:


118

El " Markdown con sabor a Github " no admite este tipo de función para ninguna página:

Un antiguo hilo de soporte "Incrustar videos de YouTube en archivos de descuento" declaró:

Con pages.github.io, sí, en todas partes, no.

(Nota: como se detalla en la " Página del proyecto de nivel superior de Github ", github.io es el nuevo dominio para las páginas de usuarios y organizaciones desde abril de 2013.
La publicación de la página de GitHub se presenta aquí )

Esta podría ser una solicitud de función como lo fue el resaltado de sintaxis.

Por ejemplo: " video HTML5 en Markdown " (agosto de 2010):

¿Hay alguna forma de implementar un video HTML5 en el README.markdownarchivo?

Actualmente no, pero podríamos estar ampliando lo que puede hacer con los README en el futuro.

Mientras tanto, puedes hacer esto con las páginas de GitHub y nuestros wikis.


Benjamin Oakes confirma en los comentarios (mayo de 2012):

Envié una solicitud de soporte. La respuesta fue que incrustar videos no es compatible.


2
Esos enlaces parecen estar rotos; me llevan a github.com/contact ahora. ¿Alguien tiene acceso a una versión archivada? Me está costando sacarlo de la caché de Google o de la máquina Wayback.
Benjamin Oakes

1
Por lo que vale, el video HTML5 en páginas wiki ya no parece funcionar.
Benjamin Oakes

Envié una solicitud de soporte. La respuesta fue que incrustar videos no es compatible.
Benjamin Oakes

16
¿Hay algún problema público en algún lugar que pueda votar?
Será

2
@hyipscript No estoy seguro en realidad: esas citas provienen de un hilo de soporte de GitHub de 5 años (he restaurado el enlace en la respuesta), de [Chris Wanstrath - defunkt] ( github.com/defunkt ), uno de los co- fundadores de GitHub. No tengo más detalles sobre eso.
VonC

252

Recomiendo encarecidamente colocar el video en un sitio web del proyecto creado con páginas GitHub en lugar del archivo Léame, como se describe en la respuesta de VonC ; Será mucho mejor que cualquiera de estas ideas. Pero si necesita una solución rápida como yo necesitaba, aquí hay algunas sugerencias.

Usa un gif

Vea la respuesta de aloisdg , el resultado es impresionante, los gifs se representan en el archivo Léame de github;)

Usa una imagen de reproductor de video

Podría engañar al usuario para que piense que el video está en la página Léame con una imagen. Suena como un truco publicitario, no es perfecto, pero funciona y es divertido;).

Ejemplo:

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

Resultado:

Ver el vídeo

Use la imagen de vista previa de youtube

También puede usar la imagen generada por youtube para su video.

Para las URL de youtube en forma de:

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

Las URL de vista previa tienen la forma de:

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

Ejemplo:

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

Resultado:

Ver el vídeo

Usa asciinema

Si su caso de uso es algo que se ejecuta en una terminal, asciinema le permite grabar una sesión de terminal y tiene una buena integración de marcado.

Presione el botón compartir y copie el fragmento de descuento.

Ejemplo:

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

Resultado:

asciicast


1
También hay herramientas geniales para crear un gif o imágenes animadas de svg de sus asciicasts (por ejemplo, github.com/marionebl/svg-term-cli ) ;-)
JepZ

100

Combino respuestas de Alexandre Jasmin y Gab Le Roux como esta:

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

Manifestación:

Demo CountPages alpha

Puedes ver esta demo en github .

Solía gifyoutube aquí, pero recomiendo el uso de un convertidor de gif local (como ffmpeg, ver cómo ) en lugar de una línea.

Para grabar su pantalla en gif directamente, puede consultar ScreenToGif .


1
Creo que esta debería ser la respuesta seleccionada. Esto es lo más parecido a un video que puede obtener, y para la mayoría de las personas es un video. ¿Qué es un video? Todavía los cuadros se mueven en secuencia para darnos la ilusión de que está jugando. Un gif animado es lo mismo ... Aunque el OP solicitó específicamente un video flash, lo cual es imposible, usaría este método para convertir el video flash en un gif animado.
Wade

1
usted señor es inteligente; Estoy usando esto en todas partes ahora. Es posible que desee agregar qué url elegir, es decir, url directa (aunque no pude encontrar una url share.gifyoutube.com)
Dheeraj Bhaskar

Tenga en cuenta que ahora el sitio es gifs.com, obtiene descargas de j.gifs.com y requiere que tenga una cuenta gifs.com para poder descargarlo
Jeroen Wiert Pluimers

1
¡Licecap es una buena alternativa a screentogif para los usuarios de mac!
J.beenie

26

Para animaciones simples, puedes usar un gif animado. Estoy usando uno en este archivo README, por ejemplo.


1
@HarishKayarohanam "hasta que github traiga esta característica" en general, ¿están o estaban trabajando en algo así? Si es así, ¿ya deberían haberlo terminado? :)
Paul

2
@Paul No, no están trabajando en esto, como aprendí hace un par de meses ... ¡Siéntase libre de resolver el problema! github.com/github/markup/issues/538
Petr Dvořák

Al hacer esto, tenga en cuenta la accesibilidad. Las personas con dificultades de atención pueden tener dificultades para asimilar el texto si hay una animación en movimiento visible al lado.
Eneroth3

6

solo para extender la respuesta de @ GabLeRoux:

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

de esta manera podrá ajustar el tamaño de la imagen en miniatura en el archivo README.md en su repositorio de Github.


3

Esta es una publicación antigua pero estaba buscando una respuesta y encontré esto: https://gifs.com . Simplemente suba el video, luego crea un gif que podemos agregar fácilmente en una reducción de Github. Lo probé, la calidad del gif es buena.

Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.