如何将视频嵌入到GitHub README.md?

是否可以在README中嵌入一个flash视频。md在GitHub?它没有显示:https://github.com/mattdipasquale/PicSciP

323606 次浏览
小开
最佳答案

2021年5月更新:

< a href = " https://github。博客/2021-05-13-video-uploads-available-github/" rel="noreferrer">视频上传现在普遍可用

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

共享演示，显示复制步骤，以及关于问题、拉请求和讨论评论以及存储库Markdown文件(如READMEs)的更多内容。

作为劳伦麦片汤 (GitHub问题的产品经理)的详细信息，这可以帮助:

  • 帮助维护者重现错误
  • 为审查人员提供有关拉取请求的上下文
  • 分享一个功能是如何形成的
  • 从任何地方上传你的视频!(所有用户现在都可以从iOS和Android GitHub移动应用程序上传视频)
注意:由于评论 by Sancarn， < >强webm < / >强(开放网络媒体项目)似乎不支持直接。
尽管……正如加勒特勒所指出的:

如果你将扩展名从.webm改为.mov(或者只是在.webm之后加上.mov)， @GitHub接受视频，甚至内联显示它。

马修·格雷格补充道:

webm在iOS设备上播放吗?这可能就是它们软挡的原因。

2021年2月更新，如评论和Nat Friedman在推特上说中的辛格的阿布所述:

现在你终于可以了!-将图像和视频(mp4, gif)放到GitHub上的Markdown文件编辑器上。

图像和视频

粘贴也可以，如果你喜欢那种东西。
它曾在发行和公关方面工作过一段时间;这里的新功能是支持markdown文件

GitHub企业服务器往往滞后http://github.com几个月，但它将在未来的版本中实现。

凯尔Daigle (GitHub特殊项目的高级总监)补充道:

目前，文件被存储为存储库之外的资产(有点像图像上传到图像)。
(上传到githubusercontent并存储在那里。然后在markdown中链接到上传的图像。)

该团队有兴趣探索添加映像来回购太…你想要这样的东西吗?

Sven-Michael餐厅评论:

我通常会把图片添加到我的回购中。特别是如果你把你的博客作为一个带有自定义域名的github页面。

但我认为这个功能也会增加很多复杂性。手动添加图像并不是什么大麻烦。对于pr +注释，拖放是更重要的

凯尔的答案:

对于博客的情况(这让我们想到了图像上传到回购)，你是完全正确的。
当将图像添加到README或其他回购文档(当你不想上传到回购文档时)时，这种类型的拖放非常有用

该特性自最初的提案……早在2012年(!)以来已经走过了很长的一段路

2020年12月更新:见&;__abc0 &;，嵌入视频(仅嵌入，不包含链接/参考)

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

2010: The &;Github调味Markdown"不支持任何页面的这种功能:

旧的支持线程"嵌入YouTube视频在markdown文件"声明:

对于pages.github.io，是的，其他地方，不是。

(注:如“__abc0”中所述，github.io是自2013年4月起用户和组织页面的新域名。
页面GitHub发布在这里) < / p >

这可能是一个像语法高亮显示一样的特性请求。

例如:HTML5视频降价"(2010年8月):

有没有办法实现HTML5视频到README.markdown文件?

目前还没有，但我们可能会在未来扩展您可以使用readme做的事情。

与此同时，你可以通过GitHub页面和我们的维基来实现这一点。

本杰明·奥克斯在评论中确认(2012年5月):

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

小开

对于简单的动画，你可以使用gif动画。例如，我使用了一个在这个README文件中。

小开

在ReadMe中添加视频文件的url。

Github现在支持视频，查看更详细的答案在这里:https://stackoverflow.com/a/4279746/1092815

你可以在这里看到一个生动的例子(见自述文末尾):
https://github.com/alelievr/Mixture/blob/0.4.0/README.md < / p >

Github页面

我强烈建议将视频放在用GitHub页面创建的项目网站上，而不是像VonC的回答中描述的那样;它将比这些想法都要好得多。但如果你像我一样需要快速解决问题，这里有一些建议。

使用gif

看aloisdg的回答，结果很棒，gif在github的自述me上渲染;)

使用视频播放器图片

你可以用图片欺骗用户，让他们以为视频在自述页面上。这听起来像一个广告技巧，它并不完美，但它有效，而且很有趣;)

例子:

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

结果:

< a href = " https://youtu。be/vt5fpE0bzSY" rel="noreferrer">观看视频

使用youtube的预览图片

你也可以在视频中使用youtube生成的图片。

用于youtube网址的格式为:

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

预览url的形式是:

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)

结果:

< a href = " https://youtu。be/T-D1KVIuvjA" rel="noreferrer">观看视频

使用asciinema

如果你的用例是在终端中运行的，asciinema可以让你记录一个终端会话，并且有很好的markdown嵌入。

点击分享按钮并复制标记下来的代码片段。

例子:

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

结果:

asciicast

小开

我将亚历山大茉莉花和加布·勒鲁的答案组合在一起，如下所示:

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

演示:

Demo CountPages alpha

你可以在github上看到这个演示。

我在这里使用了gifyoutube，但我建议使用本地gif转换器(如ffmpeg， 看看)而不是在线转换器。

要将屏幕直接录制到gif，你可能需要检查ScreenToGif。

小开
这是一个旧帖子，但我正在寻找一个答案，我发现了这个:https://gifs.com。只需上传视频，然后它创建一个gif，我们可以很容易地添加在github markdown。 我试过了，gif的质量还不错
小开

扩展一下@GabLeRoux的回答:

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

这样你就可以在README中调整缩略图的大小。md文件在你的Github回购。

小开

尽管这是一篇旧文章，但我认为在这篇文章中已经出现的非常有用的变通方法之上，提出一个额外的(部分的和切线的)解决方案会很有帮助。

在撰写本文时(2021年1月6日)，GitHub发布了一个功能，可以上传高达10mb的.mp4和.mov文件来解决问题、拉请求和讨论评论(作为共享在这里)。这是一个直接嵌入，而不是“链接”。像我们通常做的那样，将它发送到外部url。它已经脱离了公测版。您可以通过拖放、选择或粘贴来附加文件。GitHub新通知的预览可以在这里看到:

GitHub关于视频支持的通知预览

也许，在未来，我们可以慢慢地推动GitHub最终将这个原生功能扩展到readme。

小开
这样做的一个好方法是使用任何在线mp4到gif转换器将视频转换为gif。 然后,< / p >

步骤:1在存储库中创建一个文件夹，可以存储所有想要显示的图像和视频。

步骤:2然后复制你想要显示的视频或图像的链接。例如，你想从链接:(https://github.com/Faizun-Faria/Thief-Robber-Landlord-Police/blob/main/Preview/gif_english.gif)显示游戏过程的视频。 您可以简单地在README中编写以下代码。Md文件显示gif:

![Game Process](https://github.com/Faizun-Faria/Thief-Robber-Landlord-Police/blob/main/Preview/gif_english.gif)
小开

这是第一个解决方案的老帖子和TLDR:

  1. 我刚打开“编辑”;我Readme.md
  2. 拖放视频在自述编辑部分。
  3. 等待它上传并给你类似https://user-images.githubusercontent.com/...的URL
  4. 看预览，它只是工作!

例如:

Readme: https://github.com/s8sachin/subtitler/blob/master/README.md

Raw: https://raw.githubusercontent.com/s8sachin/subtitler/master/README.md

注意:

  • 该文件不会存储在您的回购。
  • Webm不适合我，我用mp4代替。
小开

不知道为什么没有人提到这个最简单的方法，直到今天(2022年)。 你可以在Github上的任何地方使用下面的语法，包括像Readme.md

这样的标记文件 
<video src='your URL here' width=180/>

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

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

这适用于mov和mp4视频(已测试)

下面是一个github的评论，它表明这是有效的。

小开

使用以下步骤对我有用(这些都是在我的mac上本地完成的-所以没有必要在在线工具上共享内容):

  • 我在Mac上使用QuickTime Player对我的Android模拟器(手机)进行了屏幕录制，并将其保存在文件recording.mov中

  • 然后从我的终端使用以下命令将.mov转换为.gif(需要ffmpeg, gifsicle安装)

    ffmpeg -i录音。Mov -pix_fmt rgb24 -r 10 -f GIF - | gifsicle ——优化=3——延迟=3 >out.gif < / p >

  • 然后，我很容易就能添加一个视频的gif文件(out.gif)，文件大小不是那么大，到我的README。Md直接在github.com上

小开

现在是2022年8月。看起来Github已经允许直接在自述中嵌入视频了。我发现这个回购，它似乎已经工作了我所需要的。

截屏

自述文件。医学的内容

### 🙅 No Content-Blocking vs. Content-Blocking
https://user-images.githubusercontent.com/16564273/125283630-9845d180-e2e6-11eb-8b7d-f30a8f2eae8a.mp4
小开

这是一个老帖子，但它帮助了我。非常直接-只需从finder mp4文件拖放到Github ReadMe(编辑版)直接。

https://www.geeksforgeeks.org/how-to-add-videos-on-readme-md-file-in-a-github-repository/?id=discuss

小开

最简单的方法应该是:

  1. 打开联机自述文件。医学编辑
  2. 将您的视频文件拖动到显示“通过拖动&下降……“
  3. 您将看到源代码中添加了一个链接。只需用HTML包装它。如。, <video src="https://user-images.githubusercontent.com/aaa.mp4"></video>
小开

如何在1分钟内完成:

  1. 转换。mov到。gif使用在线工具:adobe mov到gif 李Adobe mov到GIF < / >
  2. 拖放。gif到readme.md

提交答案