Atrás

Como utilizar jwplayer en drupal

Como utilizar jwplayer en drupal

Vamos a crear un contenido web en drupal para poder mostrar un video con las librerías de jwplayer. Actualmente existe un módulo de drupal para jwplayer, pero lleva mucho tiempo sin ser actualizado, además en nuestro caso preferimos utilizar nuestro propio código para la configuración del player.

Para ello, primeramente tenemos que crear una cuenta en la web de jwplayer (https://www.jwplayer.com/sign-up/), dentro de la cual creamos un player a nuestro gusto, justo debajo del video de prueba se encuentra la url de la librería que se ha generado para nuestro player :

 

 

Una vez tenemos la librería de jwplayer, creamos en drupal un tipo de contenido nuevo, o bien utilizamos uno ya existente, en nuestro caso crearemos un tipo de contenido llamado “Pruebas” y he creado un grupo de campos llamado “Datos Video” en el que he añadido los siguientes campos :

  • Video : campo de tipo fichero para subir el video al servidor, también podría utilizarse un campo texto donde poner una url externa (por si no queremos subir videos a nuestro servidor)
  • Imagen : Imagen del video antes de comenzar su reproducción, también puede cambiarse por un campo de texto para enlazar con una imagen externa.
  • Además añadí algunos parámetros de configuración del player (se pueden poner los parámetros que se quieran, para más información https://developer.jwplayer.com/jw-player/docs/developer-guide/customization/configuration-reference)
    • aspectratio : Aspecto de la pantalla, donde elegir el formato del vídeo (16:9 o 4:3)
    • autostart : Reproducción automática.
    • repeat: Repetir la reproducción del video en bucle.

 


 

Una vez creado el tipo de contenido, crear un contenido “Prueba”:

 

 

Cuando accedemos al nodo del nuevo contenido, pero vemos que el video lógicamente no se muestra, simplemente se listan los datos que hemos metido :


 

Para poder ver el video, hay que modificar el código pare este tipo de contenido, para ello hay que crear un fichero tpl del tipo node--[nombre_sistema_tipo_contenido].tpl.php (en nuestro caso node--pruebas.tpl.php) y copiarlo en la carpeta “templates” del tema que tengamos por defecto en drupal. Nosotros hemos optado por duplicar el fichero node.tpl.php de nuestro tema y renombrarlo como node--pruebas.tpl.php, y hacer los siguientes cambios :

 

<div class="content"<?php print $content_attributes; ?>>

<?php
// Hide comments and links now so that we can render them later.
hide($content['comments']);
hide($content['links']);
print render($content) // Eliminamos esta línea;

//añadir este código
$video = file_create_url($node->field_video['und'][0]['uri']);
$imagen = file_create_url($node->field_imagen['und'][0]['uri']);
$aspecto = "16:9";
if ($node->field_aspecto_de_pantalla['und'][0]['value'] == "2") $aspecto = "4:3";
$repetir = $node->field_repetir_video['und'][0]['value'] == 1;
$autostart = $node->field_comenzar_autom_ticamente['und'][0]['value'] == 1;
?>

<script src="http://content.jwplatform.com/libraries/WTvZpf6X.js"></script>

<div class="contenedor_player">
<div id="player"></div>
</div>

<script>

var playerInstance = jwplayer("player");

playerInstance.setup({
file: "<?php echo $video;?>",
image: "<?php echo $imagen;?>",
width: "100%",
aspectratio: "<?php echo $aspecto;?>",
autostart: "<?php echo $autostart;?>",
repeat: "<?php echo $repetir;?>"
});

</script>

 

 

El video se mostraría de la siguiente forma :

 


Artículos recientes

Capa de persistencia como componente OSGI para Lif...

Capa de persistencia como componente OSGI para Liferay 7
07/09/2016
Toda aplicación suele necesitar una capa fiable para implementar la lógica de negocio, y la persistencia y el acceso a datos. Escribir nuestro propio código para la persistencia normalmente va a ...

Liferay Portal 7.0

Liferay Portal 7.0
29/08/2016
Liferay Portal ha publicado la nueva versión 7. Una vez más renovándose, con una versión que ha estado desarrollándose durante más de un año. Supone una gran evolución, ya que además de incl...

Restilyng del portal Extremadura Empresarial

Restilyng del portal Extremadura Empresarial
02/03/2016
Desde la Dirección General de Empresas y Competitividad nos encargaron el rediseño tanto de estilo como de navegación del antiguo portal de Activación Empresarial. Por fin ha visto la luz bajo el domi...

Liferay es Líder en el cuadrante mágico de Gartner...

Liferay es Líder en el cuadrante mágico de Gartner
24/09/2015
Por sexto año consecutivo, Liferay ha sido reconocido como Líder en el Cuadrante Mágico para Portales Horizontales de Gartner, consultora líder en análisis del mercado de TI. Liferay es el ú...

Etiquetas