Videos einbetten leicht gemacht




Wie formatiere ich Texte und bette Bilder und Videos ein?

Videos einbetten leicht gemacht

Beitragvon almafan » Do 21. Jun 2012, 13:59

Ich habe so etwas zwar schon unter "Wichtig" stehen, aber anscheinend schaut dort niemand nach, wenn er Fragen hat oder es ist - aus welchen Gründen auch immer - noch nicht verständlich genug. Ich versuche hier also nochmals Schritt für Schritt zu erläutern, wie man YouTube-Videos in diesem Forum einbettet. So idiotensicher, wie ich nur kann. Das soll nicht bedeuten, das jemand der es dann immernoch nicht versteht, ein Trottel ist - oder namengebend eben ein Idiot. Sondern, dass ich es vermutlich immernoch nicht geschafft habe, es auf einfachste Weise zu erklären. Ich versuche mich jetzt trotzdem daran:

In meiner ersten Beschreibung beschränke ich mich allein auf YouTube, da dies das größte Videoportal ist und die Wahrscheinlich daher hoch ist, dass ihr ein Video von dort einbetten und verlinken wollt. Wollt ihr ein anderes Videoportal erklärt bekommen, so schreibt dies direkt unter diesem Eintrag. Mir würde es auch gefallen, wenn ihr einen Kommentar dazu abgeben könntet, ob ihr mich hier verstanden habt.


YouTube-Videos einbetten


1.Schritt: Welches Video?
Zu allererst benötigt ihr ein Video. Das sollte nicht das Problem darstellen. YouTube ist ja gleich um die Ecke und ihr habt sicher schon eines zur Hand, sonst bräuchtet ihr nicht die Erklärung lesen.
Ihr benötigt nicht den Einbettungscode den euch YouTube vorschlägt, wenn ihr dort auf "Teilen" und dann auf "Einbetten" geht. Weder den "iframe"-Code noch den "embed"-Code. Da ich nämlich HTML im Forum deaktiviert habe, würden diese Codes auch nicht funktionieren. Das ist eine Sicherheitsmaßnahme, sonst könnte man im Forum wesentlich mehr Schindluder treiben, als möglicherweise ohnehin schon. Die von YouTube gebotenen Quellcodes sind also völlig nutzlos.
Bitte nicht weinen. Ich verrate ja, wie es trotzdem geht.


2.Schritt: Uniform Resource Locator?
Kurz URL. Damit beschreibt man im Internet einen eindeutigen Quellanzeiger. Jede URL führt zu einem anderen Ziel und ist somit eindeutig. Und damit zurück aus der Exkursion für Internetlaien, hinein in unser spezielles Problem.
Ihr kopiert die URL des Videos. Die findet ihr in der Adressleiste. Das ist diese kryptische Zeichenkolonne. Ihr fügt dieses für euch sicher nicht nachvollziehbare Wirrwarr in das Textfeld eures Beitrages. Und bitte keine Fragen, wie man denn einen neuen Beitrag erstellt.
Möglicherweise sieht euer Code so oder so ähnlich aus.
Code: Alles auswählen
http://www.youtube.com/watch?v=1cJbU-w2sec&feature=g-logo&context=G2a85901FOAAAAAAABAA

Da sind mehr Informationen drin, als wir brauchen. Wichtig für uns ist nur die Zeichenkette nach "v=" bis zum ersten "&". Wir benötigen nicht mehr. In diesem Falle ist es die Zeichenkette "1cJbU-w2sec".


3.Schritt: Und wie wird daraus ein Video?
Wir klicken nun auf ein freien Platz im Textfenster. Halt dorthin, wo das Video später erscheinen soll. Dort fügen wir die Zeichenkette (im Beispiel "1cJbU-w2sec") ein. Diese Zeichenkette markieren wir und drücken anschließend auf den Button "youtube" über dem Textfeld. Nun sollte dort folgendes stehen.
Code: Alles auswählen
[youtube]1cJbU-w2sec[/youtube]


4.Schritt: Wieso zeigt er nichts in der Vorschau an?
Bisher haben wir dem Beitrag vermittelt, welches Video er zeigen soll, nicht aber in welcher Auflösung, also welcher Breite und Höhe. Somit arbeitet er in der Vorschau mit "Nulllängen" und die sind bekanntlich recht kurz und fürs Auge schwer zu erfassen. Eine Analogie: Wenn eine Schale null Äpfel enthält, sieht man die Äpfel folglich nicht. Sie hat also eine Menge an Äpfeln. Diese Menge ist aber so klein, dass wir sie nicht sehen können. So ist es bisher auch mit dem Video. Es hat bereits eine Breite und eine Höhe. Die sind aber derzeit beide bei Null. Ein Video das null Breite und null Höhe hat, ist zwar da, aber ohne gute Brille schwer auszumachen.

Wir gehen nun hinter das letzte Zeichen in der ersten eckigen Klammer, also hinter das Wort "youtube" der ersten Klammer. Dort geben wir ein Freizeichen ein. Vergewissert euch, dass es noch innerhalb der Klammer ist. Darauf folgt eine dreistellige Zahl, die die Breite angibt. Darauf folgt ein weiteres Freizeichen und dann eine dreistellige Zahl, die die Höhe angibt. Alles noch immer in der Klammer.

Wenn ihr nicht wisst, welche Zahl ihr nehmen sollt. So haltet euch an Standarts.
Höhe .. Breite
320 .... 240 (4:3-Format)
480 .... 360 (4:3-Format)
500 .... 315 (16:10-Format, nehme ich meist)
560 .... 315 (16:9-Format, derzeitiger Standart beim YouTube-Player auf der YouTube-Seite)
640 .... 480 (4:3-Format)
Es ist eigentlich ziemlich egal. Das Video skaliert sich automatisch auf die festgelegte Größe. Ist zum Beispiel das Video im Verhältnis 16:9 und ihr habt euch für ein 4:3-Format in der Klammer entschieden, dann werden im eingebetteten Video einfach Balken oben und unten angezeigt. Umgekehrt sind die Balken links und rechts. Das Video läuft deswegen trotzdem ohne Mucken.
Der Quellcode sieht nun ungefähr folgendermaßen aus. Je nachdem, welche Breite, Höhe und welche Zeichenkolonne ihr verwendet, unterscheidet sie sich natürlich.
Code: Alles auswählen
[youtube 560 315]1cJbU-w2sec[/youtube]

In der Vorschau ergibt das bereits ein Videofenster mit eingebautem Video.


5.Schritt: Was machen wir mit der URL?
Nun haben wir also Video eingebettet und es sollte jetzt auch sichtbar sein. Aber auch die URL ist noch wichtig. Manchmal spinnt ein eingebettetes Video. Also in diesem Forum ist mir das noch nie passiert. Aber es kann ja mal sein. Vielleicht stellt YouTube auch die Codes für das Einbetten um und so ist das Video nicht korrekt sichtbar, bis ich den Code im Administrationsbereich angepasst habe. Das heißt dann aber nicht, das jeder seine Videos neu einbetten muss. Wenn der Code im Administrationsbereich angepasst wurde, funktionieren alle damit arbeitenden Videos automatisch.

Zurück zu unserer URL. Die liegt jetzt noch so rum, wie bestellt und nicht abgeholt. Wir könnten sie nun stehen lassen und mit dem URL-Tag, über dem Textfeld zu finden, "einrahmen". Einfach die Internetadresse des Videos markieren und den URL-Button drücken. Fertig.
Wir könnten aber auch den Link etwas kürzen. Bisher sieht er ja noch so aus:
Code: Alles auswählen
http://www.youtube.com/watch?v=1cJbU-w2sec&feature=g-logo&context=G2a85901FOAAAAAAABAA

Wir brauchen aber weder Informationen über das derzeitige Google-Logo, noch Context-Infos. Generell kann alles entfernt werden, was nichts mit dem Video selbst zu tun hat. Wir brauchen daher nur zwei Dinge:
Code: Alles auswählen
http://www.youtube.com/watch?

und
Code: Alles auswählen
v=1cJbU-w2sec

Sobald in der URL "v=" irgendwo steht - und es ist nicht immer direkt hinter "watch" im Link zu finden - könnt ihr sicher sein, dass die nachfolgende wirre Zeichenkolonne bis zum nächsten "&" die Video-ID darstellt. In unserem Fall wäre also
Code: Alles auswählen
http://www.youtube.com/watch?v=1cJbU-w2sec

völlig ausreichend. Mehr Informationen braucht der Link nicht und er wird trotz der fehlenden Features, die oben noch im Link sind, alles tadellos auf YouTube anzeigen.


Ich hoffe, dass diese Erklärung einfach genug war, um sie auch als absoluter Laie zu verstehen. Wenn ihr trotzdem Fragen habt, dann stellt diese gleich hier drunter.


Ist das kompliziert!
Vielleicht wird sich das der ein oder andere in Anbetracht eines Fünf-Schritte-Plans zum Einbetten denken. Es gibt aber eben genug Forenmitglieder mit unzureichenden oder völlig fehlenden HTML- & BBCode-Kenntnissen. Und deshalb habe ich versucht, den Quellcode so einfach wie möglich zu halten. Einige werden mir das nicht glauben und schreiben wollen: "Wir müssen ja trotzdem so viel eingeben, damit ein Video endlich angezeigt wird." Aber was ist denn schon weiter zu tun, als die Video-ID zwischen die youtube-Klammern zu setzen und die Anzeigegröße zu erstellen? Rein objektiv betrachtet.
Wölltet ihr wirklich ein Video über HTML einfügen? Ich denke kaum. Oder blickt hier einer von euch durch?:
Code: Alles auswählen
<object><embed src="http://www.youtube.com/v/{IDENTIFIER}?version=3&amp;hl=de_DE" type="application/x-shockwave-flash" width="{NUMBER1}" height="{NUMBER2}" allowscriptaccess="always" allowfullscreen="true"></embed></object>

Ein paar Sachen könntet ihr sicher mit euren Englischkenntnissen übersetzen. Aber ihre Funktion im Code wäre euch nach wie vor ein Rätsel. Und der Code sieht natürlich gleich viel einfacher aus (Der Satz kann Spuren von Sarkasmus enthalten und ist nicht für Sarkamusallergiger geeignet.)

Ich alter Illuminat verschleier euch all diesen Code. Ich übler Schuft. Ihr bekommt nur das hier zu sehen:
Code: Alles auswählen
[youtube {NUMBER1} {NUMBER2}]{IDENTIFIER}[/youtube]

Und da sind drei Werte auch noch von Hand einzutragen.
NUMBER1 steht für die Breite, NUMBER2 für die Höhe und IDENTIFIER für die Video-ID. Die geschweiften Klammern entfallen. Sie dienen lediglich dem Programm, dass aus euren Textboxen auf wundersame Weise einen Foreneintrag zaubert, dazu, zwischen Tag (ausgesprochen "Teck", eckige Klammern) und den Variablen (geschweifte Klammern) zu unterscheiden.
Aber ich habe euch damit eigentlich die Sache stark vereinfacht. Die ganzen fünf Schritte hier nocheinmal zusammengefasst.
  1. Ihr kopiert die VideoURL.
  2. Ihr nehmt davon die Video-ID.
  3. Ihr markiert diese und klickt auf den Button "youtube".
  4. Ihr geht in die vorderte eckige Klammer hinter das Wort YouTube.
  5. Ihr tragt dort, mit Freizeichen getrennt, Breite und Höhe ein.
Fertig.
Bild
Wir erschießen Wildtiere, weil diese sich unkontrolliert vermehren, wenn keine Raubtiere da sind und die Wälder schädigen. Und wenn sich Wölfe wieder ansiedeln, erschießen wir die auch, weil sie sonst andere Tiere fressen. Klingt nach einem super Marketingkonzept für Munitionshersteller, aber nicht wirklich durchdacht.
Bild
Benutzeravatar
almafan
König
König
 
Beiträge: 1197
Registriert: Mo 21. Mär 2011, 20:11

von Anzeige » Do 21. Jun 2012, 13:59

Anzeige
 

Re: Videos einbetten leicht gemacht

Beitragvon almafan » Sa 2. Dez 2017, 00:40

Eigentlich recht analog dazu sind alle anderen bisher unterstützten Videoportale zu behandeln.

Vorweg: Wie bei der YouTube-Einbettung auch, stehen {NUMBER1} und {NUMBER2} immer für die Breite und Höhe des Videoplayers. Ihr gebt darin als dreistellige Zahl immer die Auflösung an, in der das Video dargestellt werden soll. Tragt ihr dort nichts ein, wird das Video auch nicht angezeigt.
Wenn die Videoportale alle einheitliche HTML-Codes hätten, bräuchte ich nur einen Button der dann folglich "Video" heißen würde. Das wäre aber zu einfach. Also verwenden alle ihren eigenen Code. Euch soll es nicht kümmern. Ihr müsst nur wissen, von welchem Portal euer Video stammt und dem entsprechend, eine der folgenden Anweisungen befolgen.

VIMEO
Der Quellcode für "vimeo" sieht wie folgendermaßen aus:
Code: Alles auswählen
[vimeo {NUMBER1} {NUMBER2}]{IDENTIFIER}[/vimeo]

Vimeo verwendet für die Video-ID eine nummerische Bezeichnung, zu Zeit eine achtstellige. Auch ist der Einbettungscode etwas anders. Eine Vimeo-URL sieht so aus:
(z.B.: http://vimeo.com/32001208). Und nur die Ziffernfolge interessiert uns eigentlich. Sie ersetzt die Variable {IDENTIFIER}.
Im Beispiel sieht also die aus der oben gewonnenen Anweisung für das Einbetten des Videos wie folgt aus:
Code: Alles auswählen
[vimeo 400 225]32001208[/vimeo]

Das Video mit der ID 32001208 wird also in einer Auflösung von 400 Pixel Breite und 225 Pixel Höhe angezeigt. Wie beim YouTube-Einbetten auch, ist die Größe rein theoretisch nicht festgelegt. Man kann quasi alle Zahlenkombinationen verwenden. Um den Rahmen des Forums aber nicht zu sprengen sollten Videos mit maximal 640 Pixeln Breite eingebettet werden.

Die Videoportale College Humor und Funny or Die werden künftig nicht mehr unterstützt, da bei etwaigen Änderungen der Aufwand zur Wiederherstellung der Funktionalität größer ist, als die 5 Videos einfach auf YouTube zu suchen.
Bild
Wir erschießen Wildtiere, weil diese sich unkontrolliert vermehren, wenn keine Raubtiere da sind und die Wälder schädigen. Und wenn sich Wölfe wieder ansiedeln, erschießen wir die auch, weil sie sonst andere Tiere fressen. Klingt nach einem super Marketingkonzept für Munitionshersteller, aber nicht wirklich durchdacht.
Bild
Benutzeravatar
almafan
König
König
 
Beiträge: 1197
Registriert: Mo 21. Mär 2011, 20:11



Ähnliche Beiträge


Zurück zu Anleitungen zur Textformatierung und Medieneinbettung


Wer ist online?

0 Mitglieder

cron