Video
El componente Video es un reproductor de contenidos de video. Para insertar un componente de Video en la pantalla, ve al panel Izquierdo en el constructor visual. Recorre la lista de componentes para encontrar el componente Video o haz clic en la barra de búsqueda y escribe el nombre. A continuación, arrastra y suelta el componente en el canvas y configura sus atributos en el panel derecho. Consulta las siguientes secciones para obtener más información.
Importante
El componente Video solo puede utilizarse en apps móviles (tanto para dispositivos Android como iOS).
Attributes
En el panel derecho, puedes configurar diferentes atributos para personalizar el componente. Consulta las secciones a continuación para obtener más información.
Design
En la pestaña Design, puedes configurar la información básica del componente seleccionado y los atributos que determinan el aspecto que tendrá el componente en la app. Consulta las secciones a continuación para obtener más información.
En esta sección, rellena los detalles básicos del componente seleccionado y los atributos de alineación y tamaño. Esta sección está disponible para cada componente arrastrado al lienzo. Para saber más, lee Design.
En esta sección puedes configurar los atributos básicos del componente. Consulta la tabla a continuación para obtener más información.
CSS Class | CSS o estilo invocado desde Style > Themes y aplicado al componente. Haz clic en el campo y selecciona un estilo en el menú desplegable. SugerenciaPuedes añadir más de un estilo. | ||||||||
Src | ID de la imagen que se mostrará en el componente. Para establecer la imagen, haz clic en el campo y escribe el nombre de la imagen, o haz clic en el ícono de la lupa para abrir el selector de imágenes. A continuación, selecciona una de las imágenes disponibles en la lista o utiliza la barra de búsqueda para encontrar una imagen por su nombre. | ||||||||
Resource Origin | Método a través del cual se carga el recurso referenciado por el componente. Rellena este campo si el componente seleccionado hace referencia a un recurso, como una imagen o un video. Haz clic en la flecha y selecciona una de las opciones disponibles en el menú desplegable: elige L (Local) para recuperar el contenido codificado de los recursos locales o elige H (HTTP) para recuperar el contenido de los recursos del Communication Server. | ||||||||
Loop | Define si el vídeo de animación se reproduce en bucle. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para que la animación se reproduzca en bucle o false para que no se reproduzca en bucle. El valor por defecto es true. | ||||||||
Show Controls | Define si el componente muestra un panel de control de video con las opciones Pause, Rewind y Fast Forward. Selecciona true para que el componente de video muestre el panel de control de video o false para que no lo haga. El valor por defecto es false. | ||||||||
Mute | Define si el video se reproduce en silencio. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para que el video se reproduzca en modo silencio o false para que esto no suceda. El valor por defecto es true. | ||||||||
Auto Play | Define si el video de animación se reproduce automáticamente cuando se carga la pantalla. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para que el video se reproduzca automáticamente o false para que esto no suceda. El valor por defecto es true. | ||||||||
Keep Aspect | Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para que el video mantenga su relación de aspecto y se ajuste a los límites de la pantalla o false para que el video mantenga su relación de aspecto pero ocupe toda la pantalla. NotaSi está configurado, este atributo solo afecta a los dispositivos iOS. | ||||||||
Format | Define cómo se muestra la duración del video en la app. Haz clic en el campo e introduce una de las opciones de la siguiente tabla.
| ||||||||
Visible | Atributo que define si el componente es visible en la app. Haz clic en la flecha y elige una opción del menú desplegable. Selecciona true para que el componente sea visible en la app o false para que no lo sea. | ||||||||
Important For Accessibility | Atributo que define si el lector de pantalla lee o ignora el valor definido en el atributo Accessibility Text del componente. Haz clic en la flecha y selecciona una opción del menú desplegable. Elige true para que el lector de pantalla lea el componente o false para que el lector de pantalla no lea el componente. El valor por defecto es false. | ||||||||
Accessibility Text | Alternative text. Añade un texto breve para describir el componente a los usuarios que no puedan verlo. El texto será leído por iOS Voice Over o Android Talk Back. También puedes añadir el texto de accesibilidad al diccionario de traducciones o seleccionar una traducción existente si hay idiomas seleccionados en los ajustes de tu rama.Panel izquierdo | ||||||||
Accessibility Order | Atributo que indica al lector de pantalla el orden en que debe leer los componentes. Para configurarlo, haz clic en el campo e introduce un número para definir el orden. Por ejemplo, si este componente debe leerse en tercer lugar, introduce el valor 3. Si no configuras un orden personalizado, los componentes se leen de arriba hacia abajo y de izquierda a derecha de la pantalla. |
En esta sección puedes configurar los atributos de tamaño y posición del componente. Consulta la tabla a continuación para obtener más información.
Position Type | Haz clic en la flecha y selecciona un tipo de posición en el menú desplegable. Consulta la tabla a continuación para saber más sobre las opciones disponibles.
|
En esta sección, puedes definir el orden de los componentes dentro de la pantalla. Consulta la tabla a continuación para obtener más información.
Z-Index | Propiedad que define el orden de posición de los componentes. Si varios componentes se solapan, los componentes con un índice Z más alto se colocarán sobre los que tengan un índice más bajo. Este campo se rellena automáticamente. |
En esta sección se configuran los parámetros aplicables a las sombras del componente.
Shadow offset-x | Introduce un valor para la sombra con respecto al eje X (horizontal), que considera el centro del componente como punto de partida. Si el valor es un número negativo, la sombra apuntará hacia la izquierda. Puedes hacer clic en la flecha situada a la derecha del campo de sombra y seleccionar una unidad de medida en el menú desplegable. |
Shadow offset-y | Introduce un valor para la sombra con respecto al eje Y (vertical), que considera el centro del componente como punto de partida. Puedes hacer clic en la flecha situada a la derecha del campo de sombra y seleccionar una unidad de medida en el menú desplegable. |
Shadow Blur Radius | Introduce un valor para el ancho del radio de la sombra. Puedes hacer clic en la flecha situada a la derecha del campo de sombra y seleccionar una unidad de medida en el menú desplegable. |
Shadow Color | Para establecer el color de la sombra, haz clic en el campo y escribe un código hexadecimal o haz clic en el ícono cuadrado de bordes redondeados para abrir el selector de color. A continuación, haz clic en el campo Hexa y escribe un código de color HEXA. |
Actions
En la pestaña Actions, puedes establecer animaciones para los componentes de la pantalla de tu app y determinar cómo el usuario invoca efectos y desencadena acciones mientras interactúa con la app. Consulta las secciones a continuación para obtener más información.
En esta sección, puedes establecer diferentes efectos sobre los atributos del componente y las animaciones a través de las cuales se producen los efectos. En primer lugar, debes seleccionar los atributos para los que deseas establecer efectos. Consulta la tabla a continuación para obtener más información.
Alpha | Transparencia u opacidad del componente. Introduce el valor para establecer la opacidad inicial del componente antes de que se ejecute la animación. El valor puede oscilar entre 0 y 1, considerando 1 como el valor que otorga el mayor nivel de transparencia. |
Scale | Dimensión del componente. Introduce el valor para establecer la escala inicial del componente antes de que se ejecute la animación. Por defecto, el valor de escala es 1, que equivale al tamaño original del componente. El valor puede ser cualquier número empezando por 1. |
A continuación, se configura la animación a través de la cual se ejecutarán los efectos previamente definidos. Consulta la tabla siguiente para obtener más información sobre las animaciones disponibles.
On Call Effect | Animación ejecutada al invocarla a través de un mensaje. |
En todos los casos, puedes establecer el código de la animación o configurarla con el Editor de animaciones. Para configurar la animación, haz clic en </> y, a continuación, haz clic en el campo de texto para empezar a escribir el código o haz clic en los tres puntos verticales para abrir el Editor de animación. Consulta Actions para aprender a utilizar el editor.
Advanced
No hay atributos disponibles para configurar en la pestaña Advanced para el componente Video.