El futuro del vídeo en el diseño web

 

 

 

  • Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX
  • Creación y mantenimiento de sistemas de diseño exitosos, con Brad Fost

  • Índice
    1. Cuando el vídeo sale de su jaula
    2. ¿Cómo se agrega video a un diseño?
    3. ¿Qué hace Charlie.js?
    4. Definir la API
    5. Aloje los vídeos: HTML5 vs. Destello y luz plateada
    6. Aviso
    7. Controle las animaciones CSS con JavaScript
    8. Obtenga la información de tiempo de los atributos de datos
    9. El bucle requestAnimationFrame
    10. Pause And Resume Animations
    11. How To Start An Animation In The Middle
    12. Mire el código usted mismo
      1. Recursos adicionales

    El vídeo en la Web ha mejorado bastante desde el séptimo grado. Pero en su mayor parte, los videos todavía están separados de la Web, acordonados por iframes y Flash y embotellados en pequeñas ventanas en el centro de la página. Son una oportunidad perdida para los diseñadores web de todo el mundo. Pero, ¿cómo se integra el vídeo en una aplicación o una página de marketing? En este artículo, Sean Fioritto encontrará inspiración, procedimientos y algunos beneficios técnicos para comenzar con los videos modernos en la Web.

     

    Federico era el único otro chico de la cuadra con una línea RDSI dedicada, así que lo llamé. Me tomó seis horas de espera interminable (salpicada de ataques frenéticos de maldiciones), pero acababa de ver 60 segundos entrecortados del comercial de televisión original de Macintosh en Firefox y tenía que decírselo a alguien. Me dejó alucinado.

    El vídeo en la Web ha mejorado bastante desde el primer comercial nervioso de baja resolución que vi en mi Quadra 605 cuando estaba en séptimo grado. Pero en su mayor parte, los videos todavía están separados de la Web , acordonados por iframes y Flash y embotellados en pequeñas ventanas en el centro de la página. Son una oportunidad perdida para los diseñadores web de todo el mundo.

     

    Pero, ¿cómo se integra el vídeo en una aplicación o una página de marketing? ¿Cómo sería y cómo se implementaría? En este artículo, encontrará inspiración, procedimientos y algunas ventajas técnicas que le ayudarán a empezar a utilizar vídeos modernos en la Web.

    Cuando el vídeo sale de su jaula

    El vídeo combinado con animación es una herramienta poderosa para lograr experiencias de usuario innovadoras y atractivas. Imagine screencasts interactivos y tutoriales en los que los elementos DOM fluyen y se mueven por la página en sincronía con el instructor. ¿Por qué no combinar vídeo con animación para guiar a los nuevos usuarios a través de su aplicación? ¿O qué tal incluir vídeos de su producto en su página de marketing, en lugar de archivos JPEG estáticos? Dejarse llevar es fácil: el vídeo puede convertirse en poco más que sofisticadas etiquetas parpadeantes si no se tiene cuidado. Pero hay muchos ejemplos hermosos e inspiradores de videos estrechamente integrados en un diseño.

    La nueva página de marketing de Apple para Mac Pro es un ejemplo sorprendente de vídeo que se extiende desde su jaula hacia el contenido circundante. El nuevo Mac Pro aparece en el centro de la página y, a medida que te desplazas, se lanza en picado, gira y se desmonta solo . La copia de respaldo se desvanece para describir lo que está viendo.

    Una captura de pantalla estática de la nueva página de inicio no le hace justicia al nuevo Mac Pro. ( vista más grande )

    Otro gran ejemplo de vídeo interactivo es Soundslice de Adrian Holovaty . Soundslice está lleno de videos de YouTube de música cortada en tablaturas (o tablaturas), que es la notación que los guitarristas usan para aprender música.

    Las barras musicales en la parte inferior permanecen sincronizadas con el video. ( vista más grande )

    Cuando miras un vídeo musical, las pestañas se animan en la parte inferior al ritmo de la música, para que puedas tocar junto con tu guitarra. Incluso puedes ralentizar el vídeo o las selecciones en bucle para practicar secciones difíciles, y la animación de la pestaña permanecerá sincronizada.

    ¿Cómo se agrega video a un diseño?

    Si incursionas en el video y la animación en tu próximo proyecto, no tendrás muchos recursos en los que apoyarte para su implementación. No existe una biblioteca canónica, fácil de usar y de código abierto para sincronizar vídeo con animación, por lo que cada implementación es un poco diferente. ¿Debería utilizar una biblioteca de animación JavaScript o transiciones y fotogramas clave CSS puros? ¿Debería alojar los vídeos usted mismo y aprovechar los videoeventos de etiquetas de HTML5 o utilizar YouTube o Vimeo? ¿Y entonces cómo se vinculan exactamente las animaciones a un vídeo?

     

    Juntos, exploraremos las respuestas a las preguntas mencionadas anteriormente y más a medida que construyamos nuestro propio marco micro JavaScript. Charlie.js proporciona una API fácil de usar para crear páginas con vídeo sincronizado y animación CSS3.

    Charlie.js, llamado así en honor a Charlie Chaplin. ( Fuente de imagen )

    La mejor manera de aprender es haciendo, así que profundicemos.

    ¿Qué hace Charlie.js?

    Necesitamos una forma de crear animaciones y luego activarlas en determinados momentos de un vídeo. También necesitamos pausar las animaciones si el video se detiene, y necesitaremos una forma de manejar al usuario saltando a diferentes momentos del video.

    Para limitar el alcance de este artículo, haremos que Charlie.js use solo animaciones CSS . Las bibliotecas de animación JavaScript son más flexibles y poderosas que las animaciones CSS, pero comprender la sintaxis declarativa y sencilla de los fotogramas clave es bastante fácil y los efectos se aceleran por hardware. Seguir sólo con animaciones CSS es una muy buena opción para proyectos pequeños.

    Para simplificar, Charlie.js solo admitirá un video por página.

    A medida que avancemos en el ejercicio de crear esta biblioteca, recuerde que estamos usando el marco solo para aprender sobre animación CSS y video en la Web. El objetivo es aprender, no crear código con calidad de producción.

    Definir la API

    Para nuestro pequeño marco, definir primero la API tiene sentido. En otras palabras, necesitamos descubrir cómo alguien usaría la biblioteca y luego escribiría JavaScript para implementar la API.

    Una biblioteca de vídeos y animaciones podría funcionar de muchas maneras, pero el principal problema de la interfaz es descubrir cómo acoplar la animación al vídeo . ¿Cómo debería un desarrollador especificar qué animaciones deberían aparecer, en qué elementos y en qué momentos deberían comenzar en el vídeo?

    Una opción es absorber los datos en JSON o XML. La solución opuesta es no tener archivos de datos separados y poner toda la configuración en llamadas a funciones de JavaScript puro. Ambos están bien, pero hay un camino intermedio.

    Normalmente, la animación CSS se define en una hoja de estilos. Idealmente, ahí es donde debería definirse para Charlie.js, no en un archivo JSON. Simplemente tiene sentido y hacerlo de esta manera tiene ventajas. Cuando la animación está en una hoja de estilos, en lugar de un archivo JavaScript o JSON, puede probarla sin cargar toda la biblioteca de vídeos y animaciones.

    Las animaciones están acopladas a un elemento con atributos de datos. Los atributos de datos definen los nombres de las animaciones y también especifican las horas de inicio.

    Digamos que tienes una animación CSS llamada fadepara reducir la opacidad y otra llamada flingpara mover elementos fuera de la página. Y desea que un div en la página use ambas animaciones tres segundos después del video. Su marcado se vería así:

    div data-animations="fade, fling" data-times="3, 3".../div

    Charlie.js verá esto y sabrá ejecutar las animaciones fadey flinguna vez que el video alcance los tres segundos.

     

    Las animaciones fadey flingse definen en una hoja de estilo que está vinculada al documento.

    Así es como fadese vería la animación (los prefijos del navegador están excluidos aquí, pero son necesarios para Chrome y Safari ):

    .fade { animation-name: fade; animation-duration: 3s; animation-timing-function: linear; animation-iteration-count: 1; animation-direction: normal; animation-fill-mode: forwards;}@keyframes fade { 0% { opacity: 1; } 100% { opacity: 0; }}

    La .fadeclase es lo que Charlie.js aplica al elemento animado, que activará la fadeanimación.

    Aloje los vídeos: HTML5 vs. Destello y luz plateada

    Una vez eliminada la API, la siguiente decisión es cómo alojar el vídeo. El anfitrión determinará en qué tipo de contenedor se colocará el video y el contenedor determinará qué es posible con el video.

    El vídeo incrustado con Flash o Silverlight limitará sus opciones de diseño, por lo que lo ideal es que el servicio de alojamiento de vídeo admita la videoetiqueta HTML5. La videoetiqueta es más fácil de diseñar y mover por la página. Puedes aplicar filtros y transformaciones CSS e incluso usar animación CSS en el vídeo mismo. Además, los eventos multimedia estándar son sólidos y brindan muchos lugares y formas de conectar su código al video. La gran desventaja de la videoetiqueta es la compatibilidad. No funciona en Internet Explorer 8.

    ¿Qué tipos de alojamiento de vídeos debería admitir Charlie.js? Es factible crear una biblioteca que admita múltiples opciones de alojamiento. Por ejemplo, Popcorn.js (una biblioteca increíble para sincronizar contenido con video) admite varias opciones de alojamiento y API. Pero para simplificar, nuestra pequeña biblioteca solo admitirá una videoetiqueta básica . No se admitirá nada que esté en un iframe o contenedor Flash.

    Eso es bueno para Charlie.js, pero ¿qué pasa si no admites navegadores antiguos y tienes que lidiar con un video incluido en un iframe? La mayoría de las empresas de alojamiento de vídeos tienen API decentes. Como mínimo, deberías poder usar esas API para sincronizar tu animación; simplemente te quedarás atrapado trabajando con un objeto Flash incrustado. YouTube y Vimeo son los servicios más populares y ambos ofrecen API completas. Wistia es otra gran opción pero menos conocida.

    Si desea utilizar una videoetiqueta pura pero no desea alojar el video usted mismo, eche un vistazo a Vid.ly. Una vez que subas tu video, Vid.ly lo codificará en cada formato que necesites y te dará una URL universal que puedes usar en tu videoetiqueta, que elegirá automáticamente el tipo de video correcto según el agente de usuario.

    video src="https://vid.ly/4m4e2n?content=video" controls="" preload="none"Your browser does not support the HTML5 video element./video

    Aviso

    El JavaScript en la mayoría de estos fragmentos usa subrayado ; cosas como _.forEachy _.toArrayson funciones de utilidad de esa biblioteca. Underscore fomenta un estilo funcional de programación que puede parecer extraño si nunca lo ha visto antes, pero invertir un poco de tiempo en aprender Underscore puede ahorrarle mucho tiempo y líneas de código. Vale la pena echarle un vistazo. Para este artículo, encontrará comentarios en el código que le informarán lo que está sucediendo y debería ser bastante fácil de entender.

     

    Otra advertencia: el código aquí se ejecutará en la mayoría de los navegadores modernos, pero no se ha hecho ningún intento de hacerlo completamente compatible con todos los navegadores. Si su empresa realmente necesita que la animación CSS se sincronice con el video y se ejecute en casi todos los navegadores, entonces esta biblioteca no lo ayudará. Pero para mi negocio, y quizás para el suyo, admitir solo navegadores modernos está bien. E incluso con esta restricción, todavía vale la pena aprender mucho material aquí.

    Controle las animaciones CSS con JavaScript

    JavaScript es el pegamento entre el vídeo y la animación CSS. No hay forma de acoplar una animación a un vídeo únicamente con CSS. La animación no comienza hasta que se aplica un estilo, y CSS le ofrece un número limitado de formas de activar estilos adicionales (como :hover). Para sincronizar la animación con el video, necesitaremos pausar, detener, reanudar, saltar a la mitad e incluso invertir las animaciones en ejecución.

    Todo esto es posible con JavaScript. Entonces, el primer paso es sacar la animación CSS de la hoja de estilos y colocarla en JavaScript. Cada animación CSS tiene dos partes. La primera parte son los fotogramas clave y las propiedades utilizadas para configurar cómo se comporta la animación, como la duración, la iteración y la dirección. La segunda parte es lo que desencadena la animación. Charlie.js necesitará encontrar ambas partes en las hojas de estilo.

    Lo primero que necesitamos es una función de utilidad para buscar entre las hojas de estilo que están cargadas en la página.

    findRules = function(matches){ //document.stylesheets is not an array by default. // It's a StyleSheetList. toArray converts it to an actual array. var styleSheets = _.toArray(document.styleSheets), rules = []; // forEach iterates through a list, in this case passing //every sheet in styleSheets to the next forEach _.forEach(styleSheets, function(sheet){ //This foreach iterates through each rule in the style sheet //and checks if it passes the matches function. _.forEach(_.toArray(sheet.cssRules), function(rule){ if (matches(rule)){ rules.push(rule); } }); });return rules;}

    La findRulesfunción recorre en iteración cada regla de cada hoja de estilo y devuelve una lista de reglas que coinciden con la función pasada matches. Para obtener todas las reglas de fotogramas clave, pasamos una función que findRulesverifica si la regla es un fotograma clave:

    // A little code to handle prefixed properties var KEYFRAMES_RULE = window.CSSRule.KEYFRAMES_RULE || window.CSSRule.WEBKIT_KEYFRAMES_RULE || window.CSSRule.MOZ_KEYFRAMES_RULE || window.CSSRule.O_KEYFRAMES_RULE || window.CSSRule.MS_KEYFRAMES_RULE, ... var keyframeRules = findRules(function(rule){ return KEYFRAMES_RULE === rule.type; }), ...

    En este punto, tenemos los fotogramas clave en JavaScript, pero aún necesitamos el resto de los estilos de animación que definen la duración, las iteraciones, la dirección, etc. Trucos de los Sims 4

     

    Para encontrar todas estas clases, usamos nuevamente la findRulesfunción para revisar cada regla en cada hoja de estilo. Esta vez, sin embargo, la matchesfunción que pasaremos verificará si la regla tiene una animationNamepropiedad.

     ... var animationStyleRules = findRules(function(rule){ return rule.style rule.style[animationName(rule.style)]; }); ...

    La animationsNamefunción está ahí para manejar los prefijos, porque la animationNamepropiedad todavía requiere prefijos en algunos navegadores. Esa función se ve así:

    ...if (style.animationName) { name = "animationName"; }else if (style.webkitAnimationName) { name = "webkitAnimationName"; }else if (style.mozAnimationName) { name = "mozAnimationName"; }else if (style.oAnimationName) { name="oAnimationName"; }else if (style.msAnimationName) { name = "msAnimationName"; }else { name = "";}return name;...

    Una vez que se ha determinado el prefijo correcto, el nombre se almacena en caché y se utiliza para búsquedas futuras.

    Una vez que se han recopilado los fotogramas clave y los estilos de animación, se colocan en una instancia de una clase auxiliar y se almacenan para que Charlie.js los use más adelante.

    var CSSAnimations = function(keyframes, cssRules){ this.keyframes = keyframes; this.cssRules = cssRules;};

    Obtenga la información de tiempo de los atributos de datos

    La información de tiempo se adjunta al elemento que se animará mediante un atributo de datos (recuerde que esto lo decidimos cuando estábamos definiendo la API). Entonces, necesitamos rastrear el documento y extraer la información. Cualquier elemento que será animado está marcado con la clase de charlie, lo que hace que sea bastante fácil encontrar los atributos de datos que estamos buscando.

    var scrapeAnimationData = function() { /* Grab the data from the DOM. */ var data = {}; _.forEach( //loop through every element that should be animated document.getElementsByClassName("charlie"), //for each element, pull off the info from the dataset function(element) { /* * Creates an object of animation name: time, e.g. * * { swoopy: [ * { element: domElement, * time: 6522 }, * { element: anotherElement, * time: 7834 }] * } */ // var names = element.dataset.animations.split(/s*,s*/), times = element.dataset.times.split(/s*,s*/), // creates an array of arrays, each one called a "tuple" // basically ties the time to the // animation name, so it looks like this: //[["zippy", 1], ["fade", 2] ... ] tuples = _.zip(names, times); /* * turn the tuples into an object, * which is a little easier to work with. * We end up with an object that looks like this: * { * fade: [ {element: domElement, time: "1.2s"}, ... ], * fling: [ {element: domelement, time: "2.4s"}, ... ] * } * So, we can reuse an animation on different elements * at different times. */ _.forEach(tuples, function(tuple){ var name = tuple[0], time = tuple[1]; data[name] = data[name] || []; data[name].push({ element: element, time: time }) }); }); return data;},

    Esto almacena toda la información de tiempo en un objeto con el nombre de la animación como clave, seguido de una lista de tiempos y elementos. Este objeto se utiliza para crear varios Animationobjetos, que luego se insertan en varias estructuras de datos para que sea fácil y rápido buscar qué animaciones deberían ejecutarse en el bucle grande.

     

    El bucle requestAnimationFrame

    El corazón de Charlie.js es un bucle que se ejecuta cada vez que se reproduce el vídeo. El bucle se crea con requestAnimationFrame.

    tick: function(time){ if (this.running){ this.frameID = requestAnimationFrame(this.tick.bind(this)); this.controller.startAnimations(time, video.currentTime); }}

    The requestAnimationFrame function is specifically designed to optimize any kind of animation, such as DOM manipulations, painting to the canvas, and WebGL. It’s a tighter loop than anything you can get with setTimeout, and it’s calibrated to bundle animation steps into a single reflow, thus performing better. It’s also better for battery usage and will completely stop running when the user switches tabs.

    The loop starts when the video starts and stops when the video stops. Charlie.js also needs to know whether the video ends or jumps to the middle somewhere. Each of those events requires a slightly different response.

    video.addEventListener("play", this.start.bind(this), false);video.addEventListener("ended", this.ended.bind(this), false);video.addEventListener("pause", this.stop.bind(this), false);video.addEventListener("seeked", this.seeked.bind(this), false);

    As the video plays, the loop keeps ticking. Each tick runs this code:

    // allow precision to one tenth of a secondvar seconds = roundTime(videoTime),me = this;//resume any paused animationsme.resumeAnimations();/* start up any animations that should be running at this second.* Don't start any that are already running*/if (me.bySeconds[seconds]){ var animations = me.bySeconds[seconds], notRunning = _.filter(animations, function(animation){ return !_.contains(me.running, animation); }); /* requestAnimationFrame happens more than * every tenth of a second, so this code will run * multiple times for each animation starting time */ _.forEach(notRunning, function(animation){ animation.start(); me.running.push(animation); });}

    Everything we have done up to this point has been to support these few lines of code. The seconds variable is just the video.currentTime value rounded to the nearest tenth of a second. The bySeconds property is created from the time data that is scraped from the HTML — it’s just a quick way to grab a list of animations to start at a given time. The running array is a list of animations that are currently running. The requestAnimationFrame loop is really fast and runs many, many times a second, and Charlie.js only supports a resolution of one tenth of a second.

     

    So, if one animation starts at the 2-second mark, then requestAnimationFrame will try to start it several times until the video has progressed to the next tenth of a second. To prevent animations from starting over and over again during that tenth of a second, they get put into the running array so that we know what is running and don’t start it again unnecessarily.

    To start a CSS animation, just add the animation properties to an element’s style. The easiest way to do this is to just add the animation class to the element’s classList, and that is exactly what the animation’s start method does.

    start: function(){ var me = this; //The name of the animation is the same as the class name by convention. me.element.classList.add(me.name); onAnimationEnd(me.element, function(){ me.reset(); });}

    The name of the animation is the same as the class name by convention.

    Pause And Resume Animations

    When the video stops, the animations should stop with it. There is a pretty straightforward way to do this using CSS animations: We just set the animationPlayState property of the element to paused.

    ...//method on the animation objectpause: function(){ this.element.style.webkitAnimationPlayState = "paused"; this.element.style.mozAnimationPlayState = "paused"; this.element.style.oAnimationPlayState = "paused"; this.element.style.animationPlayState = "paused";},resume: function(){ this.element.style.webkitAnimationPlayState = "running"; this.element.style.mozAnimationPlayState = "running"; this.element.style.oAnimationPlayState = "running"; this.element.style.animationPlayState = "running";}...//called on the video "pause" eventwhile(animation = me.running.pop()){ animation.pause(); //keep track of paused animations so we can resume them later ... me.paused.push(animation);}

    The only trick here is to keep track of which animations have been paused, so that they can resume once the video starts again, like so:

    while (animation = me.paused.pop()){ animation.resume(); me.running.push(animation);}

    How To Start An Animation In The Middle

    ¿Qué pasa si alguien avanza en el vídeo y salta justo en medio de una animación? ¿Cómo se inicia una animación CSS en el medio? La animationDelaypropiedad es exactamente lo que necesitamos. Normalmente, animationDelayse establece en un número positivo. Si desea que una animación comience tres segundos después de que se haya aplicado el estilo de animación, deberá configurarla animationDelayen 3s. Pero si lo establece animationDelayen un número negativo, saltará a la mitad de la animación. Por ejemplo, si una animación dura tres segundos y desea que comience dos segundos después, establezca la animationDelaypropiedad en -2s.

    Cada vez que un usuario llega a la mitad del video, Charlie.js deberá detener todas las animaciones que se están ejecutando actualmente, determinar qué debería estar ejecutándose y luego establecer los animationDelayvalores apropiados. Aquí está el código de alto nivel:

     

    // 1. go through each to start// 2. set the animation delay so that it starts at the right spot// 3. start 'em up.var me = this,seconds = roundTime(videoTime),toStart = animationsToStart(me, seconds);// go through each animation to start_.forEach(toStart, function(animation){ //set the delay to start the animation at the right place setDelay(animation, seconds); //start it up animation.start(); /* If the move is playing right now, then let the animation * keep playing. Otherwise, pause the animation until * the video resumes. */ if (playNow) { me.running.push(animation); } else { me.paused.push(animation); animation.pause(); }});

    La animationsToStartfunción recorre una lista ordenada de animaciones y busca cualquier cosa que deba estar ejecutándose. Si la hora de finalización es mayor que la hora actual y la hora de inicio es menor que la hora actual, entonces se debe iniciar la animación.

    var animationsToStart = function(me, seconds) { var toStart = []; for(var i = 0; i me.timeModel.length; i++) { var animation = me.timeModel[i]; //stop looking, nothing else is running if (animation.startsAt seconds) { break; } if (animation.endsAt seconds) { toStart.push(animation); } } return toStart;};

    Hay timeModeluna lista de animaciones ordenadas por los momentos en que deben finalizar. Este código recorre esa lista y busca animaciones que comienzan antes de la hora actual y terminan después de la hora actual. La toStartmatriz representa todas las animaciones que deberían estar ejecutándose en este momento.

    Esos valores se pasan al código de nivel superior, que luego calcula y establece el retraso en la setDelayfunción.

    setDelay = function(animation, seconds) { var delay = -(seconds - animation.startsAt); delay = delay 0 ? delay : 0, milliseconds = Math.floor(delay * 1000) + "ms"; animation.element.style.webkitAnimationDelay = milliseconds; animation.element.style.mozAnimationDelay = milliseconds; animation.element.style.oAnimationDelay = milliseconds; animation.element.style.msAnimationDelay = milliseconds; animation.element.style.animationDelay = milliseconds;};

    El secondsparámetro es la hora actual del vídeo. Digamos que el vídeo es de 30 segundos, que la animación empieza a los 24 segundos y que dura 10 segundos. Si configuramos el retraso en -6s, la animación comenzará a los 6 segundos y durará otros 4 segundos.

    Mire el código usted mismo

    Aquí hemos cubierto cómo utilizar requestAnimationFramepara crear un bucle ajustado y optimizado para animaciones, cómo eliminar fotogramas clave y estilos de animación de la hoja de estilos, cómo iniciar y detener animaciones con el video e incluso cómo iniciar animaciones CSS en el medio. . Pero para ir al grano, nos hemos saltado bastante código de pegamento. Charlie.js tiene solo un par de cientos de líneas de código, es de código abierto y está ampliamente comentado. Le invitamos a tomar el código y leerlo.

    Incluso puedes usarlo si quieres, con algunas advertencias:

    • Charlie.js se creó con fines educativos. Fue creado para ser leído y para que usted aprenda sobre animaciones CSS, videos, requestAnimationFrameetc. No lo conecte simplemente a su código de producción a menos que realmente sepa lo que está haciendo.
    • La compatibilidad con la animación en varios navegadores es bastante buena y Charlie.js intenta ser compatible con todos los navegadores cuando es posible. Sin embargo, no ha sido probado exhaustivamente.
    • Consume CPU, incluso si el vídeo está en pausa. (Esto tiene algo que ver con las animaciones CSS que aún se reproducen).
    • El usuario no puede arrastrar la barra de búsqueda mientras el vídeo no está en pausa. Si lo hacen, las animaciones comenzarán y se superpondrán entre sí.
    • Charlie.js no responde a los cambios en la velocidad de fotogramas. Entonces, si el video tartamudea o desea reducir la velocidad del video, las animaciones no estarán sincronizadas. Además, no puedes ejecutar el vídeo al revés.
    • Las animaciones no comenzarán si la pestaña actual no está configurada para el video, debido a que requestAnimationFrameno se ejecutan a menos que la pestaña de video esté activa. Esto podría confundir a los usuarios que alternan entre pestañas.

    Algunas de estas limitaciones se pueden solucionar con bastante facilidad, pero Charlie.js se creó para un caso de uso muy limitado. He preparado una demostración de Charlie.js en acción para que puedas ver lo que puede hacer.

    El futuro del vídeo en el diseño web está lleno de posibilidades y, por mi parte, no puedo esperar a ver qué sucede.

    Recursos adicionales

    • Una demostración de Charlie.js. Vea lo que puede hacer con vídeo y animación CSS3.





    • Tal vez te puede interesar:

    1. Diseño de un cuadro de texto, íntegro
    2. Diseño y construcción de una aplicación web progresiva sin marco (Parte 3)
    3. Escribir un motor de aventuras de texto multijugador en Node.js: diseño del servidor Game Engine (Parte 2)
    4. Componentes de diseño en React

    El futuro del vídeo en el diseño web

    El futuro del vídeo en el diseño web

    Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX Creación y mantenimiento de sistemas de diseño exitosos, con Brad Fost Índi

    programar

    es

    https://aprendeprogramando.es/static/images/programar-el-futuro-del-video-en-el-diseno-web-833-0.jpg

    2024-05-20

     

    El futuro del vídeo en el diseño web
    El futuro del vídeo en el diseño web

    Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

     

     

    Top 20