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 :
