Как вставить видео в GitHub README.md?


Ответы:


118

" Github Flavored Markdown " не поддерживает такую ​​функцию для любой страницы:

Старая ветка поддержки «Вставить видео YouTube в файлы уценки» гласила:

С участием pages.github.io , да и везде, нет.

(Примечание: как подробно описано в разделе « Страница проекта Github верхнего уровня », github.io является новым доменом для страниц пользователей и организаций с апреля 2013 года
. Страница публикации GitHub представлена ​​здесь )

Это может быть запрос функции, такой как подсветка синтаксиса.

Например: « HTML5 видео в уценке » (август 2010):

Есть ли способ внедрить видео HTML5 в README.markdownфайл?

Не в настоящее время, но мы можем расширить возможности, которые вы можете сделать с README в будущем.

А пока вы можете сделать это с помощью страниц GitHub и наших вики.


Бенджамин Оукс подтверждает в комментариях (май 2012 года):

Я отправил запрос в службу поддержки. Ответ был таков: встраивание видео не поддерживается.


2
Эти ссылки, кажется, не работают; сейчас они ведут меня на github.com/contact . У кого-нибудь есть доступ к заархивированной версии? Мне трудно вытащить его из Google Cache или Wayback Machine.
Бенджамин Оукс

1
Для чего стоит видео HTML5 на вики-страницах, похоже, больше не работает.
Бенджамин Оукс

Я отправил запрос в службу поддержки. Ответ был таков: встраивание видео не поддерживается.
Бенджамин Оукс

17
Есть ли где-то общественная проблема, которую я мог бы поднять?
Будет

2
@hyipscript На самом деле не уверен: эти цитаты взяты из 5-летней ветки поддержки GitHub (я восстановил ссылку в ответе), из [Chris Wanstrath - defunkt] ( github.com/defunkt ), одного из соавторов. основатели GitHub. У меня нет более подробной информации об этом.
VonC

252

Я настоятельно рекомендую разместить видео на веб-сайте проекта, созданном с помощью GitHub Pages вместо readme, как описано в ответе VonC ; это будет намного лучше, чем любая из этих идей. Но если вам нужно быстрое решение, как мне нужно, вот несколько советов.

Используйте подарок

Посмотреть ответ Алоисда , результат потрясающий, GIF-файлы отображаются на readme github;)

Используйте изображение с видео плеера

Вы можете заставить пользователя думать, что видео находится на странице readme с картинкой. Звучит как рекламный трюк, он не идеален, но работает и забавен;).

Пример:

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

Результат:

Смотреть видео

Используйте предварительный просмотр YouTube

Вы также можете использовать изображение, созданное YouTube для вашего видео.

Для URL YouTube в виде:

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

В Предварительный просмотр URLs в виде:

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

Пример:

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

Результат:

Смотреть видео

Используйте asciinema

Если ваш вариант использования работает в терминале, asciinema позволяет записывать сеанс терминала и имеет хорошее вложение уценки.

Нажмите кнопку «Поделиться» и скопируйте фрагмент уценки.

Пример:

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

Результат:

asciicast


1
Есть также классные инструменты для создания gif или анимированных svg-изображений из ваших учеников (например, github.com/marionebl/svg-term-cli ) ;-)
JepZ

100

Я комбинирую ответы Александра Жасмина и Габ Ле Ру примерно так:

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

Демо-версия:

Демо CountPages альфа

Вы можете увидеть это демо на GitHub .

Я использовал gifyoutube здесь, но я рекомендую использовать локальный конвертер gif (например, ffmpeg, смотрите как ) вместо онлайн.

Чтобы записать ваш экран в GIF напрямую, вы можете проверить ScreenToGif .


1
Я думаю, что это должен быть выбранный ответ. Это ближе всего к видео , как вы можете получить, и для большинства людей это является видео. Что такое видео? Неподвижные кадры движутся в последовательности, чтобы создать иллюзию, что они играют. Анимированный GIF - это то же самое ... Хотя ОП специально просил флэш-видео, что невозможно, вы бы использовали этот метод для преобразования флэш-видео в анимированный GIF.
Уэйд

1
вы, сэр, умный; Я использую это везде сейчас. Вы можете добавить , который URL , чтобы выбрать то есть прямая ссылка (я не мог найти share.gifyoutube.com URL , хотя)
Дирадж Bhaskar

Обратите внимание, что к настоящему моменту сайт gifs.com получает загрузки с j.gifs.com и требует, чтобы у вас была учетная запись gifs.com для загрузки
Jeroen Wiert Pluimers

1
Licecap - хорошая альтернатива screentogif для пользователей Mac!
J.beenie

26

Для простых анимаций вы можете использовать анимированный GIF. Я использую один в этом файле README, например.


1
@HarishKayarohanam "пока github не добавит эту функцию", вообще говоря, или они работают над этим? Если так, они должны были закончить это сейчас? :)
Пол

2
@Paul Нет, они не работают над этим, как я узнал пару месяцев назад ... Не стесняйтесь поднимать вопрос! github.com/github/markup/issues/538
Петр Дворжак

При этом, пожалуйста, учитывайте доступность. Люди с проблемами со вниманием могут с трудом воспринимать текст, если рядом с ним видна движущаяся анимация.
Eneroth3

6

просто чтобы расширить ответ @ GabLeRoux:

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

таким образом вы сможете настроить размер миниатюрного изображения в файле README.md на вашем репозитории Github.


3

Это старый пост, но я искал ответ, и я нашел это: https://gifs.com . Просто загрузите видео, и оно создаст GIF, который мы можем легко добавить в уценке GitHub. Я попробовал, качество картинки хорошее.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.