[querschlaeger]

Hallo,

da immer wieder gefragt wird, wie erstelle ich einen MyCode für dieses Videoportoal, wie für jenes Portal, dachte ich mir, dass ein Thread ganz praktisch wäre, in dem MyCodes gesammelt werden um Videos diverser Videoportale einzubinden.

Übersicht

• Youtube (in MyBB 1.6 enthalten)
  
• Vimeo (in MyBB 1.6 enthalten)
  
• sevenload
  
• Google (in MyBB 1.6 enthalten)
  
• Clipfish
  
• MyVideo
  
• Juggling.tv
  
• Facebook
  
• Video-Portale dem Editor von MyBB 1.6 hinzufügen
  
• Integrierte Video-Portale von MyBB 1.6 bearbeiten
  
• Video-Funktion dem Editor von MyBB 1.4 hinzufügen
  

Mir ist klar, dass es Plugins gibt, welche sich dieser "Problematik" annehmen, allerdings finde ich es unnötig Plugins einzusetzen, wo man doch selbst bequem im Admin CP eigene MyCodes erstellen kann.

So, fange ich gleich mal an...

Youtube (in MyBB 1.6 enthalten)

Regulärer Ausdruck

Code:

\[video=youtube\]http://www.youtube.com/(.*?)v=([A-Za-z0-9-_]+)(.*?)\[/video\]

Ersetzung

Code:

<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/$2&amp;hl=de&amp;fs=1&amp;rel=0" width="512" height="384">
<param name="movie" value="http://www.youtube.com/v/$2&amp;hl=de&amp;fs=1&amp;rel=0" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
</object>

Beipspiel

Code:

[video=youtube]http://www.youtube.com/watch?v=mbmrCMy9UgM[/video]

[Video: http://www.youtube.com/watch?v=mbmrCMy9UgM]

Vimeo (in MyBB 1.6 enthalten)

Regulärer Ausdruck

Code:

\[video=vimeo\]http://vimeo.com/([0-9]+)\[/video\]

Ersetzung

Code:

<object type="application/x-shockwave-flash" data="http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;fullscreen=1" width="512" height="384">
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=$1&amp;server=vimeo.com&amp;show_title=1&amp;show_byline=1&amp;fullscreen=1" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
</object>

Beipspiel

Code:

[video=vimeo]http://vimeo.com/8600040[/video]

[Video: http://vimeo.com/8600040]

sevenload

Regulärer Ausdruck

Code:

\[video=sevenload\]http://de.sevenload.com/(.*?)(videos|folgen)/([A-Za-z0-9]+)(.*?)\[/video\]

Ersetzung

Code:

<object type="application/x-shockwave-flash" data="http://de.sevenload.com/pl/$3/500x314/swf" width="500" height="314">
<param name="movie" value="http://de.sevenload.com/pl/$3/500x314/swf" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
</object>

Beipspiel

Code:

[video=sevenload]http://de.sevenload.com/videos/YLyh7R1-Batman-Robin-Die-Bombe[/video]

Google (in MyBB 1.6 enthalten)

Regulärer Ausdruck

Code:

\[video=googlevideo\]http://video.google.com/(.*?)docid=([A-Za-z0-9-_]+)(.*?)\[/video\]

Ersetzung

Code:

<object type="application/x-shockwave-flash" data="http://video.google.de/googleplayer.swf?docid=$2&amp;hl=de&amp;fs=true" width="512" height="384">
<param name="movie" value="http://video.google.de/googleplayer.swf?docid=$2&amp;hl=de&amp;fs=true" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
</object>

Beipspiel

Code:

[video=googlevideo]http://video.google.com/videoplay?docid=-8102469528641159498[/video]

[Video: http://video.google.com/videoplay?docid=...8641159498]

Clipfish

Regulärer Ausdruck

Code:

\[video=clipfish\]http://www.clipfish.de/video/([0-9]+)(.*?)\[/video\]

Ersetzung

Code:

<object type="application/x-shockwave-flash" data="http://www.clipfish.de/videoplayer.swf?as=0&amp;vid=$1&amp;r=1" width="512" height="384">
<param name="movie" value="http://www.clipfish.de/videoplayer.swf?as=0&amp;vid=$1&amp;r=1" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
</object>

Beipspiel

Code:

[video=clipfish]http://www.clipfish.de/video/1929061/batman/[/video]

MyVideo

Regulärer Ausdruck

Code:

\[video=myvideo\]http://www.myvideo.de/watch/([0-9]+)(.*?)\[/video\]

Ersetzung

Code:

<object type="application/x-shockwave-flash" data="http://www.myvideo.de/movie/$1" width="512" height="384">
<param name="movie" value="http://www.myvideo.de/movie/$1" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
</object>

Beipspiel

Code:

[video=myvideo]http://www.myvideo.de/watch/5287834/Robin_s_heiligen_Sprueche[/video]

Juggling.tv

Siehe Beitrag #16315 (Bemerkungen beachten).

Facebook

Regulärer Ausdruck

Code:

\[video=facebook\]http://(.*?).facebook.com/(.*?)v=([0-9]+)(.*?)\[/video\]

Ersetzung

Code:

<object type="application/x-shockwave-flash" data="http://www.facebook.com/v/$3" width="512" height="384">
<param name="movie" value="http://www.facebook.com/v/$3" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
</object>

Beipspiel

Code:

[video=facebook]http://www.facebook.com/video/video.php?v=10150398154330484[/video]

So, das waren erstmal die größeren deutschen Videoportale denke ich.

Die genannten MyCodes erzeugen valides XHTML und eine einheitliche Videogröße von 512x384 Pixel (Außnahme: sevenload - dort muss man eine von deren definierten Größen nehmen). Außerdem wird kein Werbelink für das Videoportal hinzugefügt, wie es manche HTML-Schnippsel der Videoportale gerne tun...
Die regulären Ausdrücke können natürlich an die entsprechenden Bedürfnisse angepasst werden.

Video-Portale dem Editor von MyBB 1.6 hinzufügen

Der Editor von MyBB 1.6 beinhaltet bereits ein Menü für Videos und dieses lässt sich sehr einfach erweitern (mit von euch angelegten MyCodes). Dazu muss die Datei jscript/editor.js geöffnet und nach folgender Zeile gesucht werden:

Code:

// An array of video services to be shown (youtube, vimeo, etc)

Unter der youtube-Zeile trägst du einfach folgendes ein:

Code:

this.videos["sevenload"] = "sevenload";
this.videos["clipfish"] = "Clipfish";
this.videos["myvideo"] = "MyVideo";

Integrierte Video-Portale von MyBB 1.6 bearbeiten

In MyBB sind folgen Video-Portale bereits integriert:

• Dailymotion
  
• Google Video
  
• Metacafe
  
• Myspace
  
• Vimeo
  
• Yahoo
  
• YouTube
  

Falls ihr die (X)HTML-Ersetzungen dieser Portale ändern möchtet, müssen die dafür hinterlegten Templates geändert werden (im Admin CP zu finden unter Templates & Style > Templates). Unter Templates ohne Gruppen finden sich folgende Templates

• video_dailymotion_embed
  
• video_googlevideo_embed
  
• video_metacafe_embed
  
• video_myspacetv_embed
  
• video_vimeo_embed
  
• video_yahoo_embed
  
• video_youtube_embed
  

Diese können einfach den Wünschen entsprechend (z.B. andere Größenformate oder ein zusätzlicher HTML-Link zum Video direkt) geändert werden.

Video-Funktion dem Editor von MyBB 1.4 hinzufügen

Wenn ihr eurem Editor eine Dropdown-Liste für die Video-Portale hinzufügen wollt, muss die Datei jscript/editor.js angepasst werden.

Schritt 1: Das Video-Objekt mit allen Videoportalen definieren (die Liste sollte dabei mit den von euch angelegten MyCodes übereinstimmen; Zeile ~66).

Code:

// Defines an array of videos to be shown in the video drop down.
this.video = new Object();
this.video["youtube"] = "<img src=\"http://s.ytimg.com/yt/favicon-vfl86270.ico\" alt=\"YouTube\"> YouTube";
this.video["vimeo"] = "<img src=\"http://vimeo.com/favicon.ico\" alt=\"Vimeo\"> Vimeo";
this.video["google"] = "<img src=\"http://video.google.com/favicon.ico\" alt=\"Google\"> Google";

Es ist euch überlassen, ob ihr Icons (wie im Beipsiel) verwendet oder nicht. Dieser Teil ist von euch anzupassen.

Schritt 2: Das Menü in die Toolbar einfügen (Zeile ~203).

Code:

{type: 'dropdown', name: 'video', insert: 'video', title: 'Videos', options: this.video},

Dieser Teil muss so wie hier genannt eingefügt werden.

Nutzt die angehängte Datei als Vorlage. Falls durch das neue Menü einzelne Elemente im Editor ungewünscht umbrechen, kann dieser auch etwas breiter gemacht werden. Ein separates Tutorial habe ich dazu hier erstellt: Umbruch in der Leiste mit den MyCode-Buttons beheben

Vervollständigungen sind ausdrücklich erwünscht!

[Olaf_A]

Vielen Dank für die Codes und die Editor.js!

Wäre es in Zukunft möglich, daß du eventuelle Änderungen an der Editor.js extra aufführst.

Meine editor.js wurde derart erweitert, so daß ich mir die von dir eingefügten Stellen manuell raussuchen musste. Bei 1400 Zeilen ist das kein Vergnügen.

Anbei, poste ich hier mal die Änderungen:

Eingefügt ab Zeile 66:

Code:

// Defines an array of videos to be shown in the video drop down.
this.video = new Object();
this.video["youtube"] = "<img src=\"http://s.ytimg.com/yt/favicon-vfl86270.ico\" alt=\"YouTube\"> YouTube";
this.video["vimeo"] = "<img src=\"http://vimeo.com/favicon.ico\" alt=\"Vimeo\"> Vimeo";
this.video["google"] = "<img src=\"http://video.google.com/favicon.ico\" alt=\"Google\"> Google";

Zeile 209:

Code:

{type: 'dropdown', name: 'video', insert: 'video', title: 'Videos', options: this.video},

Man sollte die Breite des Eingabefensters etwas vergrößers, da beim Originalcode sonst der Farbwähler in der zweiten Reihe erscheint.

   

Dies ist mein Testforum, wo ich keinerlei Änderungen am Code vorgenommen habe. Darin teste ich diverse Plugins um Veränderungen besser nachvollziehen zu können.

Ich kann jeden Bastler nur empfehlen, sich ein solches Testforum zuzulegen.

[querschlaeger]

Hi Olaf,

danke für die Ergänzungen. Ja, ich hätte die Änderungen evtl. noch einzeln auflisten sollen, aber gestern wars schon etwas spät. Du hast ja für alle hier die richtigen Codezeilen nochmal hingeschrieben. Die Images vor den Videonamen sind übrigens nicht nötig, ich dachte nur, so sieht es evtl. besser aus (außerdem empfehle ich die Bilder/Icons lokal abzuspeichern und aufzurufen, sofern das rechtlich i.O. ist (aber da muss man bei den einzelnen Videoportalen selbst mal nachsuchen)).

[cross]

Ich sag einfach nur: DANKESCHÖN

Sind ein paar MyCodes bei die ich noch nicht habe
Wie zb: vimeo^^
Ist eine sehr gute Auflistung und erspart das lästige googeln
/edid: Habs xD hab einfach rumprobiert^^
/edid2: @querschläger (unten) - habs grad geschafft^^
mfg
cross

[querschlaeger]

Juggling.tv

Regulärer Ausdruck

Code:

\[video=jtv\](.*?)\[/video\]

Ersetzung

Code:

<object type="application/x-shockwave-flash" data="http://juggling.tv/nvplayer.swf?config=http://juggling.tv/nuevo/econfig.php?key=$1" width="512" height="384">
<param name="movie" value="http://juggling.tv/nvplayer.swf?config=http://juggling.tv/nuevo/econfig.php?key=$1" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="wmode" value="transparent" />
</object>

Achtung: Der ist etwas fies! Anscheinend verwendet man bei Juggling.tv nicht die ID aus der URL für das Flash-Video, sondern einen speziellen Key den nur die kennen. Daher muss man zuerst das Video dort aufrufen und dann den zweiten Button unten im Video anwählen ("Link and embed code"). Unter "Embed Code" findet man den passenden Key zum Video.

Beispiel: Wir wollen dieses Video einbinden: http://juggling.tv/video/2243/two-balls-one-chair

Unter den Button "Link and embed code" ist diese (zweite) Zeile für uns interessant:

Code:

<embed src="http://juggling.tv/nvplayer.swf?config=http://juggling.tv/nuevo/econfig.php?key=e7c3be322bd7bae41617" width="488" height="414" wmode="transparent" allowscriptaccess="always" allowfullscreen="false" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" /></embed>

Dort finden wir den Key e7c3be322bd7bae41617 und können ihn verwenden. Dieser MyCode fügt nun also das Video in die Website ein:

Code:

[video=jtv]e7c3be322bd7bae41617[/video]

Alles in allen sehr User-unfreundlich, aber wers braucht.

[wWs]

Hey danke für deine Hilfe.

Leider Funktioniert das nicht :s

[querschlaeger]

Hey,

also ich habe es (Juggling.tv) in meinem Forum getestet und es funktioniert einwandfrei. Evtl. kann es helfen, wenn du die Ersetzung ins AdminCP kopieren willst, diese vorher in einen Reinexteditor kopierst (unter Windows wäre das Notepad) und von dort aus weiterkopierst. Manchmal schleichen sich sonst Formatierungen mit ein, wenn man direkt von Webseiten etwas kopiert.

[wWs]

Ja daran lag es

die Zip datei editor, kommt in /forum/jscripts?

Wenn ja wäre es nett wenn du mir da auch noch mal hilfst. Geht nicht.

[querschlaeger]

Ja, sie kommt nach /scripts/editor.js. Allerdings ist sie nicht notwendig, damit die MyCodes funktionieren. Sie soll aber auch eher als Vorlage für eigene Anpassungen dienen. Olaf hat gut beschrieben, welche Zeilen eingefügt werden müssen.

EDIT: Ich hoffe du hast die JS-Datei aus der ZIP entpackt und nicht direkt die ZIP hochgeladen.

[wWs]

Ach quatsch was denkst du denn von mir
*mist*
werde mir den Beitrag von olaf noch mal zu Herzen nehmen