Wie binde ich ein Video in GitHub README.md ein?


Antworten:


118

Der " Github Flavored Markdown " unterstützt diese Art von Funktion für keine Seite:

In einem alten Support-Thread "YouTube-Videos in Markdown-Dateien einbetten" heißt es:

Mit pages.github.io, ja, überall sonst, nein.

(Hinweis: Wie unter " Github Top-Level-Projektseite " beschrieben, ist github.io die neue Domain für Benutzer- und Organisationsseiten seit April 2013.
Die Seite GitHub-Veröffentlichung wird hier vorgestellt. )

Dies könnte eine Funktionsanforderung sein, wie sie die Syntaxhervorhebung war.

Zum Beispiel: " HTML5-Video in Markdown " (August 2010):

Gibt es eine Möglichkeit, ein HTML5-Video in die README.markdownDatei zu implementieren ?

Derzeit nicht, aber wir werden möglicherweise erweitern, was Sie in Zukunft mit den READMEs tun können.

In der Zwischenzeit können Sie dies mit GitHub Pages und unseren Wikis tun.


Benjamin Oakes bestätigt in den Kommentaren (Mai 2012):

Ich habe eine Supportanfrage gesendet. Die Antwort war, dass das Einbetten von Videos nicht unterstützt wird.


2
Diese Verbindungen scheinen unterbrochen zu sein. Sie bringen mich jetzt zu github.com/contact . Hat jemand Zugriff auf eine archivierte Version? Es fällt mir schwer, es aus dem Google Cache oder der Wayback-Maschine herauszuholen.
Benjamin Oakes

1
Für das, was es wert ist, scheint HTML5-Video in Wiki-Seiten nicht mehr zu funktionieren.
Benjamin Oakes

Ich habe eine Supportanfrage gesendet. Die Antwort war, dass das Einbetten von Videos nicht unterstützt wird.
Benjamin Oakes

16
Gibt es irgendwo ein öffentliches Thema, das ich bewerten könnte?
Will

2
@hyipscript Eigentlich nicht sicher: Diese Zitate stammen aus einem 5 Jahre alten GitHub-Support-Thread (ich habe den Link in der Antwort wiederhergestellt), von [Chris Wanstrath - defunkt] ( github.com/defunkt ), einem der Co- Gründer von GitHub. Ich habe keine näheren Angaben dazu.
VonC

252

Ich empfehle dringend, das Video auf einer mit GitHub Pages erstellten Projektwebsite anstelle der Readme- Datei zu platzieren , wie in der Antwort von VonC beschrieben . Es wird viel besser sein als jede dieser Ideen. Wenn Sie jedoch eine schnelle Lösung benötigen, wie ich sie benötigt habe, finden Sie hier einige Vorschläge.

Verwenden Sie ein GIF

Siehe Aloisdgs Antwort , das Ergebnis ist fantastisch, Gifs werden in Githubs Readme gerendert;)

Verwenden Sie ein Video-Player-Bild

Sie könnten den Benutzer dazu verleiten, zu glauben, dass sich das Video auf der Readme-Seite mit einem Bild befindet. Es klingt wie ein Werbetrick, es ist nicht perfekt, aber es funktioniert und es ist lustig;).

Beispiel:

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

Ergebnis:

Schau das Video

Verwenden Sie das Vorschaubild von YouTube

Sie können das von YouTube erzeugte Bild auch für Ihr Video verwenden.

Für YouTube-URLs in Form von:

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

Die Vorschau-URLs haben folgende Form:

https://img.youtube.com/vi/<VIDEO ID>/maxresdefault.jpg
https://img.youtube.com/vi/<VIDEO ID>/hqdefault.jpg

Beispiel:

[![Watch the video](https://img.youtube.com/vi/T-D1KVIuvjA/maxresdefault.jpg)](https://youtu.be/T-D1KVIuvjA)

Ergebnis:

Schau das Video

Verwenden Sie Asciinema

Wenn Ihr Anwendungsfall in einem Terminal ausgeführt wird, können Sie mit asciinema eine Terminalsitzung aufzeichnen und haben eine schöne Markdown-Einbettung.

Klicken Sie auf die Schaltfläche "Teilen" und kopieren Sie das Markdown-Snippet.

Beispiel:

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

Ergebnis:

Asciicast


1
Es gibt auch coole Tools, um ein GIF oder animierte SVG-Bilder von Ihren Asciicasts zu erstellen (z. B. github.com/marionebl/svg-term-cli ) ;-)
JepZ

100

Ich kombiniere die Antworten von Alexandre Jasmin und Gab Le Roux wie folgt:

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

Demo:

Demo CountPages alpha

Sie können diese Demo auf Github sehen .

Ich habe hier gifyoutube verwendet , empfehle jedoch die Verwendung eines lokalen GIF-Konverters (wie ffmpeg, siehe wie ) anstelle eines Online- Konverters .

Um Ihren Bildschirm direkt in GIF aufzunehmen, möchten Sie möglicherweise ScreenToGif überprüfen .


1
Ich denke, das sollte die ausgewählte Antwort sein. Dies ist in der Nähe von einem Video , wie Sie bekommen können, und für die meisten Menschen es ist ein Video. Was ist ein Video? Standbilder, die sich nacheinander bewegen, um uns die Illusion zu geben, die sie spielen. Ein animiertes GIF ist dasselbe ... Obwohl das OP speziell nach Flash-Videos gefragt hat, was unmöglich ist, würden Sie diese Methode verwenden, um das Flash-Video in ein animiertes Gif zu konvertieren.
Wade

1
Sie, mein Herr, sind klug; Ich benutze das jetzt überall. Vielleicht möchten Sie hinzufügen, welche URL zu wählen ist, dh direkte URL (ich konnte jedoch keine share.gifyoutube.com-URL finden)
Dheeraj Bhaskar

Beachten Sie, dass die Website jetzt gifs.com ist, Sie Downloads von j.gifs.com erhalten und dass Sie ein gifs.com-Konto benötigen, um herunterladen zu können
Jeroen Wiert Pluimers

1
Licecap ist eine gute Alternative zu Screentogif für Mac-Benutzer!
J. Beenie

26

Für einfache Animationen können Sie ein animiertes GIF verwenden. Ich verwende zum Beispiel eine in dieser README-Datei .


1
@ HarishKayarohanam "bis Github diese Funktion einbringt" im Allgemeinen oder arbeiten sie an so etwas? Wenn ja, hätten sie es jetzt fertig haben sollen? :)
Paul

2
@Paul Nein, sie arbeiten nicht daran, wie ich vor ein paar Monaten erfahren habe ... Fühlen Sie sich frei, das Problem zu lösen! github.com/github/markup/issues/538
Petr Dvořák

Beachten Sie dabei bitte die Erreichbarkeit. Menschen mit Aufmerksamkeitsschwierigkeiten können Schwierigkeiten haben, Text aufzunehmen, wenn daneben eine bewegende Animation sichtbar ist.
Eneroth3

6

Nur um die Antwort von @ GabLeRoux zu erweitern:

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

Auf diese Weise können Sie die Größe des Miniaturbilds in der Datei README.md auf Ihrem Github-Repo anpassen.


3

Dies ist ein alter Beitrag, aber ich habe nach einer Antwort gesucht und diese gefunden: https://gifs.com . Laden Sie einfach das Video hoch und es wird ein GIF erstellt, das wir einfach in einem Github-Markdown hinzufügen können. Ich habe es versucht, die Qualität des GIF ist gut.

Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.