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.