logo标签列表

如何将视频嵌入GitHub README.md文件？

flashgithubembedmarkdown
437
16个回答
364
在你的ReadMe中添加一个视频文件的URL。
Github现在支持视频，详细答案请参见这里：https://dev59.com/F2855IYBdhLWcg3wilCD#4279746。
你可以在这里看到一个实际示例（在readme的末尾查看）：
https://github.com/alelievr/Mixture/blob/0.4.0/README.md。

Github Pages

我强烈建议将视频放在使用GitHub Pages创建的项目网站上，而不是放在readme中，就像VonC的回答中所描述的那样；这将比任何其他想法都要好得多。但如果你需要一个快速解决方案，就像我一样需要的那样，这里有一些建议。

使用gif

看aloisdg的回答，结果很棒，在GitHub的自述文件中呈现了gif图像；）

使用视频播放器图片

你可以通过一张图片来让用户误以为视频在自述文件页面上。这听起来像是一个广告伎俩，虽然不完美，但它有效且有趣;）。

示例：

[![Watch the video](https://istack.dev59.com/Vp2cE.webp)](https://youtu.be/vt5fpE0bzSY)

结果：

Watch the video

使用YouTube的预览图片

您还可以使用YouTube为您的视频生成的图片。

对于以下形式的YouTube链接：

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

预览网址的形式为：

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)

结果：

Watch the video

使用 asciinema

如果您的用例是在终端中运行的内容，asciinema 可以让您录制终端会话并具有漂亮的 Markdown 嵌入功能。

点击分享按钮并复制 Markdown 代码片段。

示例：

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

结果：

asciicast

4
还有一些很酷的工具可以从你的 asciicasts 中创建 gif 或动画 svg 图像（例如 https://github.com/marionebl/svg-term-cli）;-) - JepZ
我能上传那些存储在我的硬盘中的视频吗？ - Umakanth Pendyala
1
似乎只有特定的视频URL是允许的，例如：指向存储库内部的URL或以“https://user-images.githubusercontent.com”开头的URL。\ 而且它必须只是一个URL行，没有其他语法。
（使用HTML <video> 标签无效。）
否则它将被忽略。 - Nor.Z
281

2021年5月更新:

视频上传现已普遍可用

现在您可以在GitHub中任何支持Markdown的地方进行视频上传，包括移动应用程序。

在问题、拉取请求和讨论评论以及存储库Markdown文件（如README）中分享演示、显示复制步骤等。

正如Lauren Brose（GitHub Issues产品经理）所述，这可以帮助：

  • 帮助维护者重现错误
  • 为审核者提供拉取请求的上下文
  • 分享功能的可能形式
  • 从任何地方上传您的视频！（现在所有用户都可以从iOS和Android GitHub移动应用程序上传视频）
注意：正如 Sancarn所评论的那样， webm（开放式网络媒体项目）似乎不被直接支持。
尽管...如 Garrett LeSage所指出的那样：

如果你将扩展名从.webm改为.mov（或在.webm之后添加.mov），@GitHub会接受该视频并甚至可以内联显示。

Matthew Gregg补充道：

webm在iOS设备上播放吗？这可能是他们软阻止的原因。

2021年2月更新，正如Abhishek Singh在评论和Nat Friedman on Twitter中所指出的：

现在你终于可以将图片和视频（mp4、gif）拖放到GitHub上的Markdown文件编辑器中了。

image and video

如果你喜欢粘贴，这也是可行的。
在问题和PR中它已经有一段时间了；这里的新支持是在markdown文件中。

GitHub企业服务器通常会滞后于http://github.com几个月，但未来的版本中会支持该功能。

Kyle Daigle（GitHub的高级项目主管）补充道：

目前，该文件作为资产存储在存储库外（类似于上传到图像的图像）。
（上传到githubusercontent并在那里存储它。然后在markdown中创建指向上传图像的链接。）

团队有兴趣探索将图像添加到仓库中......你需要这样的功能吗？

Sven-Michael Stübe 评论道：

我通常会将图片添加到我的存储库中。特别是如果您将博客作为带有自定义域名的 GitHub 页面进行托管。

但是我认为该功能也会增加许多复杂性。手动添加图片并不麻烦。对于PR和评论，拖放更为重要。

Kyle回答：

对于博客案例（这也是我们考虑将图像上传到仓库的原因），你是完全正确的。
当您不想上传到仓库时，此类拖放对于向 README 或其他存储库文档添加图像非常有帮助。

自从 2012年初次提出... 以来，该功能已经发展了很长一段时间！

2020年12月更新：请查看 "视频上传公测"，其中嵌入了视频（仅嵌入，不是链接/引用）

https://i0.wp.com/user-images.githubusercontent.com/22751162/101841526-ebf6ff00-3afa-11eb-965d-5ce11efdb9f8.png?ssl=1

2010年: "Github Flavored Markdown"不支持任何页面的这种功能:

一个旧的支持线程 "在markdown文件中嵌入YouTube视频" 表示:

使用 pages.github.io, 是的, 在其他地方, 不是.

(注意: 如 "Github顶级项目页面"所述, github.io 是自2013年4月以来用于用户和组织页面的新域名。
该GitHub发布页面在此处呈现)

这可以像语法高亮一样成为一个功能请求。

例如："在Markdown中使用HTML5视频" (2010年8月):

有没有办法在 README.markdown 文件中实现HTML5视频？

目前还没有，但我们可能会在未来扩展README的功能。

与此同时，您可以使用GitHub Pages和我们的Wikis来实现此操作。

Benjamin Oakes在评论中确认（2012年5月）：

我发送了支持请求。回复是不支持嵌入视频。

4
这些链接似乎已经失效了，现在它们会带我到https://github.com/contact。有人能够获取存档版本吗？我很难从Google缓存或Wayback Machine中找到它。 - Benjamin Oakes
2
就目前而言，在维基页面中使用HTML5视频似乎不再起作用了。 - Benjamin Oakes
32
有没有哪个公共问题我可以点赞支持？ - dysbulic
3
@hyipscript并不确定：这段引用来自一个5年前的GitHub支持主题帖（我在答案中恢复了链接），发布者是GitHub的联合创始人之一Chris Wanstrath -- defunkt。关于此事我没有更多细节信息。 - VonC
1
@AndroidDev 你看到了“出了点问题，我们无法处理该文件。请重试”吗？ - VonC
显示剩余26条评论
138

我将Alexandre Jasmin和Gab Le Roux的答案结合起来，如下:

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

演示：

CountPages alpha演示

您可以在github上查看此演示。

我在这里使用了gifyoutube，但我建议使用本地gif转换器（例如ffmpeg，请参见），而不是在线转换器。

如果想要直接将屏幕录制为gif，请查看ScreenToGif。

3
我认为这应该成为被选中的答案。这是最接近视频的东西，对大多数人来说它就是视频。什么是视频？静止帧按顺序移动，给我们一种它正在播放的错觉。动画gif也是同样的道理...尽管 OP 特别要求 flash 视频，但这种方法可以将 flash 视频转换为动画gif。 - Wade
2
您真是个聪明的人；我现在到处都在使用这个。您可能需要添加要选择哪个URL，即直接URL（尽管我找不到share.gifyoutube.com URL）。 - Dheeraj Bhaskar
请注意，现在该网站是gifs.com，您可以从https://j.gifs.com下载，并需要拥有gifs.com帐户才能下载。 - Jeroen Wiert Pluimers
2
Licecap是Mac用户的一个很好的替代Screentogif的选择！ - J.beenie
这个答案对我很有帮助，并且已经应用到我的代码库中 - https://github.com/jonathasborges1/SpringHellov2 - jonathasborges1
46

不确定为什么没有人提到这种最简单的方法，它在今天（2022年）仍然有效。 你可以在Github的任何地方使用以下语法，包括像Readme.md这样的markdown文件。

<video src='your URL here' width=180/>

如果您想要将两个视频并排显示

caption1 | caption2
:-: | :-:
<video src='video1.mov' width=180/> | <video src='video2.mp4' width=180/>

这适用于mov和mp4视频（已测试）

这是一个Github评论，证明了这个方法是可行的。

20
目前似乎无法在Github的Readme.md中使用，包括Vimeo视频。此外，在视频标签后面的所有后续markdown都会被破坏。 - MRule
6
@MRule 这个方法可行，你只需要关闭视频标签，例如 <video src="https://user-images.githubusercontent.com/126239/151127893-5c98ba8d-c431-4a25-bb1f-e0b33645a2b6.mp4"></video>，这里有一个例子 https://github.com/mfitzp/diffcast - mfitzp
4
它显示了视频，但出于某种原因，高度和宽度对我来说不起作用。 - Christian
9
我尝试使用这种技术将仓库中的视频直接嵌入页面，但是 Github 似乎完全删除了视频标签。 - ndtreviv
1
在README中，一个自闭合标签<video />会破坏后续的Markdown，正如MRule所提到的。而使用单独的闭合标签<video></video>，视频无法渲染，正如Christian所提到的。如果您的视频已上传到GitHub，则直接使用纯URL似乎可以解决，例如：https://github.com/rybak/atlassian-tweaks/blob/35e4ee3f46b62428f066d6bf56dc6f443fb93d00/README.md#confluence--simple-floating-table-of-contents - andrybak
显示剩余4条评论
28

对于简单的动画，您可以使用动态GIF。例如，我在此自述文件中使用了一个。

1
@HarishKayarohanam “直到Github推出这个功能”一般来说，他们正在开发这样的功能吗？如果是这样，他们现在应该已经完成了吧？ :) - Paul
2
@Paul 不，他们没有在处理这个问题，我几个月前就了解到了... 随时可以提出问题！https://github.com/github/markup/issues/538 - Petr Dvořák
请考虑可访问性。注意力不集中的人可能会在其旁边有移动动画的情况下难以理解文本。 - Eneroth3
18
即使这是一篇旧帖子，我认为在这个问题上提供一个额外的（部分和相关的）解决方案会很有帮助，除了已经存在于此线程中非常有用的解决方法。截至撰写本文时（2021年1月6日），GitHub发布了一项功能，可以将大小不超过10 MB的.mp4和.mov文件上传到问题、拉取请求和讨论评论中（如此处所述）。这是一个直接嵌入，而不是像我们通常做的那样将其链接到外部URL。它已经退出公共测试。您可以通过拖放、选择或粘贴来附加文件。GitHub新通知的预览可以在此处看到：

Preview of GitHub's notice on video support

也许在未来，我们可以逐渐推动GitHub将这一原生功能扩展到README文件中。
5
在README文件中可以这样做吗？ - Shobhit Puri
3
被接受的答案表明README得到支持 - 上传正常工作，但在此处嵌入不起作用。针对mp4文件。 - lys
15

只是扩展 @GabLeRoux 的答案：

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

这样，您就可以调整 GitHub 存储库中 README.md 文件中缩略图图像的大小。

确认，我尝试了这个，看起来和运行都很棒。谢谢！ - leorleor
5
这是一篇旧文章，但我在寻找答案时发现了这个网站：https://gifs.com。只需上传视频，它就会创建一个gif，我们可以轻松地将其添加到Github的markdown中。 我试过了，gif的质量很好。
谢谢您！这是一个很棒的网站，现在您可以像这样轻松地在Github中添加gif图片 - Jen
4
拖放MP4视频，就像其他许多解决方案中提到的那样，但有一件重要的事情要做，以便让视频能够被漂亮地显示和嵌入：在您将视频拖放到部分后不久显示的URL前留下一个空行，就像这样：请注意，在URL上方留有空行。 
**Before:**
Here is the video of a bug:

https://and-here-comes-the-url

some other text...

所以你将会得到预期结果。

我很久以前就一直在苦苦寻找这个功能了（自从它出现在GitHub上）。直到今天我才找到了！如果没有空行，拖放永远无法让视频正常嵌入，只会显示一个URL。所以，如果你这样做...

**Before:**
Here is the video of a bug:
https://and-here-comes-the-url

some other text...

你将会得到这个结果。

这也适用于在 GH 评论和 GH 上的任何地方添加视频。希望这能帮到你。

4
现在是2022年8月。看起来Github已经允许直接将视频嵌入readme中。我找到了这个repo，它似乎正好满足我的需求。

Capture screen

Readme.md 内容

###  No Content-Blocking vs. Content-Blocking
https://user-images.githubusercontent.com/16564273/125283630-9845d180-e2e6-11eb-8b7d-f30a8f2eae8a.mp4
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接