Wordpress + Video = Love

Un feature nou apărut în Wordpress 2.9 este suportul oEmbed. Long story short, poți adăuga filme de pe diverse platforme video (youtube, vimeo, blip etc) prin simpla scriere a url-ului pe un singur rând. Asta te scutește de multe bătăi de cap și, să-ți spun drept, cred că trebuia să fie introdus în WP 1.0. Pentru că, fără un plugin adecvat, un neștiutor n-ar fi avut șanse prea mari să publice un video (html view -> paste).

În fine, treaba e bună, implementarea la fel.

Problema

Problema mea este că filmele de pe youtube – fie cele „băgate” cu oEmebed, fie cele „băgate” cu codul de pe youtube – deschid o pagină nouă când faci click pe ele. O a doua problemă (de această dată doar la filmele introduse prin metoda clasică – copy/paste) este că filmele au anumite dimensiuni standard, iar o redimensionare (ex. cât tot blogul) înseamnă calcule. Și cum nimănui nu-i plac calculele (sau cel puțin mie nu-mi plac!), iată o soluție

O a doua problemă o reprezintă filmele self-hosted. Adică ai un fișier .flv și vrei să-l pui pe blog. Cum faci?

Soluția

Soluția la aceste probleme am găsit-o (de voie, de nevoie) la ultima temă de Wordpress codată și se numește JW Player. Cum se implementează?

1. Se descarcă ultima versiune a player-ului și se urcă pe ftp în directorul wp-contents/themes/tema-curenta (schimbi tema-curentă cu numele corespunzător), astfel încât să ai următoarea structură: wp-content/themes/tema-curenta/jwplayer.
2. Editezi functions.php (dacă nu există, îl creezi) și, undeva la sfârșit, adaugi:

   <?php
   function customVideo($atts, $content = null){
   	$tema = get_bloginfo("template_url");
   	$videoW = 640;
   	$videoH = $videoW/1.26;
   	$ret = 	'<object class="myVideoPlayer" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" name="player" width="'.$videoW.'" height="'.$videoH.'">
   					<param name="movie" value="'.$tema.'/jwplayer/player-viral.swf" />
   					<param name="allowfullscreen" value="true" />
   					<param name="allowscriptaccess" value="always" />
   					<param name="flashvars" value="file='.trim($content).'" />
   					<embed
   						type="application/x-shockwave-flash"
   						name="player2"
   						src="'.$tema.'/jwplayer/player-viral.swf"
   						width="'.$videoW.'"
   						height="'.$videoH.'"
   						allowscriptaccess="always"
   						allowfullscreen="true"
   						flashvars="file='.trim($content).'"
   					/>
   				</object>';
   		return $ret;
   }
   
   add_shortcode('video', 'customVideo');
   

3. Schimbi $videoW cu lățimea dorită.
4. În postul în care vrei să adaugi un film, pur și simplu scrii asta: [video]youtube url[/video] sau [video]link-ul spre fișierul .flv[/video] Și cam atât.

DEMO – Elton John & Axl Rose — Bohemian Rhapsody

Un fel de disclaimer

Codul injectat în pagină după șmecheria asta NU va mai fi valid. Singurul „fix” pentru această problemă este un js de vreo 6kb (swfobject, inclus în arhiva jwplayer). Dacă vor exista doritori, voi adăuga și un articol ce acoperă și respectiva soluție.