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.

9 Comentarii to “WordPress + Video = Love”

  1. Useful, thanks si mai scrie articole de genu.

  2. Ar fi fost foarte util sa pui la finalul postului si rezolvarea pentru a avea codul sursa valid(sau macar link catre un alt post unde e rezolvata problema)
    Foarte utila varianta gasita de tine.

  3. Asta chiar e dragut . e foarte util thank

  4. Explicatia si solutia ta ma vor salva la 3 bloguri exclusiv video ;) Sar’na!

  5. ms, chiar este solutia de care aveam nevoie

  6. Multumesc mult

    keep up the good work

  7. am reusit sa fac o mare parte din instructiuni , insa nu`mi adauga filmul. Crezi ca ma poti ajuta?

  8. Salut. Frumos tutorial. Sti cumva cum pot adauga si subtitrare ?

  9. Foarte bun tutorialul, JWPlayer dovedindu-se a fiind o solutie rapida si eleganta pentru embed.
    A trecut ceva vreme de cand a fost scris acest articol, intre timp fiind scoase noi versiuni ale playerului. La versiunea curenta (5.7) “player-viral.swf” a fost modificat in “player.swf” lucru care in cazul meu a blocat functionarea playerului. Solutia e simpla, trebuie modificat player-viral.swf in player.swf .
    Well, am lasat partea cea mai importanta la sfarsit. Am avut link-ul video-ului intr-un “Custom Field”. Cum in aceste “box-uri” , by default, nu se pot adauga shortcode-uri ([video] in cazul de fata) a fost nevoie de un mic hack preluat de aici :

    if ( get_post_meta($post->ID, 'cfield', true) ) {
        echo do_shortcode(get_post_meta($post->ID, 'cfield', $single = true));
    }
    

    unde “cfield” este numele “Custom Field” ului unde se afla video-ul. In cazul meu codul final arata asa :

    $default_video_path = '[video]'.get_bloginfo('template_url').'/videoname.flv [/video]';
    add_post_meta($post->ID, 'Intro Video', $default_video_path , true);
    						
    if ( get_post_meta($post->ID, 'Intro Video', true) ) {
      echo do_shortcode(get_post_meta($post->ID, 'Intro Video', $single = true));
    }
    

    PS : In cazul in care video-ul detinut nu este .flv nu ezitati sa utilizati un convertor.

Show trackbacks

Ți-a plăcut articolul? Lasă un comentariu!

You can insert code snippets using BBcode:
[js].[/js] [html].[/html] [php].[/php] [css].[/css]
You can also use some HTML tags:
<blockquote>.</blockquote> <code>.</code> <a href="">.</a> <strong>.</strong> <em>.</em>

windows apple dropbox facebook twitter