Error message

User warning: The following module is missing from the file system: fast_404. For information about how to fix this, see the documentation page. in _drupal_trigger_error_with_delayed_logging() (line 1143 of /mnt/www/html/ooyala/docroot/includes/bootstrap.inc).

Personalizar el reproductor con CSS

Puede personalizar el fondo gráfico o tema de su reproductor con un archivo de hojas de estilos en cascada (CSS, por sus siglas en inglés) o con elementos CSS en línea.

Mientras que puede colocar estilos CSS dentro de su archivo HTML, resulta más fácil y más modular utilizar un archivo independiente y un enlace a este. Para personalizar la interfaz de usuario del reproductor, necesita los siguientes elementos, que pueden estar en un archivo (myvideopage.html) o más comúnmente en varios archivos:
  • El HTML o la página o páginas web (como myvideopage.html).

  • El archivo CSS que contiene la página web y los estilos del reproductor (como myvideo.css).

Nota: El reproductor por defecto tiene asociado un conjunto de estilos que puede revisar para obtener ejemplos de la configuración de estilo utilizada para el reproductor por defecto.

Elementos de la interfaz de usuario del reproductor

Puede utilizar CSS para cambiar el color, borde, tamaño y otros aspectos de los diversos controles del reproductor. La tabla siguiente enumera algunos de los controles típicos del reproductor, algunos de los cuales se proporcionan automáticamente en el reproductor predeterminado de Ooyala. Tenga en cuenta que los términos utilizados para los controles del reproductor no tienen restricciones y dependen del desarrollador que los cree. Sin embargo, puede utilizar una herramienta de desarrollo web como Firebug o su equivalente para inspeccionar el árbol DOM de la demo de Ooyala y ver el estilo y los nombres de los controles del reproductor.
Control del reproductor Utilice este control para:
Reproducir Iniciar la reproducción de un vídeo.
Pausar Detener el vídeo en el punto en que se selecciona. Cuando se selecciona, el vídeo reanuda la reproducción desde el punto en que se pausó.
Detener Detener el vídeo.
Repetir Cuando el vídeo finaliza, seleccione esta opción para repetir desde el principio.
Reproducción automática Reproducir automáticamente el vídeo cuando se completa.
Pantalla completa Ampliar el vídeo para ocupar toda la pantalla del dispositivo.
Scrubber bar Avanzar o retroceder la scrubber bar para buscar una posición particular en el vídeo.
Compartir Habilitar o deshabilitar opciones de uso compartido como Digg, Stumble Upon, Facebook, Twitter, correo electrónico.
Incrustar Mostrar el código embebido y habilitar la copia del código embebido.
Información Mostrar texto informativo como el título o la descripción del vídeo.
Siempre que su navegador de destino lo admita, puede configurar el estilo del contenedor del ID de div con propiedades comunes de CSS, como:
  • height - establece la altura de un elemento como el contenedor div o una superposición de imágenes.

  • width - establece el ancho de un elemento.

  • border - crea un borde alrededor de un elemento como el contenedor div o el reproductor.

  • float - se utiliza para posicionar un elemento CSS a la izquierda o a la derecha, lo que permite que otros elementos lo envuelvan.

Hay muchos otros elementos CSS que se pueden aplicar. Una completa referencia HTML5 se encuentra disponible en la página web de los estándares W3C y hay muchas referencias disponibles a través de la búsqueda por Internet. También puede utilizar las propiedades CSS3 para agregar un estilo más complejo. Estas propiedades pueden requerir prefijos adicionales para funcionar en navegadores concretos. Firefox 4 requiere el prefijo -moz- , mientras que Chrome y Safari requieren el prefijo -webkit- para muchos de estos estilos CSS3. Algunos de estos estilos son:
  • opacity - puede utilizar esto para crear fácilmente una imagen transparente o para realizar un elemento CSS transparente.

  • mask - combina los valores de opacidad y recorte (mediante el uso de formas, texto o rutas) para definir las partes de la máscara.

  • gradients - proporcionan una transición suave de un color a otro. Puede aplicar varias transiciones de color al mismo elemento.

  • transforms - le permiten aplicar efectos 2D o 3D a un elemento, lo que le da la posibilidad de girar, modificar la escala, mover y sesgar elementos.

  • transitions - le permiten agregar un efecto al cambiar de un estilo a otro, sin necesidad de utilizar animaciones Flash o código JavaScript.

  • animations - habilitan un elemento para cambiar gradualmente de un estilo a otro. Puede utilizarlas para reemplazar imágenes animadas, código JavaScript o animaciones Flash con elementos de animación CSS3.

Una vez más, la compatibilidad con estos estilos CSS3 depende de lo que admita su navegador de destino. Es necesario comprobar el nivel de compatibilidad de cada estilo CSS para su navegador.