是否可以使用 C# Markdown 库在 Markdown 中嵌入 Youtube/Vimeo 视频
Posted
技术标签:
【中文标题】是否可以使用 C# Markdown 库在 Markdown 中嵌入 Youtube/Vimeo 视频【英文标题】:Is it possible to embed Youtube/Vimeo videos in Markdown using a C# Markdown library 【发布时间】:2012-12-20 23:47:04 【问题描述】:我正在用 .NET MVC4 编写一个 Web 应用程序,并且想使用 Markdown。我知道有一些开源 C# Markdown 库,但我还没有找到一个明显支持在 Markdown 文本中嵌入 youtube 或 Vimeo 视频的库。
有人知道这是否可能吗?
【问题讨论】:
markdown-youtube 在 JS 和 php 中。我认为你可以在 C# 中轻松地做这样的事情。 【参考方案1】:使用标准 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 "Video Title")
Markdown 的解释
如果这个markdown sn-p看起来很复杂,把它分成两部分:
一张图片![image alt text](http//example.io/link-to-image)
包含在链接中[link text](http//example.io/my-link "link title")
使用有效 Markdown 和 YouTube 缩略图的示例:
我们从 YouTube 直接获取 缩略图 图片并链接到实际视频,因此当用户点击图片/缩略图时,他们将被带到视频中。
代码:
[![Everything Is AWESOME](https://img.youtube.com/vi/StTqXEQ2l-Y/0.jpg)](https://www.youtube.com/watch?v=StTqXEQ2l-Y "Everything Is AWESOME")
OR如果你想给读者一个视觉提示,图像/缩略图实际上是一个可播放视频,在 YouTube 中为视频截取自己的屏幕截图并将其用作缩略图。
使用带有视频控件的屏幕截图作为视觉提示的示例:
代码:
[![Everything Is AWESOME](http://i.imgur.com/Ot5DWAW.png)](https://youtu.be/StTqXEQ2l-Y?t=35s "Everything Is AWESOME")
明显优势
虽然这需要几个额外的步骤 (a)截取视频的屏幕截图并 (b)上传 因此您可以将图像用作缩略图,它确实具有 3 清晰 优点:
-
阅读您的 markdown(或生成的 html 页面)的人有一个视觉提示,告诉他们可以观看视频(视频控件鼓励点击)
您可以选择视频中的特定帧用作缩略图(从而使您的内容更具吸引力)
您可以链接到视频中的特定时间,当点击链接的图像时,视频将从该时间开始播放。 (在我们的例子中是 35 秒)
截屏需要几秒钟的时间,每个操作系统都有键盘快捷键,可将截屏复制到剪贴板,这意味着您可以粘贴它以加快上传速度。
不只有 C#
而且由于这是 100% 标准 降价,它适用于任何地方(不仅适用于 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!")
注意事项:
如何截屏:http://www.take-a-screenshot.org/(所有平台!) 上传缩略图:截取屏幕截图后,您可以将其拖放到imgur.com以上传并立即使用作为您的缩略图; 再简单不过了! YouTube 缩略图信息:How do I get a YouTube video thumbnail from the YouTube API? Markdown 格式借用/修改/扩展自:Embed a YouTube video【讨论】:
感谢您的回答。将测试出来。很有帮助。 这是一个巧妙的解决方案。简单并完成工作。当我第一次阅读它时,它甚至让我发笑。干得好。【参考方案2】:您可以使用inline HTML 嵌入您的视频。
# this is a *markdown* document
<iframe title="YouTube video player" src="http://www.youtube.com/watch?v=TheVideoID?autoplay=1" frameborder="0" allowfullscreen></iframe>
with a **youtube** video embedded
【讨论】:
啊,我的错误 - url 必须是 youtube.com/v/theVideoID?html5=1 ... 或者更确切地说,使用 API,而不是带有 watch 参数的网站 非常好,但使用该 iframe 会破坏同源策略。这篇文章有解决这个问题的方法。 ***.com/questions/20498831/… 我相信这是理想的正确答案,因为正如您所指出的,Markdown 一直允许 HTML 文字。获取 YouTube 提供的“嵌入”sn-p(当前位于视频下方的“分享”选项中)。 sn-p 在您的示例中使用<iframe>
,但也有一个“嵌入”URL,它可以改进嵌入的视觉和可用性。当然,这假设您的 Markdown 渲染器允许 HTML 文字。【参考方案3】:
<iframe src="https://www.youtube.com/embed/-mUJnKI3ipI" frameborder="0" allowfullscreen></iframe>
【讨论】:
【参考方案4】:Markdown 不会让你嵌入视频,基本上这里发布的答案是解释有一个图片链接,这显然不是嵌入的意思。因此,您是否可以嵌入视频的答案是“不,您不能”。
【讨论】:
【参考方案5】:嵌入图像的语法如何,应用于其他媒体?
![MyImage](https://example.com/image.png)
Oembed 让嵌入变得更简单很有趣:用户只需粘贴 URL 而不是 iframe 代码。 对于视频,它可能是
![MyVideo](http://www.youtube.com/watch?v=TheVideoID)
【讨论】:
这不起作用。您可以执行类似的操作,通过其中一个图像预览链接到视频:[![Video Label](http://img.youtube.com/vi/TheVideoID/0.jpg)](http://www.youtube.com/watch?v=TheVideoID)
以上是关于是否可以使用 C# Markdown 库在 Markdown 中嵌入 Youtube/Vimeo 视频的主要内容,如果未能解决你的问题,请参考以下文章
如何使用 C# 中的 Emgu CV 库在图像上绘制矩形。举个例子