10 trucos de medios asombrosos que pueden haber sido hechos por Cloudinary


Cloudinary es mi punto de contacto para la transformación y optimización de medios antes de la entrega. Simplemente cambiando la URL de una imagen o video, puede personalizar su tamaño, presentación, filtrado similar a Instagram y varios otros aspectos. Anteriormente compartí sobre los 10 grandes trucos y mejoras de imágenes realizados con Cloudinary. Aquí, voy a cubrir 10 grandes transformaciones de video más, junto con una función de presentación de diapositivas de video adicional (consulte la sección a continuación), que puede renderizar en esta plataforma.

Fantásticas transformaciones de video

Ahora déjame mostrarte el espectacular cambio de imagen que puedes hacer a los videos con Cloudinary.

avance

Una de mis funciones favoritas en los sitios de videos, como YouTube, es la miniatura, que brinda una vista previa animada cuando pasas el mouse sobre el mouse. Esta vista previa no solo es útil, sino que todos la esperábamos. Después de subir un video a Cloudinary, puede usar la API de Cloudinary para obtener una vista previa agregando e_preview:duration_{x} a la url. Por ejemplo:

https://res.cloudinary.com/demo/video/upload/e_preview:duration_5/elephants.mp4

Aún mejor, puede especificar la salida como un archivo GIF o de video.

subtitular

Los subtítulos son fundamentales para la accesibilidad. Sin embargo, agregarlo a los videos es difícil. Ya no: la API Cloudinary Video puede Generar subtítulos. Esto es lo que haces:

cloudinary.v2.uploader.upload("my_video.mp4",
   { resource_type: "video", public_id: "lincoln", 
    notification_url: "https://requestb.in/abcd123yz", 
    raw_convert: "google_speech" },
    function(error, result) { console.log(result); });

¡Voila! El video ahora incluye subtítulos que son fácilmente accesibles para las personas con discapacidad auditiva.

Galeria de productos

Cloudinary ofrece una solución práctica, ya que la integración de medios en complementos descargados de sitios web aleatorios a veces puede ser una tarea desalentadora: un widget de galería de productos basado en JavaScript.

Ver la pluma GRJpjRJ por David Walsh (@ala oscura) en CodePen.

De forma predeterminada, las miniaturas se alinean en un lado del área principal. Sin embargo, puede ajustar su posición y hacer que el área principal albergue una imagen, un video o un modelo 3D. Mira esto demostraciones increíbles.

Vídeos verticales

Tradicionalmente, el video se graba horizontalmente. A medida que más creadores de contenido toman fotos con sus teléfonos, los videos verticales se han vuelto más populares:

Cloudinary puede reconocer y mostrar de forma inteligente videos verticales que funcionan bien con todas las demás funciones, como el recorte inteligente y la galería de productos.

Transmisión de velocidad de bits adaptable

Para reducir el tiempo de carga y mejorar la experiencia del usuario, la versión de escritorio de los sitios web no se sirve en dispositivos móviles. ¿Por qué no publicar videos con los mismos objetivos? Cloudinary’s transmisión de velocidad de bits adaptativa para los formatos HLS y MPEG DASH depende de la conexión de su usuario. Todo lo que tienes que hacer es agregar eso sourceTypes Parámetros como sigue:

player.source('oceans', { 
    sourceTypes: ['hls'], 
    transformation: {
        streaming_profile: 'hd',
        effect: 'vignette:50'
    } 
})

Superposiciones dinámicas

Agregar superposiciones (también conocidas como marcas de agua) a los medios es una práctica tan antigua como Internet. Has trabajado duro para los medios, te mereces un reconocimiento. Con Cloudinary, puede Superposición de imágenes y videos. Un ejemplo:

https://res.cloudinary.com/demo/video/upload/l_sponsor_icon,so_6.5,eo_10,o_50,e_brightness:200/dog.mp4

Un caso de uso excelente es mostrar el logotipo del patrocinador sobre un video. Si el patrocinador cambia, simplemente edite el archivo de superposición mediante programación y Cloudinary actualizará todos sus videos. Eso ahorra mucho tiempo.

Compresión de video basada en contenido

La nueva calidad automática de Cloudinary parámetro puede analizar y optimizar videos de manera inteligente para garantizar el mejor compromiso entre el tamaño del archivo y la calidad visual, al tiempo que garantiza una experiencia uniforme. Simplemente establezca el parámetro de calidad en auto (q_auto en URL) y Cloudinary se encargará del resto.

Como una ilustracion:

Transcodificación de video automática

Con transcodificación automática de videoCloudinary ofrece el video óptimo basado en códec en el navegador del usuario. Añadir f_auto a la URL desencadena la magia:

https://res.cloudinary.com/demo/video/upload/f_auto/kitten_play.mp4

Recorte de video con reconocimiento de contenido

Recortar videos manualmente es una molestia y una molestia … a menos que permita que Cloudinary lo haga a través de AI en un consciente del contenido Sabio. Simplemente agregue el parámetro apropiado a la URL, p. Ej.

https://res.cloudinary.com/demo/video/upload/w_300,c_fill,g_auto,ar_1:1/ship.mp4

Reproductor de video

Por último, si bien no menos importante, El reproductor de video Cloudinary es un sueño: fácil de incrustar, fácil de integrar con videos y totalmente personalizable. Aquí está el código para agregar al tuyo .html Archivo:

<iframe
  src="https://player.cloudinary.com/embed/?cloud_name=demo&public_id=elephants&fluid=true&controls=true&colors%5Bbase%5D=%230071ba&colors%5Baccent%5D=%23db8226"
  width="640"
  height="480"
  allow="autoplay; fullscreen; encrypted-media; picture-in-picture"
  allowfullscreen
  frameborder="0"
></iframe>

En particular, puede personalizar todo, desde el color hasta la visualización de los controles en una interfaz intuitiva:

Lo he estado diciendo durante años: Cloudinary es genial. La conveniencia y facilidad de cambiar imágenes y videos editando una URL (o programáticamente si lo prefiere) no tiene precio.