May 182013
 
Artículo Javascript

En un navegador con soporte para html5, es posible insertar un reproductor de vídeo utilizando el tag “<video>”. Además, podemos utilizar javascript para controlar el estado del reproductor. Esto incluye la posibilidad de cambiar el vídeo que está cargado, de manera que en nuestra página podemos incluir botones o enlaces para seleccionar mediante javascript el vídeo que queremos reproducir, sin necesidad de recargar la página.

En este artículo utilizamos y explicamos el procedimiento presentado originalemente en jsfiddle.net, para incluir esta funcionalidad en nuestra instalación de wordpress.

Resultado

El resultado final que obtenemos es el siguiente:

[video id=”mi_video” mp4=”” webm=”” ogg=”” controls preload=”auto” width=”511″ height=”382″ poster=”/test-video/testvid_01.jpg” data-setup=”{}”]

Como vemos, hemos incluido un reproductor de vídeo en el artículo, y bajo el mismo hemos incluido tres botones que permiten seleccionar el vídeo que queremos reproducir.

La librería javascript video.js

El ejemplo de jsfiddle.net utiliza la librería “video.js” de www.videojs.com.

En nuestro blog de wordpress, instalamos el plugin “Video.js – HTML5 Video Player for WordPress”, que nos permite utilizar dicha librería.

Insertar el tag “<video>”

En el ejemplo de jsfiddle.net se indica que para incluir el reproductor de vídeo en la página utilicemos un tag “<video>” de html5 de la forma:

<video id="mi_video" class="video-js vjs-default-skin" controls preload="auto" 
       width="511" height="382" poster="/test-video/testvid_01.jpg" data-setup="{}">  
    <source src="" type="video/mp4" />
    <source src="" type="video/webm" />
    <source src="" type="video/ogg" />
</video>

En wordpress, en lugar de insertar directamente el tag “<video>”, se utiliza un “shortcode” [video]:
[video mp4="" webm="" ogg="" id="mi_video" controls preload="auto" width="511" height="382" poster="/test-video/testvid_01.jpg" data-setup="{}"]

El código HTML de los botones

El código HTML que se utiliza para los botones es:

<div class="wrap">
  <input rel="01" type="button" value="cargar video 1">
  <input rel="02" type="button" value="cargar video 2">
  <input rel="03" type="button" value="cargar video 3">
</div>

Como se puede ver, se añade un atributo “rel” a cada botón. Este atributo se utiliza en le código javascript para identificar el vídeo que se quiere cargar en el video player.

El código javascript

El código javascript que aparece en jsfiddle.net utiliza la librería jQuery.

Para que el código funcione sin problemas en nuestra instalación de wordpress, sustituimos la llamadas a jQuery que utilizan la sintaxis abreviada “$()” por la sintaxis standard “jQuery()”:

jQuery("input[type=button]").click(function() {
    var $target         = "testvid_"+jQuery(this).attr("rel");
    var $content_path   = "/test-video/";
    var $vid_obj        = _V_("mi_video");

    // oculta el poster actualmente cargado
    jQuery("img.vjs-poster").hide();

    $vid_obj.ready(function() {
      // Parar el vídeo que se estaba reproduciendo
      $vid_obj.pause();

      // asigna los nuevos vídeos a los nodos correspondientes del reproductor
      jQuery("video:nth-child(1)").attr("src",$content_path+$target+".mp4");
      jQuery("video:nth-child(1)").attr("src",$content_path+$target+".ogv");
      jQuery("video:nth-child(1)").attr("src",$content_path+$target+".webm");

      // sustituye la fuente del poster
      jQuery("img.vjs-poster").attr("src",$content_path+$target+".jpg").show();
      // reset the UI states
      jQuery(".vjs-big-play-button").show();

      // carga las nuevas fuentes
      $vid_obj.load();

    });
});

jQuery("input[rel='01']").click();

como vemos, el código javascript define una función click() que es asignada a todos los elementos de la página del tipo “button”

La función comienza por identificar el video a cargar, utilizando para ello el valor del atributo “rel” del botón que ha sido pulsado.

A continuación, obtiene un objeto de tipo vídeo haciendo una llamada a la función “_V_()” definida en la librería video.js

Por último, asigna al objeto una función “ready()” que sustituye las fuentes del vídeo en los distintos formatos mp4, ogv y web, por las correspondientes al nuevo vídeo a reproducir.

Y eso es todo !

 Publicado por en 7:06 pm

 Deja un comentario

(requerido)

(requerido)