logo标签列表

使用C# Markdown库是否可以在Markdown中嵌入Youtube/Vimeo视频？

c#asp.net-mvc-4youtubemarkdown
68

我正在使用.NET MVC4编写Web应用程序，并希望使用Markdown。我了解到有一些开源的C# Markdown库，但是我没有找到一个明显支持在Markdown文本中嵌入YouTube或Vimeo视频的库。

有人知道是否可能吗？

markdown-youtube 是用 JS 和 PHP 编写的。我认为你可以很容易地在 C# 中做类似的事情。 - Hasib Mahmud
6个回答
136

使用 标准 Markdown（不是 iFrame！）的解决方案

使用 iframe 不是“显而易见”的解决方案... 特别是如果您使用的 Markdown 解析器（或发布平台）不支持内联来自不同网站的内容 ... 相反，您可以通过在 Markdown 文件中包含一个有效的链接图像 来“模拟”，并使用以下格式:

[![IMAGE ALT TEXT](http://img.youtube.com/vi/YOUTUBE_VIDEO_ID_HERE/0.jpg)](http://www.youtube.com/watch?v=YOUTUBE_VIDEO_ID_HERE "视频标题")

Markdown 的说明

如果这个 Markdown 片段看起来很复杂，请将其分解为两个部分:

一个图像
！[图像替代文本]（http//example.io/link-to-image）
包装在一个链接中
[链接文本]（http//example.io/my-link "链接标题"）

使用有效的 Markdown 和 YouTube 缩略图的示例:

Everything Is AWESOME

我们直接从 YouTube 获取缩略图图像，并链接到实际的视频，因此当用户单击图像/缩略图时，他们将进入视频。

代码:

[![Everything Is AWESOME](https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")

或者 如果您想给读者一个视觉提示，表明图像/缩略图实际上是可播放的视频，则可以在 YouTube 中自己截取视频的屏幕截图，并将其用作缩略图。

使用带有视频控件的屏幕截图作为视觉提示的示例:

Everything Is AWESOME

代码:

[![Everything Is AWESOME](http://i.imgur.com/Ot5DWAW.png)](https://youtu.be/StTqXEQ2l-Y?t=35s "Everything Is AWESOME")

明显的优势

虽然这需要额外的一些步骤（a）截取视频截图和（b）上传它，以便您可以将图像用作缩略图，但它确实具有3个明显的优点：
  1. 阅读您的markdown（或生成的html页面）的人有一个视觉提示，告诉他们他们可以观看视频（视频控件鼓励点击）
  2. 您可以选择在视频中使用的特定帧作为缩略图（从而使您的内容更加吸引人）
  3. 您可以从链接图像被单击时播放开始的视频中的特定时间进行链接。 （在我们的例子中从35秒开始）
截屏只需几秒钟，每个操作系统都有键盘快捷键可将截屏复制到剪贴板，这意味着您可以更快地上传。

不仅仅是C#

由于这是100％标准的markdown，因此它适用于任何地方（不仅仅是C#解析器！）...在GitHub，Redit或Ghost上尝试一下！

Vimeo

此方法也适用于Vimeo视频

示例

小红帽

代码

[![Little red ridning hood](http://i.imgur.com/7YTMFQp.png)](https://vimeo.com/3514904 "Little red riding hood - Click to Watch!")

注意事项:

1
谢谢你的回答。我会试一下。非常有帮助。 - Matt
1
这是一个巧妙的解决方案。简单且能够胜任工作。当我第一次看到它时，甚至让我笑出声来。干得好。 - Kevin Workman
29

您可以使用内联HTML来嵌入您的视频。


# this is a *markdown* document

<iframe  title="YouTube video player" width="480" height="390" src="http://www.youtube.com/watch?v=TheVideoID?autoplay=1" frameborder="0" allowfullscreen></iframe>

with a **youtube** video embedded
啊，我的错误 - URL 必须是 http://www.youtube.com/v/theVideoID?html5=1 ... 或者更好的方法是使用 API，而不是带有 watch 参数的网站。 - Robert Achmann
非常好，但使用iframe会破坏同源策略。这篇文章提供了解决方案。https://dev59.com/TWIj5IYBdhLWcg3wNyv1 - Eat at Joes
我认为这是理想的正确答案，因为正如你所指出的那样，Markdown一直允许HTML字面量。获取YouTube友好提供的“嵌入”片段（当前在视频下方的“共享”选项中）。该片段使用了一个<iframe>，就像你的示例一样，但还有一个“嵌入”URL，可以使嵌入的可视化和可用性得到改善。当然，这假设您的Markdown渲染器允许 HTML字面量。 - DaveGauer
2
<iframe width="560" height="315" src="https://www.youtube.com/embed/-mUJnKI3ipI" frameborder="0" allowfullscreen></iframe>
2

Markdown不支持嵌入视频，基本上这里发布的答案都是解释如何使用图像链接，这显然不是嵌入的意思。因此，对于是否可以嵌入视频的问题的答案是“不行，你不能”。

0

你应该能够使用HTML5的<video>元素。如果不行，请有人告诉我。

（刚刚发现这个问题，虽然已经晚了很多年 :-) ，因为我想要将视频支持添加到我的md2pptx Markdown到PowerPoint开源工具中。）

-6

嵌入图像的语法适用于其他媒体吗？

![MyImage](https://example.com/image.png)

Oembed 很有趣，可以使嵌入更加简便：用户只需粘贴 URL，而不是 iframe 代码。 对于视频，它可以是

![MyVideo](http://www.youtube.com/watch?v=TheVideoID)
2
这不起作用。您可以执行类似的操作，使用其中一个图像预览链接到视频：[！[视频标签]（http://img.youtube.com/vi/TheVideoID/0.jpg）]（http：//www.youtube.com/watch?v=TheVideoID） - accidental_PhD
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接