GitHub README.mdにビデオを埋め込む方法は?


回答:


118

Github Flavored Markdown」は、どのページでもこの種の機能をサポートしていません。

古いサポートスレッド「マークダウンファイルにYouTube動画を埋め込む」には、次のように記載されています。

pages.github.io、はい、他のどこでも、いいえ。

(注:「Githubトップレベルプロジェクトページ」で詳しく説明されているようにgithub.ioは2013年4月以降のユーザーページと組織ページの新しいドメインです。GitHub
ページはこちらに掲載されています

これは、構文の強調表示のような機能要求である可能性があります。

例:「マークダウンのHTML5ビデオ」(2010年8月):

HTML5ビデオをREADME.markdownファイルに実装する方法はありますか?

現在はできませんが、将来的にはREADMEでできることを拡張する予定です。

それまでは、GitHubページとWikiを使用してこれを行うことができます。


ベンジャミンオークスはコメントで確認しています(2012年5月):

サポートリクエストを送信しました。ビデオの埋め込みはサポートされていません。


2
これらのリンクは壊れているようです。彼らは私をgithub.com/contactに連れて行ってくれます。誰かがアーカイブされたバージョンにアクセスできますか?Googleキャッシュまたはウェイバックマシンから取得するのに苦労しています。
ベンジャミンオークス

1
WikiページのHTML5ビデオの価値があるものについては、もはや機能していないようです。
ベンジャミンオークス

サポートリクエストを送信しました。ビデオの埋め込みはサポートされていません。
ベンジャミンオークス

16
私が賛成できるどこかに公の問題がありますか?
2014

2
@hyipscript確かにわかりません:その引用は、5年前のGitHubサポートスレッド(回答のリンクを復元しました)、[Chris Wanstrath-defunkt](github.com/defunkt)、 GitHubの創設者。詳細については知りません。
VonC、2015年

252

VonCの回答に記載されているように、readmeではなくGitHub Pagesで作成されたプロジェクトWebサイトに動画を配置することを強くお勧めします。これらのアイデアのどれよりもはるかに優れています。しかし、私が必要とするような迅速な修正が必要な場合は、いくつかの提案があります。

GIFを使用する

aloisdgの答えを見てください、結果は素晴らしいです、gifはgithubのreadmeにレンダリングされます;)

ビデオプレーヤーの画像を使用する

ビデオを写真付きのreadmeページにあるとユーザーに思わせることができます。それは広告トリックのように聞こえますが、完璧ではありませんが、機能し、面白いです;)。

例:

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

結果:

ビデオを見る

YouTubeのプレビュー画像を使用する

youtubeで生成した画像を動画に使用することもできます。

次の形式のYouTubeのURLの場合:

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)

結果:

ビデオを見る

アスキーネマを使用する

ユースケースがターミナルで実行されるものである場合、asciinemaを使用すると、ターミナルセッションを記録でき、適切なマークダウンの埋め込みが可能です。

共有ボタンを押して、マークダウンスニペットをコピーします。

例:

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

結果:

アスキーキャスト


1
asciicastからgifまたはアニメーションsvg画像を作成するためのクールなツールもあります(例:github.com/marionebl/svg-term-cli);-)
JepZ

100

私はアレクサンドルジャスミンギャブルルーの回答を次のように組み合わせます:

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

デモ:

デモカウントページアルファ

このデモはgithubで見ることができます。

私が使用gifyoutubeを(ffmpegのように、ここでは、私は地元のGIFコンバータを使用することをお勧め方法を見て代わりオンライン1の)。

画面を直接gifで記録するには、ScreenToGifを確認することをお勧めします。


1
私はこれが選ばれた答えであるべきだと思います。これはあなたが得ることができるようにビデオに最も近く、そしてほとんどの人にとってそれビデオです。ビデオとは?静止したフレームが連続して動いていて、再生しているような錯覚を与えます。アニメーションgifも同じです... OPはフラッシュビデオを特に要求しましたが、これは不可能ですが、この方法を使用してフラッシュビデオをアニメーションgifに変換します。
ウェイド

1
あなたは賢い人です。私は今どこでもこれを使用しています。どのURLを選択するか、つまり直接URLを追加することもできます(ただし、share.gifyoutube.comのURLが見つかりませんでした)
Dheeraj Bhaskar

今ではサイトがgifs.com、あなたはからダウンロードしますされていることを注意j.gifs.comし、ダウンロードするために、gifs.comアカウントを持ってする必要があります
イェルーンWiert Pluimers

1
Licecapは、macユーザーにとってscreentogifの良い代替手段です!
J.beenie 2017

26

単純なアニメーションの場合は、アニメーションgifを使用できます。私は1つ使用しています。このREADMEファイルでインスタンスのを。


1
@HarishKayarohanam「Githubがこの機能を導入するまで」一般的に言えば、または彼らはそのようなことに取り組んでいますか?もしそうなら、彼らは今までにそれを終えるべきだったのですか?:)
ポール、

2
@Paulいいえ、数か月前に学んだように、彼らはこれに取り組んでいません...問題をぶつけてください!github.com/github/markup/issues/538
ペトル・ドヴォルザーク

これを行うときは、アクセシビリティを考慮してください。注意が困難な人は、横に動くアニメーションが表示されていると、テキストを取り込むのに苦労することがあります。
Eneroth3

6

@GabLeRouxの答えを拡張するだけです:

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

これにより、GithubリポジトリのREADME.mdファイルでサムネイル画像のサイズを調整できるようになります。


3

これは古い投稿ですが、答えを探していたところ、https//gifs.comを見つけました。ビデオをアップロードするだけで、Githubマークダウンで簡単に追加できるgifが作成されます。私はそれを試しました、gifの品質は良いものです。

弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.