Como incorporar um vídeo no GitHub README.md?


Respostas:


118

O " Github Flavored Markdown " não suporta esse tipo de recurso em nenhuma página:

Um antigo tópico de suporte "Incorporar vídeos do YouTube em arquivos de remarcação" afirmava:

Com pages.github.io, sim, em qualquer outro lugar, não.

(Observação: conforme detalhado em " Página de projeto de nível superior do Github ", github.io é o novo domínio para páginas de usuário e organização desde abril de 2013.
A página publicação do GitHub é apresentada aqui )

Pode ser uma solicitação de recurso, como foi o realce da sintaxe.

Por exemplo: " Vídeo HTML5 em descontos " (agosto de 2010):

Existe alguma maneira de implementar um vídeo HTML5 no README.markdownarquivo?

Atualmente não, mas podemos estar expandindo o que você pode fazer com os READMEs no futuro.

Enquanto isso, você pode fazer isso com as páginas do GitHub e nossos Wikis.


Benjamin Oakes confirma nos comentários (maio de 2012):

Enviei uma solicitação de suporte. A resposta foi que a incorporação de vídeos não é suportada.


2
Esses links parecem estar quebrados; eles me levam ao github.com/contact agora. Alguém tem acesso a uma versão arquivada? Estou tendo dificuldades para tirá-lo do Google Cache ou da Wayback Machine.
— Benjamin Oakes

1
Pelo que vale a pena o vídeo HTML5 nas páginas wiki parece não funcionar mais.
— Benjamin Oakes

Enviei uma solicitação de suporte. A resposta foi que a incorporação de vídeos não é suportada.
— Benjamin Oakes

16
Existe algum problema público em algum lugar que eu possa votar?
— Será

2
@hyipscript Na verdade, não tenho certeza: essas citações vêm de um tópico de suporte do GitHub de 5 anos (eu restaurei o link na resposta), de [Chris Wanstrath - defunkt] ( github.com/defunkt ), um dos co- fundadores do GitHub. Não tenho mais detalhes sobre isso.
— VonC

252

Eu recomendo colocar o vídeo em um site de projeto criado com as páginas do GitHub em vez do leia-me, como descrito na resposta do VonC ; será muito melhor do que qualquer uma dessas idéias. Mas se você precisar de uma solução rápida como eu precisava, aqui estão algumas sugestões.

Use um gif

Veja a resposta de aloisdg , o resultado é impressionante, os gifs são renderizados no leia-me do github;)

Use uma imagem do player de vídeo

Você pode induzir o usuário a pensar que o vídeo está na página leia-me com uma imagem. Parece um truque de publicidade, não é perfeito, mas funciona e é engraçado;).

Exemplo:

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

Resultado:

Assista o vídeo

Use a imagem de visualização do youtube

Você também pode usar a imagem gerada pelo youtube para o seu vídeo.

Para URLs do YouTube na forma de:

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

Os URLs de visualização estão na forma de:

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

Exemplo:

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

Resultado:

Assista o vídeo

Use asciinema

Se o seu caso de uso é algo executado em um terminal, o asciinema permite gravar uma sessão do terminal e ter uma boa incorporação de redução.

Clique no botão compartilhar e copie o snippet de remarcação.

Exemplo:

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

Resultado:

asciicast


1
Há também ferramentas legais lá fora, para criar um GIF ou imagens SVG animados de seus asciicasts (por exemplo github.com/marionebl/svg-term-cli ) ;-)
— JepZ

100

Eu combino Alexandre Jasmin e Gab Le Roux respostas como esta:

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

Demo:

Contagem de demonstrações

Você pode ver esta demonstração no github .

Usei o gifyoutube aqui, mas recomendo o uso de um conversor gif local (como ffmpeg, veja como ) em vez de um online.

Para gravar sua tela em gif diretamente, convém verificar ScreenToGif .


1
Eu acho que essa deve ser a resposta selecionada. Este é o mais próximo possível de um vídeo e, para a maioria das pessoas, é um vídeo. O que é um vídeo? Ainda quadros movendo-se em seqüência para nos dar a ilusão de que está tocando. Um gif animado é a mesma coisa ... Embora o OP solicite especificamente vídeo em flash, o que é impossível, você usaria esse método para converter o vídeo em flash em um gif animado.
— Wade

1
você senhor é esperto; Estou usando isso em todos os lugares agora. Você pode querer adicionar que url para escolher ou seja url direto (eu não poderia encontrar um share.gifyoutube.com url embora)
— Dheeraj Bhaskar

Note-se que até agora o local é gifs.com, faz com que você faz o download de j.gifs.com e exige que você tenha uma conta gifs.com, a fim de baixar
— Jeroen Wiert Pluimers

1
O Licecap é uma boa alternativa ao screentogif para usuários de mac!
— J.beenie

26

Para animações simples, você pode usar um gif animado. Estou usando um neste arquivo README, por exemplo.


1
@HarishKayarohanam "até que o github traga esse recurso" de um modo geral ou eles estão trabalhando nisso? Se sim, eles já deveriam ter terminado agora? :)
— Paul

2
@ Paul Não, eles não estão trabalhando nisso, como aprendi alguns meses atrás ... Sinta-se à vontade para enfrentar o problema! github.com/github/markup/issues/538
— Petr Dvořák

Ao fazer isso, considere a acessibilidade. Pessoas com dificuldades de atenção podem se esforçar para receber texto, se houver uma animação em movimento visível ao lado.
— Eneroth3

6

apenas para estender a resposta de GabLeRoux:

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

Dessa forma, você poderá ajustar o tamanho da imagem em miniatura no arquivo README.md no repositório do Github.


3

Este é um post antigo, mas eu estava procurando uma resposta e encontrei o seguinte: https://gifs.com . Basta fazer o upload do vídeo e, em seguida, ele cria um gif que podemos adicionar facilmente em uma remarcação do github. Eu tentei, a qualidade do gif é boa.

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.