28.06.2009, 21:50
(Dieser Beitrag wurde zuletzt bearbeitet: 14.02.2011, 11:59 von 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
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...
Regulärer Ausdruck
Ersetzung
Beipspiel
[Video: http://www.youtube.com/watch?v=mbmrCMy9UgM]
Regulärer Ausdruck
Ersetzung
Beipspiel
[Video: http://vimeo.com/8600040]
Regulärer Ausdruck
Ersetzung
Beipspiel
Regulärer Ausdruck
Ersetzung
Beipspiel
[Video: http://video.google.com/videoplay?docid=...8641159498]
Regulärer Ausdruck
Ersetzung
Beipspiel
Regulärer Ausdruck
Ersetzung
Beipspiel
Siehe Beitrag #16315 (Bemerkungen beachten).
Regulärer Ausdruck
Ersetzung
Beipspiel
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.
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:
Unter der youtube-Zeile trägst du einfach folgendes ein:
In MyBB sind folgen Video-Portale bereits integriert:
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
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.
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).
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).
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!
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&hl=de&fs=1&rel=0" width="512" height="384">
<param name="movie" value="http://www.youtube.com/v/$2&hl=de&fs=1&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&server=vimeo.com&show_title=1&show_byline=1&fullscreen=1" width="512" height="384">
<param name="movie" value="http://vimeo.com/moogaloop.swf?clip_id=$1&server=vimeo.com&show_title=1&show_byline=1&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&hl=de&fs=true" width="512" height="384">
<param name="movie" value="http://video.google.de/googleplayer.swf?docid=$2&hl=de&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&vid=$1&r=1" width="512" height="384">
<param name="movie" value="http://www.clipfish.de/videoplayer.swf?as=0&vid=$1&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!