Share
Si alguna vez ha querido incluir la transmisión de video en sus diseños, pero no desea molestarse con las soluciones de código desordenado (o Flash), tenemos dos soluciones rápidas y fáciles para usted. Hoy, vamos a echar un vistazo a lo que cada solución ofrece a los diseñadores web y cómo usarlos en sus propios proyectos..
En la superficie, la transmisión de videos a través de una página web no es algo que muchos diseñadores web tengan en mente. Esto es comprensible porque solo esas dos palabras ("Web" y "Video") implican una base de conocimiento que se encuentra mejor en otro lugar del universo de Envato.?
? Pero, ¿qué pasaría si le dijera que agregar video en tiempo real a sus páginas ahora es más fácil que agregar un jpg? Ahora que tengo tu atención? vamos a sumergirnos en las cosas buenas:
Antes de comenzar a guiarlo a través del proceso paso a paso, primero veamos el historial de "transmisión de videos web" desde el punto de vista de los diseñadores web:
Supongamos que está trabajando en un proyecto y que está manejando la codificación básica de front-end. En el pasado, agregar video en tiempo real a nuestros diseños ha sido un proceso bastante complicado, que requiere que usted conozca (y tenga una licencia para) Adobe Flash. Suponiendo que tenga Flash y sepa cómo hacerlo, tendrá que obtener el video en el formato correcto, importarlo a Flash, pasar por el proceso arcaico de configuración del video y luego exportarlo. Finalmente, tendrías que insertarlo correctamente en tu sitio web. Los veteranos de Flash sazonados podrían lograr esto rápidamente, pero para la mayoría de las personas en el diseño, es un dolor de cabeza.
Otra posible solución sería utilizar un servicio como YouTube o Vimeo. Esto está bien para la mayoría de las personas, pero ¿qué pasa con aquellos de nosotros que simplemente queremos mostrar videos en la web? sin ¿La marca u otros extras que sitios como YouTube y Vimeo agregan? Hasta hace poco, realmente no ha habido una solución simple para esto..
Gracias a la promesa de la cortina de humo de video HTML 5, me encontré probando algunas de las nuevas "soluciones de transmisión de video" recientemente. Por supuesto, eso fue precisamente cuando Google llevó a webM a su abrazo amoroso y las cosas se pusieron mucho más complicadas de lo que esperaba. Básicamente, me rendí y me marché con una actitud de "Deja que Dios lo resuelva". Claramente, el debate sobre la transmisión de videos web aún no se resolvió..
Hace unos años escribí un artículo, The Rise of Flash Video, que rastrea un debate similar que comenzó cuando el video llegó a la web y el estándar de Flash Video se afianzó. Una vez más, el quid de la discusión fue: "Tiene que haber una forma más fácil de hacer esto". ¿Adivina qué? Ahora hay.
Durante los últimos años, Adobe ha estado involucrado en el Marco de Medios de Código Abierto. Siempre he encontrado que OSMF es una variedad desconcertante de tecnologías y técnicas que, francamente, hacen que me duelen los dientes. Las tecnologías son realmente geniales, muy vanguardistas y divertidas, pero ¿están dirigidas a los desarrolladores? y si hay una manera de complicar demasiado una solución simple, los codificadores hardcore del mundo la encontrarán. OSMF no es diferente. Si recorre el sitio, realmente no hay muchas soluciones simples y fáciles de usar para que los diseñadores humildes las usemos.
Es solo cuando retrocedes un par de pasos que el objetivo del proyecto OSMF se vuelve claro: "proporcionar experiencias de reproducción de video de alta calidad". Eso significa una carga de video realmente suave, reproductores realmente hábiles y nada de lo que Vimeo y YouTube lanzan. Cuando todo esto se pone realmente interesante para nosotros es que ahora podemos entrar en la diversión y no tendrá que aprender nada nuevo..
En este tutorial les mostraré dos maneras de lograr esto. El primero es "Drop Dead Simple" y el segundo eleva el nivel a "Dead Simple". Para ingresar al juego, todo lo que debe hacer es cargar un video (se adjunta uno con este tutorial para cada solución) a un directorio en un sitio web. Empecemos:
Esta parte es bastante simple: solo cargue un video a su servidor web utilizando un programa FTP o algo similar. Para esta demostración usaremos el archivo "Stockhorn.f4v". Todo lo que necesitas para llegar aquí es la URL de tu video. Mantener está en un lugar donde puede copiar / pegar para el siguiente paso.
Esencialmente este sitio ofrece un reproductor OSMF para las masas. Si desea cargar un archivo mp4, flv o f4v en su página web sin saber un poco de Flash, Actionscript o Flex, este es el lugar para usted. Lo que debe hacer es hacer clic en el botón Configurar Flash Media Playback cerca de la parte inferior de la página. Esto abrirá la página de configuración de reproducción de Flash Media..
Debe ingresar la ruta absoluta al video y la extensión del archivo del video. Los tres formatos utilizados por Flash son flv, f4v y H.264. Si no está seguro de cómo se crean, puede consultar mi serie de Flash Video Basics en active.tutsplus. También debe ingresar los valores de ancho y alto del video; los valores para el video adjunto son 720 X 405. Una vez que lo haya hecho, haga clic en el botón Vista previa en el área de Reproductor de vista previa y su video debería comenzar a reproducirse.
Si está utilizando Dreamweaver, abra la página, seleccione el etiquetas y simplemente pegue el código del reproductor en la vista de Código. Si prueba la página, verá su video reproduciéndose en el navegador. En este punto, solo necesita cargar la página html en el directorio que contiene el video en su sitio..
Esos son los pasos y si te diriges hacia aquí, verás el video en reproducción. Lo único que hice de manera diferente fue incluir un marco de póster. Más sobre eso en la siguiente sección..
Como dije en la parte superior, no voy a ir a "todos los técnicos" aquí, pero hay otra forma que es un poco más complicada de lo que acabo de mostrar que vale la pena mencionar, llamada Strobe Media Playback.
Strobe Media Playback utiliza el mismo enfoque que Flash Media, pero hay mucho más poder bajo el capó. Por ejemplo, puede usar múltiples tasas de bits para detectar conexiones y alimentar el vid adecuado según la velocidad de conexión de los usuarios. Puede personalizar los controles, usarlos para reproducir audio, visualizar archivos jpg y casi cualquier medio que aparezca en un SWF de Flash. En este ejemplo, vamos a adoptar el mismo enfoque de "sin código" como lo hicimos en la solución anterior, pero agregaré un "giro". Si quieres trabajar conmigo, todos los archivos que necesitarás están en la carpeta Strobe en la descarga de este tutorial..
Igual que antes: simplemente cargue un video a su servidor web mediante un programa FTP o algo similar. Para esta parte de la demostración usaremos el archivo "GeorgeSquare.mp4". Todo lo que necesitas para llegar aquí es la URL de tu video. Mantener está en un lugar donde puede copiar / pegar para el siguiente paso.
La versión que desea es Strobe Media Playback 1.5.1 release. Con Strobe, las versiones beta se llaman "Sprints" y el Sprint actual incluye soporte para cosas como la nueva función de Stage Video del Flash Player. Cuando descomprime el archivo, tiene un par de opciones: coloque la carpeta en la raíz del servidor web de su computadora o cárguela en la raíz de su sitio web. Creé un directorio llamado "smp" y cargué todos los archivos a mi servidor web.
Un marco de póster es una gran oportunidad para hacer algo de marca con un video. Si el primer fotograma del video se va a sentar allí y se parece a una imagen, ¿por qué no poner esa imagen a trabajar? En este caso, simplemente abrí un nuevo documento de Fireworks CS5 que coincidía con las dimensiones del video (1280 por 720), reuní los recursos y lo guardé como una imagen .jpg aplanada en la misma carpeta que el video.
Esta carpeta se encuentra en la descarga de Strobe. Cuando se abra, parecerá bastante familiar. La diferencia principal entre este documento y la que encontró con Flash Media Playback es que las opciones son mucho más amplias y que el reproductor es suyo. no uno ubicado en el sitio de Adobe. Cuando se abra la página, verá que hay muchas opciones. Los más importantes, a los efectos de este tutorial son:
Parámetros de inserción:
Flash vars:
Si desea una explicación más completa de esta página y de los Flash Vars, mi colega Joseph Labreque ha publicado una descripción técnica bastante extensa de Strobe Media Playback en active.tutsplus.
Debería ver aparecer el marco de su póster en el reproductor. Si no desea que el gran botón Reproducir sobre el marco del póster, establezca la propiedad playButtonOverlay en Falso en el área de Flash vars.
Cuando el archivo se abre reproducir la película. Lo realmente interesante es que todos los controles están activos, lo que significa que si está utilizando un archivo mp4 HD, su video crecerá para llenar la pantalla con poca o ninguna pixelación..
¡Finalmente! Bienvenido al mundo de la transmisión de videos en Flash sin que necesites saber nada sobre Flash. Haga clic aquí para ver este proyecto en mi sitio.
Como señalé al comienzo de esta pieza, realmente no creo que Flash Video vaya a desaparecer pronto. Sin embargo, con la llegada de un entorno multipantalla, ahora es posible reproducir el mismo video en un Droid, iPhone, Samsung Galaxy Tablet y su televisor HD. Esto obviamente pone a los diseñadores web un poco nerviosos porque? ¿bien? porque la incrustación de video en tiempo pasado ha sido bastante técnica. ¡Ese ya no es el caso! Como señalé en este artículo, si puede copiar y pegar texto en una página web, Adobe tiene un par de soluciones para usted..
Si te parece interesante y realmente quieres profundizar en OSMF o Strobe, deberías comenzar con la serie de Joeseph Labreque que comenzó en activo. tutsplus, ya que entra en muchos más detalles sobre las cuestiones técnicas que rodean el debate del video en streaming.
Accentsconagua