65

.NET MVC4 で Web アプリを作成していて、Markdown を使用したいと考えています。オープン ソースの C# Markdown ライブラリがいくつかあることは理解していますが、YouTube や Vimeo のビデオを Markdown テキスト内に埋め込むことを明らかにサポートするものは見つかりませんでした。

それが可能かどうか誰かが知っていますか？

4

6 に答える 6

128

標準Markdownを使用したソリューション（iFrameではありません！）

iframe を使用することは「明らかな」解決策ではありません...特に、使用している Markdown パーサー (またはパブリッシング プラットフォーム) が別の Web サイトからのコンテンツのインライン化をサポートしていない場合は...代わりに、有効なリンクを含めることで「偽造」することができます-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")

マークダウンの説明

このマークダウン スニペットが複雑に見える場合は、2 つの部分に分けてください。


![image alt text](http//example.io/link-to-image)
リンクに包まれた画像
[link text](http//example.io/my-link "link title")

有効なマークダウンと 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")

または、画像/サムネイルが実際に再生可能なビデオであることを読者に視覚的に示したい場合は、YouTube でビデオのスクリーンショットを撮り、それを代わりにサムネイルとして使用します。

ビデオ コントロールを含むスクリーンショットをビジュアル キューとして使用する例:

すべてが素晴らしい

コード：

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

 明確な利点

これには、( a )ビデオのスクリーンショットを撮り、 ( b )画像をサムネイルとして使用できるようにアップロードするという追加の手順が必要ですが、 3 つの明確な利点があります。

  1. マークダウン (または結果の html ページ) を読んでいる人には、ビデオを見ることができるという視覚的な合図があります (ビデオ コントロールはクリックを促します) 。
  2. 動画内の特定のフレームを選択してサムネイルとして使用できます (これにより、コンテンツがより魅力的になります) 。
  3. リンクされた画像をクリックすると再生が開始される動画の特定の時間にリンクできます。(私たちの場合は 35 秒から)

スクリーンショットの撮影には数秒かかります。各 OS には、スクリーンショットをクリップボードにコピーするためのキーボード ショートカットがあります。

だけでなく C#

そして、これは100% 標準のマークダウンなので、どこでも機能します(パーサーだけでなくC#! ) ... GitHub、Redit、または Ghost で試してみてください!

ヴィメオ

このアプローチは Vimeo ビデオでも機能します

例

赤ずきんちゃん

コード

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

ノート：

于 2015-04-25T08:06:48.307 に答える
26

インライン 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
于 2013-01-11T11:06:07.353 に答える
-6

他のメディアに適用される埋め込み画像の構文はどうですか?

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

Oembed は、埋め込みを簡単にする興味深いものです。ユーザーは、iframe コードの代わりに URL を貼り付けるだけで済みます。ビデオの場合、

![MyVideo](http://www.youtube.com/watch?v=TheVideoID)
于 2014-02-03T09:15:53.993 に答える