Share
En el presente tutorial vamos a crear una aplicación web simple para manejar la manipulación de video para la web, subiremos un archivo de video a la nube y realizaremos transcodificaciones y transformaciones en vivo sobre la marcha para crear un archivo de video personalizado para transmitirlo. cualquier dispositivo. Para ello vamos a utilizar el servicio Cloudinary para almacenar, transcodificar, transformar y transmitir videos utilizando en este caso el complemento jQuery disponible..
“¿Estás desarrollando una aplicación web o móvil? Cloudinary es la forma en que debe administrar sus imágenes ”. Este es un extracto tomado de la página Acerca de del sitio web de Cloudinary. Y en este tutorial, mediante el uso de ejemplos reales y comparaciones antes / después, descubriremos que esto no solo es cierto para las imágenes, sino también para los videos..
En este tutorial crearemos una herramienta para cargar y transformar videos usando la URL del archivo cargado. Solo vamos a desarrollar la parte de JavaScript para cargar y transformar los archivos de video. Descargue el código adjunto para seguirlo..
Creo que podemos aceptar de manera segura que las imágenes y los videos tienen un gran impacto en la vida actual, y además de la molestia de manejar el almacenamiento y la entrega, los desarrolladores tenemos que lidiar con una gran cantidad de gastos generales, por ejemplo, para mostrar un video en un sitio web o móvil dispositivo. Tenemos que tener en cuenta el tamaño y el formato del archivo, ya sea que debamos transmitir o descargar, la optimización de archivos y muchos otros aspectos, y esta lista sigue y sigue cuando agregamos nuevos objetivos y archivos..
Sí, la multimedia juega un papel muy importante en las aplicaciones de hoy en día, ya sean basadas en la web o móviles, pero este no debería ser el caso en el tiempo de desarrollo. Al crear una nueva aplicación, debemos poder enfocarnos en su propósito, y no perder tiempo con la molestia de almacenamiento y optimización de archivos multimedia. Y aquí es precisamente donde Cloudinary viene al rescate..
Cloudinary es un SaaS (software como servicio) que maneja todas las tareas relacionadas con la manipulación de imágenes y videos, como carga, almacenamiento, optimización, entrega e incluso brinda muchas otras características como transformación de imagen, recorte, escalado y detección de rostros. . Y todas las transformaciones y transcodificaciones se realizan en tiempo real y sobre la marcha. Cloudinary utiliza Amazon S3 para el almacenamiento de archivos y se integra con las principales redes de entrega de contenido, como Akamai, para ofrecer una entrega muy eficiente.
Para seguir adelante, necesitará una cuenta de Cloudinary para cargar archivos de video y realizar transformaciones, seguir adelante y crear una cuenta gratuita.
Pero eso es suficiente chit chat: ensuciémonos las manos y mostremos algunos ejemplos reales de lo que podemos hacer.
En cualquier aplicación que use imágenes y videos para involucrar a los usuarios, la primera tarea que tenemos que cuidar es la carga de archivos. Para seguir el tutorial, crea una cuenta gratuita..
Para cargar archivos en una cuenta de Cloudinary, las solicitudes deben tener una firma de solicitud basada en su clave API y su secreto. Sin embargo, hay casos en los que es necesario admitir la carga de archivos directamente desde el navegador, sin tener que enviar los datos al back-end para firmar la solicitud y cargar los archivos, y aquí es donde Subida directa sin firmar tiene lugar.
Para habilitarlo, en su Consola de cuenta navegar a Ajustes> Cargar.
En la parte inferior de la página encontrarás un Cargar presets ajuste y el Habilitar carga sin firmar opción. Necesitamos seleccionarlo para que nuestra aplicación pueda cargar archivos sin tener que firmar las solicitudes. Esto creará un nuevo ajuste preestablecido de carga para el cual las cargas sin firmar están habilitadas. Tome nota del nombre predefinido ya que lo usaremos en un momento.
Eso es todo por la parte de configuración. A continuación, vamos a realizar la carga real del archivo, y para ello usaremos el complemento jQuery de Cloudinary. Ve a la página de descargas y descárgala..
Para que funcione, también debemos tener jQuery, y para las cargas directas del navegador también necesitamos algunas dependencias del complemento de carga de archivos de jQuery. Estas dependencias ya vienen con el plugin Cloudinary..
Para cargar un archivo directamente desde el navegador, lo único que debe hacer es habilitar Cloudinary en el campo de entrada del archivo, como así.
Accentsconagua
$ ('.upload-file') .unsigned_cloudinary_upload ('UPLOAD_PRESET', cloud_name: 'CLOUD_NAME', etiquetas: 'UPLOAD_TAGS'); los UPLOAD_PRESET parámetro es el nombre del preset en el que el Subidas directas sin firmar Están habilitados, el creado en el paso anterior. El nombre de la nube es un nombre asignado a todos los usuarios en el sistema Cloudinary. Esto se obtiene al crear una cuenta y se muestra en el panel del usuario. Por último, el campo de etiquetas es opcional, y puede establecer una etiqueta especial para indicar que un archivo se cargó directamente desde el navegador.
Después de cargar un archivo de video, ahora necesitamos transmitirlo a nuestros usuarios. El servicio se encargará de optimizar y almacenar en caché el archivo para una entrega rápida. En nuestro método de controlador, agregue un par de titulares para almacenar la fuente, el nombre y la ruta completa del video cargado.
var public_id = ";
Luego, para mostrar nuestra vista previa de video una vez que se haya cargado el archivo, vamos a vincular un detector de eventos a la unsigned_cloudinary_upload llamada. Después del paréntesis de cierre, agregue el siguiente código.
.bind ('cloudinarydone', function (e, data) public_id = data.result.public_id; $ ('.video-title') .html (data.result.original_filename); loadVideo ();); Por último tenemos que definir la cargar video Método que se encargará de configurar la fuente de la etiqueta de video HTML5 y volver a cargarla. Dentro de la función del controlador, definir una nueva cargar video método:
loadVideo = function () $ ('# video-container') .html ($ ($ .cloudinary.video (public_id, cloud_name: 'CLOUD_NAME')) .attr ('controles', 'controles') .attr ('reproducción automática', 'reproducción automática')); ; Aquí estamos usando el complemento jQuery de Cloudinary para crear la etiqueta de video del video cargado, una vez que se crea el elemento HTML, agregamos el controles y auto-reproducción parámetros y finalmente agregarlo a la contenedor de video elemento. Tenga en cuenta que también tenemos que configurar el nombre de nube utilizado para subir el video.
Cuando se carga, Cloudinary transforma y transfiere automáticamente todos los videos subidos a MP4, WebM y OGV requeridos por los navegadores web y móviles, y también a FLV para flash..
Podríamos dejarlo así y funcionará, pero voy a presentar algunas transformaciones de la interfaz de usuario para dar una retroalimentación sobre lo que está sucediendo y establecer algunas señales de ayuda para las transformaciones posteriores. Dentro de cloudinarydone devolución de llamada, debajo de cargar video Método de llamada, agregue el siguiente código.
$ ('.help-block', $ ('# upload-file') .parent ()) .hide (); $ ('.help-block', $ ('# video-width') .parent ()) .html ('Max:' + data.result.width); $ ('.help-block', $ ('# video-height') .parent ()) .html ('Max:' + data.result.height); $ ('# transform-controls') .slideDown (); Aquí solo estamos configurando algunas cadenas de ayuda para indicar el tamaño del video cargado como referencia. Luego estamos mostrando el formulario con los controles de transformación de video..
Por último, quiero presentar un mensaje que indica que hay una carga de video en curso. Al cierre del paréntesis de la cloudinarydone carpeta de eventos, agregue el siguiente código.
.bind ('cloudinarystart', function (e, data) $ ('.help-block', $ ('# upload-file') .parent ()) .show (). html ('Uarga ...'); $ ('# transform-controls') .hide ();); Este fragmento solo le da al usuario una pequeña retroalimentación de lo que está sucediendo detrás de la escena y oculta los controles de transformación de video.
Hasta ahora todo bien, podemos subir videos y mostrarlos en el navegador con solo un par de líneas de código. Pero ahora, para la verdadera diversión, comencemos a hacer transformaciones en nuestros archivos de video simplemente modificando la URL que usamos para cargarla..
Las transformaciones más básicas que podemos realizar con los archivos de video subidos son cambiar el ancho y la altura y personalizar cómo se debe realizar el recorte..
Hay cinco parámetros que controlan cómo se redimensionará y recortará un archivo de video:
Esos son los parámetros utilizados para cambiar el tamaño de un archivo de video. Para mayor explicación sobre cada una, refiérase a la documentación oficial..
Hay dos formas en que Cloudinary realiza transformaciones: perezosamente y con entusiasmo..
Una transformación lenta se aplica sobre la marcha cuando se solicita un archivo cargado. La primera vez que se accede a un archivo transformado, se realiza la transformación y el archivo resultante se almacenará en caché para su uso futuro.
Una transformación impaciente se aplica cuando las transformaciones se aplican al archivo a medida que se carga, de modo que cuando haya terminado de cargar, la versión transformada estará disponible de inmediato..
Como nota especial aquí, cuando aplica una transformación perezosa por primera vez, el archivo se transmite a medida que se produce la transformación, por lo que en el caso de un archivo de video, comienza a reproducirse de inmediato mientras la transformación se realiza sobre la marcha.
Hay una API y varios SDK para acceder a todas las capacidades de Cloudinary, en este ejemplo vamos a utilizar el complemento jQuery para las transformaciones de video.
Entonces, ahora implementemos la funcionalidad necesaria en nuestra aplicación para realizar y mostrar las transformaciones de nuestros videos. Lo primero que debe hacer es crear un nuevo soporte en nuestro controlador para el objeto de transformaciones. En la parte superior de la declaración de variables, agregue el siguiente código:
var transform = cloud_name: 'CLOUD_NAME';
Aquí estamos configurando el nombre de nube atribuir a un transformar Objeto para configurar el resto de los parámetros de transformación..
En el loadVideo () método, tenemos que reemplazar el $ .cloudinary.video segundo parámetro con el nuevo transformar objeto.
$ ('# video-container') .html ($ ($ .cloudinary.video (public_id, transform)) .attr ('controles', 'controls') .attr ('autoplay', 'autoplay')); Esa es toda la preparación que necesitamos para cambiar el tamaño de nuestros archivos de video. Si verifica el marcado HTML, observará que el formulario que contiene los campos de transformación invoca un método de alcance cuando se envía. Ahora vamos a declarar ese método, así que en la parte inferior del controlador agregue el siguiente código:
$ scope.update = function () var width = $ ('# video-width') .val (), height = $ ('# video-height') .val (), crop = $ ('input [nombre = recortar]: marcado ') .val (), gravedad = $ (' entrada [nombre = gravedad]: marcado ') .val (), fondo = $ (' # video-background ') .val (); transform.crop = cultivo; if (ancho) transform.width = ancho; if (altura) transform.height = altura; if (gravedad) transform.gravity = gravedad; if (fondo) transform.background = fondo; loadVideo (); ; Este método es algo largo, pero lo que hace es crear recuperar los parámetros de transformación introducidos en el formulario de transformaciones y establecer los parámetros apropiados en el anterior transformar objeto.
Cuando actualizamos el video usando el formulario de transformación, el cargar video El método se ejecutará con el nuevo objeto de transformación. Y el video será actualizado..
Antes de continuar con las próximas transformaciones, debemos asegurarnos de restablecer la transformar objeto para cada archivo cargado, dentro de la inicio de nube devolución de llamada, agregue el siguiente código.
transform = cloud_name: 'CLOUD_NAME';
Aquí solo estamos restableciendo el transformar objetar el estado inicial con sólo el nombre de nube conjunto de parámetros.
Otra transformación que se puede realizar es rotar el video transmitido. Al igual que con las transformaciones de redimensionamiento y recorte, podemos usar uno de los SDK o complementos disponibles, o podemos usar la URL para establecer los parámetros de rotación. Para el complemento jQuery, el parámetro para rotar el video generado es ángulo.
Una vez más tenemos que configurar el parámetro de rotación para transformar objeto, dentro de la actualizar Declaración de método, justo antes de la cargar video Llama a agregar el siguiente código.
var angle = $ (# video-angle) .val (); if (angle) transform.angle = angle;
Con este último fragmento de código, ahora podemos realizar una rotación de nuestros videos utilizando los controles de transformación, por lo que deberíamos rotar un video y cambiar su tamaño como se muestra a continuación..
Hay muchas otras transformaciones que se pueden aplicar a los archivos de video, incluyendo la transcodificación de video, la manipulación de audio, la adición de superposición y la transformación GIF. Para obtener una lista completa de los parámetros disponibles, consulte la documentación oficial.
Nos complacerá darle a un lector afortunado, elegido al azar, cuatro meses gratis para cualquiera de nuestros planes listos para usar (puede ver nuestros planes aquí.
Simplemente envíe un enlace a esta publicación mediante el botón de Twitter que se encuentra en la barra lateral..
Una vez que finalice el concurso, Cloudinary se pondrá en contacto con un afortunado ganador al azar y hará un seguimiento con usted para reclamar su premio..
En este tutorial realizamos la carga y transformación de videos utilizando jQuery, pero también hay muchos otros SDK para integrar fácilmente cualquier aplicación con el servicio Cloudinary. Y toda la transcodificación y las transformaciones se realizan en la nube sin requerir ningún software adicional, lo que hace que el servicio sea una solución realmente viable y simple para la manipulación de medios en aplicaciones móviles y web. Para obtener una lista completa de todos los SDK y complementos disponibles, consulte la documentación oficial.
Con Cloudinary podemos manejar imágenes y videos de manera muy fácil y confiable. Se encargará de manejar todo el almacenamiento, la optimización, la transformación, el almacenamiento en caché y la entrega..
Todas las transformaciones y manipulaciones realizadas en el tutorial también pueden realizarse utilizando cualquiera de los SDK y complementos disponibles..
Deje sus comentarios, preguntas, pensamientos y sugerencias en la sección de comentarios a continuación..
