Share
En este tutorial para principiantes e intermedios, te mostraré cómo reproducir video HD sin el inevitable desenfoque que se produce cuando se amplía el video..
La razón de esto es que me estoy cansando un poco de visitar YouTube u otros sitios que presentan video HD con una opción de pantalla completa para descubrir, cuando hago clic en el botón Pantalla completa, que de repente necesito que se cambie la receta de mis gafas.
El problema no es el video, sino cómo Flash Player maneja el proceso de ir a pantalla completa. Averigüemos cómo hacer las cosas. correctamente...
Cuando reproduce un video en Flash Player, el video, para todos los efectos, se coloca en el escenario. Haga clic en el botón de pantalla completa y el escenario se hace más grande. Cuando el escenario se hace más grande, trae consigo el video. Amplíe un video de 720 por 480 a 1280 por 720 y no es de extrañar que el video se vea borroso?
Adobe luchó con este problema cuando estaban introduciendo la capacidad de reproducir video de alta definición completa a través del Flash Player. Su solución, introducida en Flash Player 9.0.115.0, era extremadamente elegante. En lugar de ampliar el escenario, ¿por qué no "desplazar" el vid en un rectángulo "arriba" del escenario y hacer que el diseñador o desarrollador decida si ampliar el escenario o solo una parte del mismo? Esto se logra a través de otra pieza de ingeniería inteligente por parte de Adobe: aceleración y escalamiento de hardware.
La aceleración de hardware se aplica a través de Flash Player. Si hace clic con el botón derecho (PC) o presiona ctrl-clic (Mac) en un swf que se reproduce en una página web, abrirá el menú contextual de Flash Player. Seleccionar Ajustes y aparecerá la ventana de configuración que se muestra en la Imagen 1. Si selecciona Habilitar la aceleración de hardware Usted es capaz de ver video HD de pantalla completa. Si lo deja sin seleccionar, al hacer clic en un botón de pantalla completa, el reproductor utilizará la API de escalado que se usa cuando un archivo FLV se saca a pantalla completa. Lo bueno de esto es que aunque haya seleccionado la aceleración de hardware, solo se usa cuando es necesario. Por lo tanto, cuando se hace clic en un botón de Pantalla completa, solo el rectángulo y sus contenidos, un video en esta instancia, se escalan a pantalla completa y la aceleración del hardware se hace cargo de la reproducción del video..
Después de brindarle información sobre cómo lo hicimos leer este tutorial, siga estos pasos para crear una experiencia de video HD de pantalla completa:
Incluido con la descarga es un archivo .mp4 - Vultures.mp4. Es un clip de una serie de televisión producida por mi Colegio, Instituto de Tecnología y Aprendizaje Avanzado de Humber. Usaremos este archivo para el proyecto, aunque también se pueden usar archivos FLV ff y físicamente grandes..
Es posible que haya escuchado muchos "rumores" sobre el video HD y el formato .mp4 durante los últimos años y se haya preguntado de qué se trata la conversación. Aquí hay un breve "tono de ascensor":
La clave del formato .mp4 es el estándar de video AVC / H.264 introducido en Flash Player en agosto de 2007. El estándar .mp4, para ser precisos, se conoce como MPEG-4, que es un estándar internacional desarrollado por Motion Pictures. Grupo de expertos (MPEG) y el formato también tiene reconocimiento ISO.
Lo que hace que estos archivos sean tan atractivos para los diseñadores y desarrolladores de Flash es que los archivos MPEG-4 no dependen del dispositivo. Se pueden reproducir con la misma facilidad en un televisor HD, iPod o Playstation, así como en un navegador. Además, gracias a la aceleración de hardware y la compatibilidad con subprocesos múltiples incorporados en Flash Player, puede reproducir videos en cualquier resolución y profundidad de bits hasta, incluida la resolución Full HD 1080p que ve en los televisores HD..
El único aspecto del estándar MPEG-4 que me parece bastante intrigante es que, como el formato XFL que se está utilizando en toda la suite CS4, es un formato "contenedor". Lo que significa esto es que los archivos .mp4 pueden almacenar varios tipos de datos en una cantidad de pistas en el archivo. Lo que hace es sincronizar e intercalar los datos, lo que significa que un archivo .mp4 también puede incluir metadatos, ilustraciones, subtítulos, etc., a los que Flash puede acceder. Esa es la buena noticia. La mala noticia es que a pesar de que el contenedor MPEG-4 puede contener varias pistas de audio y video, Flash Player actualmente solo reproduce una de cada una e ignora el resto. La otra mala noticia es que este formato no es compatible con el significado de transparencia. Si desea agregar un canal alfa, volverá al formato FLV..
Finalmente, los archivos H.264 .mp4 requieren una gran capacidad de procesamiento. Adobe ha sido bastante claro al hacernos saber que este contenido se ve mejor en PC y Mac de doble núcleo. El cambio a estos procesadores ha estado en marcha durante un par de años, pero todavía faltan un par de años para que todas las computadoras puedan administrar las demandas de los procesadores que requiere este formato..
Apenas he rozado la superficie de este formato. Si desea realizar una "inmersión profunda" en este formato, consulte H.264 For The Rest Of Us escrito por Kush Amerasinghe en Adobe. Es una excelente guía para aquellos de ustedes nuevos en esta tecnología..
Abre el BigItUp.fla Archivo ubicado en la descarga. Si es la primera vez que trabaja con un archivo H264 o va a pantalla completa, es posible que las dimensiones de la etapa Flash (1050 por 500) sean bastante masivas. Necesitamos el espacio del escenario para acomodar el video que tiene un tamaño físico de 854 x 480 y dejar espacio para el botón en la esquina superior izquierda del escenario.
Agregue el siguiente ActionScript a la capa de acciones:
importar flash.geom. *; importar flash.display.Stage; var mySound: SoundTransform; var myVideo: Video; var nc: NetConnection = new NetConnection (); nc.connect (nulo); var ns: NetStream = nuevo NetStream (nc); ns.client = esto; btnBig.buttonMode = true;
Comenzamos trayendo el paquete de geometría y la clase de escenario para llevar el video "flotando" a pantalla completa. Las siguientes dos variables, mySound y myVideo, se utilizarán para establecer el nivel de volumen del audio y para crear un objeto de video..
Con ese servicio de limpieza fuera de la forma en que configuramos el NetConnection y NetStream Objetos que permitirán reproducir el video. La línea final coloca el clip de película utilizado para llevar el video a pantalla completa a buttonMode.
Agregue el siguiente código ActionScript:
Accentsconagua
ns.addEventListener (NetStatusEvent.NET_STATUS, netStatusHandler); function netStatusHandler (evt: NetStatusEvent): void if (evt.info.code == "NetStream.FileStructureInvalid") trace ("La estructura de archivos de la MP4 no es válida."); else if (evt.info.code == "NetStream.NoSupportedTrackFound") trace ("El MP4 no contiene ninguna pista compatible"); funcion onMetaData (md: Object): void myVideo.width = md.width; myVideo.height = md.height; La primera función nos permite hacer algunas comprobaciones de errores. No todos los archivos mp4 se crean por igual y si el video no se reproduce, sería bueno saber cuál podría ser el problema. En este caso, vamos a escuchar un par de mensajes de error de la clase NetStream que están relacionados con los archivos mp4. La primera es una verificación para asegurarse de que el archivo no esté dañado o que el formato no sea compatible. El hecho de que un archivo se reproduzca en el reproductor Quicktime no significa que se reproducirá en Flash.
El siguiente se asegura de que las pistas de audio y video sean compatibles. Por ejemplo, si la codificación H.264 no se usa en la pista de video o la codificación AAC no se aplica a la pista de audio, tendrá problemas..
La siguiente función entra en los metadatos del archivo de video para obtener los valores de ancho y alto para el objeto de video.
Ingrese el siguiente código ActionScript:
function goFullScreen (evt: Object): void var scalingRect: Rectangle = new Rectangle (myVideo.x, myVideo.y, myVideo.width, myVideo.height); stage ["fullScreenSourceRect"] = scalingRect; if (stage.displayState == StageDisplayState.NORMAL) stage.displayState = StageDisplayState.FULL_SCREEN; else stage.displayState = StageDisplayState.NORMAL; ; btnBig.addEventListener (MouseEvent.CLICK, goFullScreen);<
Aquí es donde ocurre la "magia". Esta función crea el rectángulo que se usa para mantener el video y su tamaño se establece para que coincida con las dimensiones del Objeto de video extraídas de la segunda función en el bloque de código anterior. La siguiente línea establece el fullScreenSourceRect Propiedad del escenario a las dimensiones del rectángulo recién creado..
La declaración condicional que constituye el resto del bloque de código verifica el estado actual del tamaño de la etapa de normal a pantalla completa o viceversa. Así es como el video pasa a pantalla completa. El objeto de video se coloca en esta fuente, no en el escenario, lo que significa que puede expandirse o contraerse sin que el escenario haga lo mismo y "confunda" el video.
La última línea usa el botón en el escenario para ir a pantalla completa..
Ingrese el siguiente código ActionScript:
myVideo = nuevo video (); myVideo.x = 185; myVideo.y = 5; addChild (myVideo); myVideo.attachNetStream (ns); ns.play ("Vultures.mp4"); mySound = ns.soundTransform; mySound.volume = .8; ns.soundTransform = mySound; El primer bloque de código le dice a Flash que la variable "myVideo" es el nombre de un objeto de video que se encuentra a 185 píxeles del borde izquierdo del enorme escenario y está a 5 píxeles de la parte superior. los addChild () El método coloca el objeto de video en el escenario y las dos líneas restantes conectan el objeto de video al NetStream y comienza a reproducir el video.
El bloque de código final examina la pista de audio del video que se alimenta al proyecto a través de NetStream y baja el volumen de audio al 80%.
Guarda el archivo en la misma carpeta que el video.
Normalmente, en esta etapa del tutorial también te diría que pruebes el swf. Puedes, pero el botón no funcionará. Lo mejor que puedes esperar es ver el video reproducido en el archivo swf. La función de Pantalla completa está controlada por el contenedor HTML de su archivo swf, no Flash. Vamos a tratar con eso.
Seleccione Archivo> Configuración de publicación. Cuando se abra el cuadro de diálogo Configuración de publicación, seleccione las opciones SWF y HTML.
Haga clic en la pestaña Flash. Seleccione Flash Player 9 o Flash Player 10 en el menú desplegable Player. Recuerde que el video HD solo se puede reproducir en Flash Player 9 o posterior.
Haga clic en la pestaña HTML. En el menú desplegable Plantilla, seleccione Solo Flash - Permitir pantalla completa.
Haga clic en el botón Publicar para crear el archivo SWF y el archivo HTML.
Guarde el archivo, salga de Flash y abra la página HTML en un navegador. Adelante, haga clic en "Hazlo grande!botón ".
Que hay de eso Los diseñadores y desarrolladores de Real Flash no utilizan componentes "steenking".
En diciembre de 2007, Adobe lanzó silenciosamente la Actualización 3 para Flash Player 9. Utilizo la palabra "silenciosamente" porque mezclado con las correcciones de errores y ajustes habituales, se deslizaron en una versión actualizada del componente FLVPlayback que le permitió reproducir HD vídeo. Así es cómo:
Abra un nuevo documento Flash ActionScript 3.0 y guárdelo en la misma carpeta que el video de Vultures.
Seleccionar Ventana> Componentes y en los componentes Video, arrastre una copia del FLVPlayback componente al escenario.
Abra el inspector de componentes. Necesitas hacer dos cosas aquí. Selecciona el SkinUnderAllNoCaption.swf en el área de la piel, en el área de origen navegue a la Buitres.mp4 archivo y agregarlo al cuadro de diálogo Ruta de contenido. Haga clic en la casilla de verificación coincidir con las dimensiones de origen y haga clic en Aceptar Flash entrará en el video y tomará los metadatos. Cuando eso termine, el cuadro de diálogo se cerrará y el componente aumentará a las dimensiones del video. Cierre el inspector de componentes.
Seleccione Modificar> Documento y haga clic en el Contenido botón para cambiar el tamaño del escenario al tamaño del componente ... más o menos. Cuando el escenario se configura en el tamaño del componente, solo cambia el tamaño del video. La piel quedará colgada de la parte inferior del escenario, lo que significa que no se verá en una página web. Cambie el valor de altura a 525 píxeles para acomodar la piel. Haga clic en Aceptar para aceptar el cambio..
Por supuesto, ahora que ha cambiado las dimensiones del escenario, el componente está colgando del escenario. Seleccione el componente y, en el Panel de propiedades, establezca las coordenadas X e Y en 0.
Seleccione Archivo> Configuración de publicación y elija los tipos de archivo SWF y HTML.
Haga clic en la pestaña Flash y seleccione Flash Player 9.
Haga clic en la pestaña HTML y seleccione Solo Flash - Permitir pantalla completa en el menú emergente Plantillas..
Haga clic en el botón Publicar. Cuando se publiquen el archivo SWF y el archivo HTML, haga clic en Aceptar. Guarde el archivo y salga de Flash.
Abra el archivo HTML en un navegador. Haga clic en el botón Pantalla completa para iniciar el modo Pantalla completa.
En este tutorial, te he mostrado dos formas de entrar sin problemas en el modo de pantalla completa con Flash. El primer método usó ActionScript para hacer esto posible y la clave fue crear un rectángulo que "flotaba" sobre el escenario y se usó para sostener el video..
El segundo ejemplo le mostró cómo usar el componente FLVPlayback para ir a pantalla completa.
Como descubrió, la clave para ambos proyectos no era el ActionScript sino el contenedor HTML que permitía la reproducción a pantalla completa..
Estos tutoriales siempre funcionan localmente, pero estoy seguro de que te estarás preguntando si realmente funcionarán en línea. He publicado ambos para demostrar que "Sí, efectivamente, se puede hacer".
El enfoque del código en el primer ejemplo se puede encontrar aquí. El video es amablemente proporcionado por Adobe y Red Bull y es una producción completa de 1080p.
Los buitres aparecen en un ejemplo que usa el componente aquí..
