Utilizamos cookies propias y de terceros. [Más información sobre las cookies].
Política de cookies
Proyecto AjpdSoft

· Inicio
· Buscar
· Contactar
· Cookies
· Descargas
· Foros
· Historia
· Nosotros
· Temas
· Top 10
· Trucos
· Tutoriales
· Wiki

Programación: Insertar un video en una web para que se reproduzca directamente streaming
Programación páginas web ASP, PHP, Java


Os explicamos paso a paso y con capturas de pantalla cómo colocar un video en una web para que se reproduzca directamente (sin necesidad de descargarlo y posteriormente reproducirlo). Para ello utilizaremos la tecnología de streaming con el formato FLV (Flash Video) y Macromedia Dreamweaver.



Insertar un video en una web para que se reproduzca directamente (streaming)

Insertar un video en una web para que se reproduzca directamente (streaming)

Hay varias formas de reproducir un video en streaming en una web. Una de ellas es disponer de un servidor de streaming, obligando al usuario que navega y accede a nuestra web, a tener instalado algún software que permita reproducir streaming. Esto puede ser un problema, pues la gran parte de los usuarios, ante este problema no volverán a la web y perderemos la visita. La otra forma de reproducir video en streaming (directamente desde la web) es utilizar Macromedia Flash Video Encoder y FLV. Con este sistema también necesitaremos tener instalado el plugin de Macromedia Flash, pero con la ventaja de que la gran parte de los equipos de la red ya lo tienen instalado y, además, viene preinstalado en la mayoría de los navegadores. Con lo que conseguiremos que el usuario no tenga que instalar nada para que el video de nuestra web se reproduzca de forma automática y directa (desde el propio navegador, dentro de nuestra página, aparecerá un mini reproductor).

El streaming es una tecnología que nos permite escuchar y ver archivos de audio y video a la vez que se van descargando, con lo cual no habrá que esperar a que el video/audio se haya descargado por completo para reproducirlo. Cuando nuestro navegador detecta un archivo con esta tecnología (streaming), comienza a descargarlo y va creando un búfer/buffer (ubicación de la memoria en un PC reservada para el almacenamiento temporal de información), una vez que este búfer contenga una parte de la información mínima necesaria (suele ser muy pequeña, unos segundos), empezará a reproducir el video/audio a la vez que continúa descargando la siguiente parte y así sucesivamente hasta finalizar. Con lo cual el aspecto final para el usuario es que el video se reproduce directamente desde la web. Lógicamente esto no es real pues el video va descargándose poco a poco en el equipo del usuario, aunque éste no lo percibe así.

Tras la teoría, os explicamos a continuación cómo añadir el video FLV a nuestra web. En primer lugar necesitaremos disponer de Macromedia Flash Video Encoder y Macromedia Dreamweaver. Ambas aplicaciones vienen con el paquete Macromedia MX que suele incluir: Macromedia Flash, Macromedia Dreamweaver, Macromedia Extension Manager, Macromedia Flash Video Encoder.

Tras instalar Macromedia MX, empezaremos utilizando Macromedia Flash Video Encoder para convertir nuestro video avi al formato FLV (Flash Video). FLV es un formato de archivo video comprimido con el códec de video Sorenson Spark (codificador/decodificador de vídeo de alta calidad que disminuye enormemente el ancho de banda necesario para publicar imágenes en Flash y al mismo tiempo, aumenta la calidad de vídeo.

Así pues abriremos Macromedia Flash Video Encoder, pulsaremos en el botón "Añadir" para seleccionar el video a convertir a FLV:

Flash 8 Video Encoder

Seleccionaremos el video a convertir y pulsaremos "Abrir":

Selección de vídeo a convertir - Flash 8 Video Encoder

Para configurar las opciones de codificación del video pulsaremos en "Configuración":

Vídeos a convertir a FLV en Flash 8 Video Encoder

Podremos seleccionar opciones como: calidad de salida del video (ajustada a la velocidad de descarga que seleccionemos), el códec de vídeo (Sorenson Spark, On2 VP6), velocidad de los fotogramas, tamaño del video, códec de audio, etc:

Ventana de configuración de codificación de Flash Video - Flash 8 Video Encoder

Tras configurar el fichero de salida FLV pulsaremos en "Iniciar cola" para iniciar la codificación del archivo avi a FLV:

Preparando la configuración para iniciar el proceso - Flash 8 Video Encoder

Se iniciará el proceso de codificación, en la parte inferior de la ventana de Flash Video Encoder aparecerá el progreso de la codificación, indicando el tiempo transcurrido, el tiempo restante, los datos de configuración básicos elegidos, he incluso podremos ver una previsualización del video conforme se va codificando:

Realizando el proceso de conversión - Flash 8 Video Encoder

Cuando finalice el proceso mostrará una ventana como esta:

Finalización del proceso de conversión a FLV - Flash 8 Video Encoder

y habrá creado un fichero con el mismo nombre que el elegido (.avi) con con extensión .flv. En nuestro caso hemos codificado un video de 1GB de tamaño, dejándolo en 32MB (el resultante FLV) y lo sorprendente es que la calidad de la visualización es muy buena. Con lo cual se trata de un códec que comprime bastante dejando un video resultante con buena calidad.

Tras generar el fichero .flv, abriremos Macromedia Dreanwaver para insertar en un fichero .html el video generado. Para ello abriremos o crearemos un nuevo documento HTML, a continuación seleccionaremos el menú "Archivo" - "Nuevo":

Nuevo fichero - Macromedia Dreamweaver

Seleccionaremos "Página básica" y "HTML":

Selección de tipo de documento nuevo - Macromedia Dreamweaver

Tras diseñar la web a nuestra medida, insertaremos el video desde el menú "Insertar" - "Media" - "Flash Video":

Inserción de Flash Video - Macromedia Dreamweaver

Si aún no hemos guardado el fichero .html Dreamweaver nos mostrará un mensaje como el siguiente. Pulsaremos Sí para guardarlo ahora:

Confirmación para guardar fichero - Macromedia Dreamweaver

Guardaremos el fichero HTML en la carpeta y con el nombre que deseemos:

Guardar fichero como - Macromedia Dreamweaver

Volveremos a acceder al menú "Insertar" - "Media" - "Flash Video":

Inserción de Flash Video - Macromedia Dreamweaver

En "Tipo de video" seleccionaremos "Progressive Download Video", en "Vínculo" seleccionaremos el fichero .flv generado anteriormente. Podremos indicar la aparencia de la barra de navegación del video (con los controles habituales de play, pausa, parar, progreso, volumen, etc) en "Aparencia", en nuestro caso hemos seleccionado "Corona Skin 3 (ancho mínimo: 258). También podremos indicar el ancho y alto del recuadro donde se mostrará el video, pulsando el botón "Detectar Tamaño" Macromedia Dreamweaver detectará automáticamente el tamaño del video seleccionado. Podremos modificar otras opciones (reproducción automática al abrir la página web, rebobinado automático al finalizar el video, aviso al usuario para descargar el reproductor de Flash en caso de no tenerlo instalado, etc). Tras configurar todas las opciones pulsaremos "Aceptar":

Ventana de configuración del vídeo a insertar - Macromedia Dreamweaver

Macromedia Dreamweaver habrá creado los siguientes ficheros automáticamente:

Ficheros creados por Macromedia Dreamweaver

        • Clear_Skin_3.swf
        • FLVPlayer_Progressive.swf

Ambos ficheros necesarios para la reproducción del video, se corresponden con los controles y el recuadro de reproducción.

En Dreamweaver nuestro fichero HTML tendrá el siguiente aspecto. Seleccionando el recuadro del video podremos configurar sus propiedades:

Aspecto del fichero HTML con el vídeo insertado - Macromedia Dreamweaver

Guardando los cambios y realizando una vista previa en el navegador de Internet (pulsando F12) obtendremos este resultado:

Vista previa en el navegador de Internet del fichero creado con Dreamweaver

Pulsando en "Play" se iniciará la reproducción del video directamente en la página web realizada, sin necesidad de reproductores externos instalados y sin necesidad de esperar a que el video se descargue completamente:

Vista previa en el navegador de Internet del fichero creado con Dreamweaver

Obviamente, para probar de forma correcta el fichero creado deberemos subir los ficheros resultantes al servidor FTP que tengamos para alojar nuestra web.

 

Nota: en realidad, para ser más exactos, la tecnología empleada por el plugin de Macromedia Flash para la reproducción continua del video es Progressive Download Video.

ANEXO

A continuación os mostramos el código HTML generado de forma automática por Macromedia Dreamweaver para la reproducción del video FLV:

 

function MM_CheckFlashVersion(reqVerStr,msg){
  with(navigator){
    var isIE  = (appVersion.indexOf("MSIE") != -1 && userAgent.indexOf("Opera") == -1);
    var isWin = (appVersion.toLowerCase().indexOf("win") != -1);
    if (!isIE || !isWin){  
      var flashVer = -1;
      if (plugins && plugins.length > 0){
        var desc = plugins["Shockwave Flash"] ? plugins["Shockwave Flash"].description : "";
        desc = plugins["Shockwave Flash 2.0"] ? plugins["Shockwave Flash 2.0"].description : desc;
        if (desc == "") flashVer = -1;
        else{
          var descArr = desc.split(" ");
          var tempArrMajor = descArr[2].split(".");
          var verMajor = tempArrMajor[0];
          var tempArrMinor = (descArr[3] != "") ? descArr[3].split("r") : descArr[4].split("r");
          var verMinor = (tempArrMinor[1] > 0) ? tempArrMinor[1] : 0;
          flashVer =  parseFloat(verMajor + "." + verMinor);
        }
      }
      // WebTV has Flash Player 4 or lower -- too low for video
      else if (userAgent.toLowerCase().indexOf("webtv") != -1) flashVer = 4.0;

      var verArr = reqVerStr.split(",");
      var reqVer = parseFloat(verArr[0] + "." + verArr[2]);
  
      if (flashVer XXX_XXX reqVer){
        if (confirm(msg))
          window.location = "xxx";
      }
    }
  } 
}

...

  object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="xxx" width="300" height="246" id="FLVPlayer">
    XXX_XXXparam name="movie" value="FLVPlayer_Progressive.swf" />
    XXX_XXXparam name="salign" value="lt" />
    XXX_XXXparam name="quality" value="high" />
    XXX_XXXparam name="scale" value="noscale" />
    XXX_XXXparam name="FlashVars" value="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=videoweb&autoPlay=false&autoRewind=false" />
    XXX_XXXembed src="FLVPlayer_Progressive.swf" 
         flashvars="&MM_ComponentVersion=1&skinName=Clear_Skin_3&streamName=videoweb&autoPlay=false&autoRewind=false" 
         quality="high" scale="noscale" width="300" height="246" name="FLVPlayer" 
         salign="LT" type="application/x-shockwave-flash" pluginspage="xxx" />

Anuncios


Enviado el Domingo, 05 agosto a las 19:31:36 por ajpdsoft
Visita nuestro nuevo sitio web con programas y contenidos actualizados: Proyecto A