Comunidad de diseño web y desarrollo en internet

Controlar videos de youtube insertados en un SWF de Flash

En esta segunda parte del tip "insertar videos de YouTube en Flash". Vamos a controlar el video desde el swf a través de botones creados por nosotros mismos. Aquí hay un ejemplo del producto funcionando

Aspectos generales del API de Youtube


El API de Youtube permite a los usuarios controlar los reproductores de vídeo insertados de YouTube a través de JavaScript. Las llamadas se pueden realizar para reproducir, detener, buscar un determinado momento de un vídeo, ajustar el volumen, silenciar el reproductor y otras muchas funciones útiles.

Requisitos:
El usuario final debe tener instalado Flash Player 8 o superior para una correcta visualización.

Operaciones y funciones del API de Youtube


En “referencias del API del reproductor”, el código a utilizar se nos muestra de la siguiente manera:

Código :

player.playVideo():Void

Pero, como nosotros ya tenemos una referencia al objeto, debido a que estoy utilizando el mismo codigo creado en el Tip “Insertar videos de youtube en Flash”.
variable: ytplayer

Código :

var ytplayer:MovieClip = _root.createEmptyMovieClip("ytplayer", 1);
ytPlayerLoaderListener = {};
var loadInterval:Number;
ytPlayerLoaderListener.onLoadInit = function() {
loadInterval = setInterval(checkPlayerLoaded, 250);

Nosotros deberemos utilizar cualquiera de las funciones a tratar, de la siguiente manera:

Código Actionscript para detener el video


Accion: detener el video

Código :

on(release){
    ytplayer.stopVideo(); 
}

Funciones a tratar:


  • player.playVideo();
    Reproduce el vídeo actualmente cargado/en cola.
  • player.pauseVideo()
    Pausa el vídeo que actualmente en reproducción.
  • player.stopVideo();
    Detiene el vídeo actual. También cierra el objeto NetStream y cancela la carga del vídeo. Una vez que se haya ejecutado stopVideo(), un vídeo no se podrá reanudar sin volver a cargar el reproductor o cargar un nuevo vídeo (sólo reproductores sin bordes). Al ejecutar stopVideo(), en primer lugar el reproductor emitirá un evento de finalización (0), seguido de un evento no iniciado (-1).
  • player.clearVideo();
    Borra la visualización del vídeo. Resulta útil si deseas borrar el rastro de un vídeo después de ejecutar stopVideo().
  • player.getVideoBytesLoaded();
    Devuelve el número de bytes cargados para el vídeo actual.
  • player.getVideoBytesTotal();
    Devuelve el tamaño en bytes del vídeo en reproducción/cargado actualmente.
  • player.getVideoStartBytes();
    Devuelve el número de bytes desde el que comenzó la carga del archivo de vídeo. Caso de ejemplo: el usuario busca un punto que aún no se ha cargado, y el reproductor realiza una nueva solicitud de reproducción de un segmento del vídeo que aún no se ha cargado.
  • player.mute();
    Silencia el reproductor.
  • player.unMute();
    Devuelve el sonido al reproductor.
  • player.isMuted();
    Devuelve el valor true, si el productor está silenciado; false, si no lo está.
  • player.setVolume(volume);
    Establece el volumen. Acepta un número entero comprendido entre 0 y 100.
  • player.getVolume(volume);
    Devuelve el volumen actual del reproductor, un número entero comprendido entre 0 y 100. Ten en cuenta que getVolume() devolverá el volumen aunque el reproductor esté silenciado.
  • player.seekTo(seconds, allowSeekAhead);
    Busca el tiempo especificado del vídeo en segundos. allowSeekAhead determina si el reproductor va a realizar una nueva solicitud al servidor si seconds trasciende los datos de vídeo actualmente cargados. Ten en cuenta que seekTo() intentará buscar el fotograma clave más cercano a los segundos (seconds) especificados. Esto significa que a veces el comienzo de la reproducción puede buscar realmente justo antes o justo después del tiempo solicitado, normalmente no más de ~2 segundos.
  • player.getPlayerState();
    Devuelve el estado del reproductor. Los valores posibles son no iniciado (-1), finalizado (0), en reproducción (1), pausado (2), almacenamiento en búfer (3), en cola de vídeos (5).
  • player.getCurrentTime();
    Devuelve el tiempo actual en segundos del vídeo actual.
  • player.getDuration();
    Devuelve la duración en segundos del vídeo actualmente en reproducción. Ten en cuenta que getDuration() devolverá 0 hasta que se hayan cargado los metadatos del vídeo, lo que normalmente se produce justo después de que comience la reproducción del vídeo.
  • player.addEventListener(event, listener);
    Añade una función de escucha para el evento especificado.
  • player.getVideoUrl();
    Devuelve la URL YouTube.com para el vídeo en reproducción o cargado actualmente.
  • player.getVideoEmbedCode();
    Devuelve el código insertado para el vídeo en reproducción o cargado actualmente.

En los casos que queramos solicitarle a el código que nos devuelva un valor, crearemos un cuadro de texto dinámico y haremos referencia a el mediante el siguiente código:

Código Actionscript para obtener el HTML embed de un video de Youtube


Accion: Devuelve el código insertado para el vídeo en reproducción o cargado actualmente a un cuadro de texto dinamico, con nombre de instancia: din_txt

Código :

on(release){
    din_txt.text=ytplayer.getVideoEmbedCode();
}


Reproductor de Youtube personalizado


El asistente de youtube para tu reproductor
Asígnale un nombre y un diseño al reproductor e incluye en él tus vídeos o listas de reproducción. Una vez que hayas generado el código de inserción y guardado el reproductor, podrás copiar y pegar ese código en tu blog o sitio web.
Gracias al asistente que brinda Youtube, podrás personalizar el reproductor a tu gusto.
  • 1. Información sobre el reproductor
    Introduce un nombre y una descripción para el reproductor. Esta información sólo aparecerá en tu página "Mis reproductores" para ayudarte a identificar los reproductores que hayas configurado.
  • 2. Tema
    Selecciona un tema de color básico para el reproductor.
  • 3. Diseño
    Selecciona un diseño para el reproductor.
    La opción de diseño sólo está disponible la primera vez que se crea un reproductor.
    Una vez que hayas elegido un diseño y guardado el reproductor, no podrás modificar la configuración elegida.
    Nota: deberás crear otro, pero no trae ningún problema, ya que los pasos son los mismos.
  • 4. Contenido
    Elige una lista de reproducción, tus vídeos o tus favoritos como contenido de este reproductor.
    Nota: ya deberías haber creado tu lista de reproducción, favoritos o tus videos, antes de llegar hasta este paso, sino no tendrás nada que mostrar.
  • 5. Generar código y guardar reproductor
    Para terminar de crear el reproductor, debes generar el código de inserción.
    Sólo tendrás que generar un código de inserción para este reproductor una vez. Cualquier futura modificación que realices se reflejará automáticamente en el reproductor una vez guardada.

Nota: del codigo que te brinde el asistente, solo deberás tomar la parte importante que necesitamos:
El codigo de youtube arrojado es:

Código :

object width="425" height="344"><param name="movie" value="http://www.youtube.com/v/AJM5Mmn6_-0&hl=es_ES&fs=1&"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/AJM5Mmn6_-0&hl=es_ES&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>

Solo nos sera util ,de todo este codigo lo siguiente:

Código :

http://www.youtube.com/v/AJM5Mmn6_-0&hl=es_ES&fs=1&.

Pegalo dentro del código que utilizas en flash para ver tus videos y pruebalo en el servidor.
Bien, eso es todo por ahora, con el tiempo seguiremos aprendiendo mas sobre las API de youtube.

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate