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).
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.
abriremos Macromedia Flash Video Encoder, pulsaremos en el botón "Añadir" para seleccionar el video a convertir a FLV:
Seleccionaremos el video a convertir y pulsaremos "Abrir":
Para configurar las opciones de codificación del video pulsaremos en "Configuración":
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:
Tras configurar el fichero de salida FLV pulsaremos en "Iniciar cola" para iniciar la codificación del archivo avi a FLV:
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:
Cuando finalice el proceso mostrará una ventana como esta
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":
Seleccionaremos "Página básica" y "HTML":
insertaremos el video desde el menú "Insertar" - "Media" - "Flash Video
Si aún no hemos guardado el fichero .html Dreamweaver nos mostrará un mensaje como el siguiente. Pulsaremos Sí para guardarlo ahora
Guardaremos el fichero HTML en la carpeta y con el nombre que deseemos
Volveremos a acceder al menú "Insertar" - "Media" - "Flash Video
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":
Macromedia Dreamweaver habrá creado los siguientes ficheros automáticamente
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
Guardando los cambios y realizando una vista previa en el navegador de Internet (pulsando F12) obtendremos este resultado
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:
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.
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" />
espero que les sea de ayuda para sus pagina
______________
Reglas del Foro
¿Dónde hacer mi tema/post? 
