Mostrar vídeos con ayuda de Magic Fields

Posted by hunk in Magic Fields on April 12, 2010

Así es, bueno como algunos de ustedes saben yo parte del equipo de desarrollo de Magic Fields, un plugin de WordPress que permite tener funcionalidades de CMS para este. Dejare para otro post un explicación de lo que es MF.

Este post mostrare como tener tener la funcionalidad de vídeo para nuestro sitio con ayuda de MF.

El sábado pasado me llego un email donde me decían si había forma de integrar un campo del tipo video a MF o si había forma de mostrar un video con MF.

En el equipo de desarrollo hemos hablado mucho acerca de este campo, lamentablemente es difícil agregarlo al core del MF, por que? Existe muchos formatos de vídeos y es difícil que algún player de vídeo soporte todos, esto aunado a que seguramente también se querrá que se pudiera mostrar vídeos enlazados de sitios como youtube, vimeo, etc. También tenemos la cuestión de que muchos servidores tienen un máximo de upload y la gran mayorías de los vídeos son pesado. Existe muchas variables a considerar. Por  un lado podríamos hacer un campo para vídeos que sean upload (solo para ciertos formatos) y otro campo donde coloquen la url del vídeo (youtube,vimeo, etc), pero aun así esto implicaría un muy buen análisis de players y lo menos que queremos es llenar el core de MF con muchos plugins externos y hacer más pesado el plugin. Tal vez ahora que ya hemos logrado muchas de nuestras metas a corto y mediano plazo en MF podemos analizar cual es la mejor forma de añadir un campo de vídeo.

Bueno en el email me comentaban que quería incluir el player flowplayer. La forma mas sencilla que encontré para hacer esto posible es usando MF para un upload del vídeo (campo tipo file), añadir flowplayer al tema del sitio y agregar unas cuantas funciones a nuestro functions.php del  tema.

Estos son los pasos a seguir para tener el player en nuestro sitio:

(ya que tenemos instalado correctamente MF en nuestro WP)
1.- Creamos un Write Panel del tipo post (yo lo llame videos)

WP_video

2.-Al Write Panel videos le agregue un campos tipo file y lo llame video.

CF_video
Tenemos ya la estructura para crear Post con el Write Panel Video, donde podremos subir un video.

post_video

3.- Dentro de la carpeta de nuestro tema (wp-content/themes/nombre_de_nuestro_tema) creamos una carpeta y la llamamos flowplayer, descargamos flowplayer, descomprimimos el archivo y colocamos los siguientes archivos en la carpeta que creamos:
* flowplayer-3.1.4.min.js
* flowplayer-3.1.5.swf
* flowplayer.controls-3.1.5.swf
estos archivos son los necesarios para poder mostrar el video.

4.- en el archivo funtions.php de nuestro tema agregamos el siguiente código:

<?php
  add_action('wp_head', 'script_flow_player');
 
  function script_flow_player(){
    ?>
      <script type='text/javascript' src='<?php bloginfo('template_directory'); ?>/flowplayer/flowplayer-3.1.4.min.js'></script>
      <script>
        jQuery().ready(function() {
          jQuery(".mf_video").each( function(element){
            flowplayer(jQuery(this).attr('id'), "<?php bloginfo('template_directory'); ?>/flowplayer/flowplayer-3.1.5.swf",{clip : {autoPlay: false}});
          });
        });
      </script>
    <?php
  }
 
  function get_video($fieldName, $groupIndex=1, $fieldIndex=1, $params = NULL){
    global $post;
    $size = array('w' => 520, 'h' => 330);
    $url_video = get($fieldName,$groupIndex,$fieldIndex);
    if($url_video){
   
      $id =sprintf("id_%s",uniqid());
      if( isset($params['w']) ) $size['w'] = $params['w'];
      if( isset($params['h']) ) $size['h'] = $params['h'];
     
      printf('<a  
         href="%s"  
         style="display:block;width:%spx;height:%spx"  
         id="%s" class="mf_video">
      </a>'
,$url_video,$size['w'],$size['h'],$id);
    }
  }
?>

Código en Gist

Primero tenemos el hook

add_action('wp_head', 'script_flow_player');

este hook nos permite añadir al wp_head de nuestro tema el contenido de la funcion script_flow_player y dicha función lo que hace es cargar el archivo de javascript de flowplayer y además tiene una pequeña función de javascript, la cual para todos los elementos con las clase mf_video le añada la funcionalidad de flowplayer (colocar el player).

También tenemos una función llamada get_video, esta función es la que va armar la estructura correcta para el elemento de vídeo. Dentro de ella se pide la ruta del archivo (path del video) y también armamos un id único para cada uno de los elementos, esto por que a flowplayer le tenemos que dar el id del elemento y como sabemos no podemos tener dos elementos con el mismo id. Es por eso que se genera un id unico.
5.- para mostrar el vídeo en nuestro tema solo tenemos que colocar la siguiente línea de código:

<?php echo get_video(‘video’); ?>

y mostrara el video en un tamaño de 520×330.

show_video

La funcion get video tiene más parámetros

function get_video($fieldName, $groupIndex, $fieldIndex, $params)

$fieldName => el nombre de nuestro campo
$groupIndex => índice de nuestro grupo (en caso de pertenecer a un grupo duplicado)
$fieldIndex => índice del campo (en caso de ser un campo duplicado)
$params => un arreglo los cuales nos permitirán cambiar el tamaño del player.

Si nosotros queremos cambiar el tamaño del player podríamos colocar los siguientes códigos:

<? echo get_video('video',1,1,array('w' => 200, 'h' =>  200) ); ?>

o

<? echo get_video('video',1,1,array('w' => 350, 'h' => 300) ); ?>

flowplayer tiene muchas mas opciones de la que yo coloco de inicio (player en stop) si ustedes quieren añadir más opciones solo tendrían que agregarlos a la línea de javascript donde se agregar la funcionalidad de flowplayer.

flowplayer(jQuery(this).attr('id'), "<?php bloginfo('template_directory'); ?>/flowplayer/flowplayer-3.1.5.swf",{clip : {autoPlay: false}});

bueno como verán es muy sencillo tener la funcionalidad de video con la base de MF. Espero que les sirva este pequeño tutorial.

Byte

Be Sociable, Share!