408 Stimmen

Wie man ein Video in GitHub README.md einbettet?

Ist es möglich, ein Flash-Video in README.md auf GitHub einzubetten? Es wird nicht angezeigt: https://github.com/mattdipasquale/PicSciP

350voto

GabLeRoux Punkte 14712

Fügen Sie eine URL zur Videodatei in Ihrem ReadMe hinzu.

Github unterstützt jetzt Videos, siehe ausführlichere Antwort hier: https://stackoverflow.com/a/4279746/1092815

Sie können hier ein Live-Beispiel sehen (Am Ende des Readme-Dokuments):
https://github.com/alelievr/Mixture/blob/0.4.0/README.md

Github Pages

Ich empfehle dringend, das Video auf einer Projektwebsite zu platzieren, die mit GitHub Pages erstellt wurde, anstatt im Readme, wie in VonC's Antwort beschrieben; es wird viel besser sein als alle diese Ideen. Aber wenn Sie eine schnelle Lösung benötigen, genau wie ich, hier sind einige Vorschläge.

Verwenden Sie ein GIF

Sehen Sie sich aloisdg's Antwort an, das Ergebnis ist fantastisch, GIFs werden im Readme von GitHub gerendert ;)

Verwenden Sie ein Bild des Videoplayers

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

Beispiel:

[![Video ansehen](https://i.imgur.com/vKb2F1B.png)](https://youtu.be/vt5fpE0bzSY)

Ergebnis:

Video ansehen

Verwenden Sie das Vorschaubild von Youtube

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

Für YouTube-URLs in folgender Form:

https://www.youtube.com/watch?v=
https://youtu.be/

Die Vorschaubild-URLs haben folgende Form:

https://img.youtube.com/vi//maxresdefault.jpg
https://img.youtube.com/vi//hqdefault.jpg

Beispiel:

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

Ergebnis:

Video ansehen

Verwenden Sie asciinema

Wenn Ihr Anwendungsfall etwas ist, das in einem Terminal läuft, ermöglicht Ihnen asciinema die Aufzeichnung einer Terminalsession und hat eine schöne Markdown-Einbettung.

Dann klicken Sie auf die Teilen-Schaltfläche und kopieren Sie den Markdown-Schnipsel.

Beispiel:

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

Ergebnis:

asciicast

4 Stimmen

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

0 Stimmen

Kann ich überhaupt Videos hochladen, die sich auf meinem Laufwerk befinden?

0 Stimmen

Scheint nur bestimmte URL-Adressen für Videos erlaubt zu sein, z. B.: URL-Adresse verweist auf den Inhalt Ihres Repositorys / URL-Adresse beginnt mit https://user-images.githubusercontent.com. Und es muss nur eine Zeile mit der URL-Adresse sein, keine andere Syntax darum. (Die Verwendung von HTML-Code bewirkt nichts.) Andernfalls wird es einfach ignoriert.

264voto

VonC Punkte 1117238

Aktualisierung Mai 2021:

Video-Uploads jetzt allgemein verfügbar

Video-Upload wird jetzt überall unterstützt, wo du Markdown bei GitHub erstellen kannst, einschließlich der mobilen App.

Teile Demos, zeige Reproduktionsschritte und mehr in Kommentaren zu Problemen, Pull-Anfragen und Diskussionen sowie in Markdown-Dateien im Repository wie READMEs.

Wie Lauren Brose ( Produktmanagerin für GitHub-Probleme) erklärt, kann dies helfen:

  • Einem Instandhalter bei der Reproduktion eines Fehlers helfen
  • Den Reviewern Kontext zu Pull-Anfragen bieten
  • Zeigen, wie sich eine Funktion entwickeln könnte
  • Lade dein Video von überall hoch! (Das Hochladen von Videos von den iOS- und Android-GitHub-Apps steht allen Benutzern jetzt zur Verfügung)

Hinweis: wie kommentiert von Sancarn, webm (open web media project) scheint nicht direkt unterstützt zu werden.
Obwohl... wie von Garrett LeSage bemerkt:

Wenn du die Erweiterung von .webm in .mov änderst (oder einfach .mov nach .webm anfügst), akzeptiert @GitHub das Video und zeigt es sogar inline an.

Matthew Gregg fügt hinzu:

Spielt webm auf iOS-Geräten ab? Dies könnte der Grund sein, warum sie es blockieren.


Aktualisierung Feb. 2021, wie von Abhishek Singh in den Kommentaren und von Nat Friedman auf Twitter festgestellt:

Du kannst jetzt endlich Bilder und Videos (mp4, gif) in den Markdown-Dateieditor auf GitHub ziehen und ablegen.

Bild und Video

Einfügen funktioniert auch, wenn du das bevorzugst.
Es hat schon eine Weile in Problemen und Pull-Anfragen funktioniert; neu ist hier die Unterstützung in Markdown-Dateien.

GitHub Enterprise Server hinkt http://github.com um einige Monate hinterher, wird aber in einer zukünftigen Version dort landen.

Kyle Daigle (Senior Director of Special Projects bei GitHub) fügt hinzu:

Aktuell wird die Datei als Asset außerhalb des Repositorys gespeichert (ähnlich wie ein Bild, das auf ein Bild hochgeladen wurde).
(Hochgeladen auf githubusercontent und dort gespeichert. Dann wird ein Link im Markdown zu diesem hochgeladenen Bild erstellt.)

Das Team interessiert sich dafür, das Bild auch im Repository hinzuzufügen... würdest du so etwas wollen?

Sven-Michael Stübe kommentiert:

Normalerweise füge ich die Bilder zu meinem Repository hinzu. Besonders wenn du dein Blog als GitHub-Seite mit einer benutzerdefinierten Domain hostest.

Aber ich denke, diese Funktion würde auch eine Menge Komplexität hinzufügen. Es ist nicht sehr aufwändig, das Bild manuell hinzuzufügen. Für Pull-Anfragen und Kommentare ist das Drag & Drop jedoch wichtiger.

Kyle antwortet:

Für den Blog-Fall (das ist das, was uns an das Hochladen von Bildern ins Repository denken ließ) hast du völlig recht.
Dieser Drag-and-Drop-Vorgang ist hilfreich, wenn du ein Bild zu einer README oder anderer im Repo befindlicher Dokumentation hinzufügen möchtest (wenn du es nicht ins Repo hochladen möchtest).

Diese Funktion hat seit ihrem anfänglichen Vorschlag... zurück im Jahr 2012(!) einen langen Weg zurückgelegt


Aktualisierung Dez. 2020: siehe "Öffentliche Beta für Video-Upload", bei der das Video eingebettet wird (nur Einbettung, kein Link/Verweis)

https://i0.wp.com/user-images.githubusercontent.com/22751162/101841526-ebf6ff00-3afa-11eb-965d-5ce11efdb9f8.png?ssl=1


2010: Das "Github Flavored Markdown" unterstützt diese Art von Funktion nicht für jede Seite:

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

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

(Hinweis: wie im Artikel "Github Top-Level Project Page" ausführlich beschrieben, ist github.io die neue Domäne für Benutzer- und Organisationsseiten seit April 2013.
Die Veröffentlichung von GitHub-Seiten wird hier präsentiert)

Dies könnte eine Funktionsanfrage sein, ähnlich wie die Syntaxhervorhebung.

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

Gibt es eine Möglichkeit, ein HTML5-Video in die README.markdown-Datei einzufügen?

Derzeit nicht, aber wir könnten in Zukunft erweitern, was du mit den READMEs machen kannst.

In der Zwischenzeit kannst du dies mit GitHub Pages und unseren Wikis tun.


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

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

4 Stimmen

Diese Links scheinen defekt zu sein; sie führen mich jetzt zu github.com/contact. Hat jemand Zugriff auf eine archivierte Version? Es fällt mir schwer, diese aus dem Google Cache oder der Wayback Machine zu bekommen.

2 Stimmen

Für was es wert ist, funktioniert HTML5-Video in Wiki-Seiten nicht mehr.

0 Stimmen

Ich habe eine Support-Anfrage geschickt. Die Antwort war, dass das Einbetten von Videos nicht unterstützt wird.

138voto

aloisdg Punkte 18811

Ich kombiniere die Antworten von Alexandre Jasmin und Gab Le Roux auf diese Weise:

[![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, aber ich empfehle die Verwendung eines lokalen GIF-Konverters (wie ffmpeg, so geht's) anstelle eines Online-Konverters.

Um Ihren Bildschirm direkt als GIF aufzuzeichnen, sollten Sie sich ScreenToGif ansehen.

3 Stimmen

Ich denke, dass dies die ausgewählte Antwort sein sollte. Dies ist am ehesten wie ein Video, und für die meisten Menschen ist es ein Video. Was ist ein Video? Standbilder, die sich in Sequenz bewegen, um uns die Illusion zu geben, dass es abgespielt wird. Ein animiertes GIF ist dasselbe... Obwohl der OP speziell nach einem Flash-Video gefragt hat, was unmöglich ist, würde man diese Methode verwenden, um das Flash-Video in ein animiertes GIF umzuwandeln.

2 Stimmen

Du, Herr, bist ein Kluger; ich benutze das jetzt überall. Vielleicht möchten Sie hinzufügen, welche URL Sie wählen möchten, d.h. direkt URL (allerdings konnte ich keine share.gifyoutube.com URL finden)

0 Stimmen

Beachten Sie, dass die Website jetzt gifs.com ist, Sie Downloads von j.gifs.com erhalten und ein gifs.com-Konto benötigen, um herunterzuladen.

40voto

Mahesh Jamdade Punkte 11281

Nicht sicher, warum niemand diese einfachste Methode erwähnt hat, die heute funktioniert (2022). Sie können die folgende Syntax überall auf Github verwenden, einschließlich Markdown-Dateien wie Readme.md

Wenn Sie zwei Videos nebeneinander anzeigen möchten

caption1 | caption2
:-: | :-:
 | 

Dies funktioniert für mov und mp4 Videos (getestet)

Hier ist ein Github-Kommentar, der zeigt, dass dies funktioniert.

16 Stimmen

Funktioniert anscheinend nicht innerhalb von Github Readme.md, mit Vimeo-Videos im Moment. Unterbricht auch alle nachfolgenden Markdown nach dem Video-Tag.

0 Stimmen

Ohh ich sehe, in welchem Format das Video ist. Ist es möglich, dass Sie den Link zum Beispielvideo teilen, um es zu überifizieren?

0 Stimmen

Es ist dieser: vimeo.com/625432715 hoffentlich habe ich einfach etwas falsch gemacht!

28voto

Alex Jasmin Punkte 38232

Für einfache Animationen können Sie ein animiertes Gif verwenden. Ich benutze eines in dieser README-Datei zum Beispiel.

1 Stimmen

@HarishKayarohanam "bis Github diese Funktion einführt" im Allgemeinen oder haben sie daran gearbeitet? Wenn ja, hätten sie es bis jetzt fertiggestellt? :)

2 Stimmen

@Paul Nein, sie arbeiten nicht daran, wie ich vor ein paar Monaten erfahren habe... Fühle dich frei, das Problem anzustoßen! github.com/github/markup/issues/538

0 Stimmen

Wenn Sie dies tun, beachten Sie bitte die Zugänglichkeit. Menschen mit Aufmerksamkeitsschwierigkeiten können Schwierigkeiten haben, Text aufzunehmen, wenn eine bewegte Animation daneben sichtbar ist.

CodeJaeger.com

CodeJaeger ist eine Gemeinschaft für Programmierer, die täglich Hilfe erhalten..
Wir haben viele Inhalte, und Sie können auch Ihre eigenen Fragen stellen oder die Fragen anderer Leute lösen.

Powered by:

X