Widget de reproductor de vídeo (con temas)
El widget de reproductor de vídeo (con temas) permite integrar y reproducir vídeos en los mashups. El reproductor de video admite múltiples opciones, incluida la reproducción automática, agregar imágenes en miniatura, controlar el aspecto visual de los controles y más. Se trata de un widget dinámico que admite temas para ofrecer una experiencia de usuario coherente.
 |
El reproductor de vídeo está disponible como widget y como componente Web que se puede personalizar e importar desde ThingWorx Web Component SDK.
|
Anatomía
1. Etiqueta del reproductor de vídeo
2. Área de vídeo
3. Imagen reducida de vista previa
4. Controles del reproductor
Accesos directos de teclado
En la siguiente tabla se enumeran los accesos directos de teclado que se pueden utilizar para interactuar con este widget, agrupados por componente.
Componente | Botón/Control | Teclas | Descripción |
|---|---|---|---|
Navegación | Permite controlar la navegación entre los distintos componentes del widget. | TABULADOR y MAYÚS+TABULADOR | Permite avanzar o retroceder entre los subcomponentes del reproductor. |
Reproductor | Control de reproducción/parar | ESPACIO o INTRO | Permite reproducir o detener el vídeo |
Barra de línea de tiempo | FLECHA ARRIBA o DERECHA | Permite avanzar rápidamente 10 segundos | |
FLECHA ABAJO o IZQUIERDA | Permite retroceder 10 segundos | ||
RE PÁG | Permite avanzar rápidamente 1 minuto | ||
AV PÁG | Permite retroceder 1 minuto | ||
INICIO | Permite ir al principio del vídeo | ||
FIN | Permite ir al final del vídeo | ||
Audio | Botón Silenciar | ESPACIO o INTRO | Permite silenciar o reactivar el sonido del vídeo |
Control deslizante de volumen | FLECHA ARRIBA o DERECHA | Permite subir el volumen en un 5 % | |
FLECHA ABAJO o IZQUIERDA | Permite bajar el volumen en un 5 % | ||
INICIO | Permite definir el volumen en 0 % | ||
FIN | Permite definir volumen en 100 % | ||
Descargar | Botón Descargar | ESPACIO o INTRO | Permite descargar el fichero de vídeo |
Pantalla completa | Botón de pantalla completa | ESPACIO o INTRO | Permite entrar en el modo de pantalla completa |
ESC | Permite salir del modo de pantalla completa y volver al modo ventana |
Configuración del esquema de los controles del reproductor
Utilice la propiedad OverlayControls para configurar la posición de los controles del reproductor de vídeo. Cuando esta propiedad se define en true, los controles aparecen sobre el contenido de vídeo. Cuando se define en false, los controles aparecen debajo del vídeo. La superposición de los controles reduce la cantidad de espacio vertical que utiliza el widget.
Adición de una imagen reducida
Utilice la propiedad Thumbnail para mostrar una imagen de vista previa antes de que comience el vídeo. La imagen aparece en lugar del vídeo hasta que el usuario selecciona el botón de reproducción. Esta función es útil para proporcionar contexto, personalización de marca o una vista previa del contenido. Cuando se inicia la reproducción, la imagen reducida se reemplaza por el vídeo.
Configuración de los ajustes de reproducción
Se puede activar la propiedad AutoPlay para que inicie la reproducción de vídeo automáticamente cuando se cargue el mashup. Cuando AutoPlay está activado, el vídeo está licenciado por defecto. Para activar el audio, los usuarios deben activar manualmente el audio del vídeo después de que comience a reproducirse. Para configurar el audio, se puede activar o desactivar la propiedad Mute del widget o crear enlaces para controlar el audio dinámicamente.
Adición de un botón de descarga
Utilice la propiedad EnableDownload para mostrar un botón de descarga en el reproductor. Cuando se activa, este botón permite a los usuarios descargar el vídeo según la URL. Utilice esta función para soportar la visualización sin conexión o para compartir contenido de vídeo.
| | Se muestra un mensaje cuando la descarga se bloquea debido a una configuración de seguridad, como las reglas de CSP. |
Configuración de reglas de CSP
Para garantizar que el widget de reproductor de vídeo funcione correctamente cuando las reglas de directiva de seguridad de contenido (CSP) están activadas en el entorno de ThingWorx, se debe actualizar la directiva media-src para incluir los dominios externos desde los que se carga el vídeo. Por ejemplo:
media-src 'self' https://cdn.com https://video-location.com;
Para obtener más información sobre la configuración de reglas de CSP, consulte Directiva de seguridad de contenido.
Propiedades de los widgets
En la siguiente tabla se enumeran las propiedades del widget:
Nombre de la propiedad | Descripción | Tipo base | Valor por defecto | ¿Es enlazable? (Sí/No) | ¿Es localizable? (Sí/No) |
|---|---|---|---|---|---|
Label | Permite especificar el texto del rótulo del widget. | STRING | S | S | |
LabelAlignment | Permite alinear el texto del rótulo a la izquierda, derecha o centro del widget. | STRING | left | N | N |
VideoURL | Permite especificar el URL del vídeo que se va a reproducir. | NUMBER | Ninguno | S | N |
EnableDownload | Permite añadir un botón de descarga a los controles del reproductor que permite a los usuarios descargar el vídeo. | BOOLEAN | Falso | S | N |
Thumbnail | Permite especificar la imagen reducida del vídeo. | NUMBER | Ninguno | S | N |
AutoPlay | Permite especificar si los vídeos se reproducen automáticamente cuando se carga el widget. Cuando AutoPlay está activado, el vídeo se reproduce silenciado. | BOOLEAN | Falso | N | N |
Mute | Permite silenciar el vídeo. | BOOLEAN | Falso | S | N |
OverlayControls | Permite superponer los controles del reproductor en el vídeo, reduciendo el espacio que el reproductor ocupa en el esquema. Los controles solo se muestran cuando se pasa el cursor sobre el vídeo. Cuando se desactiva, los controles del reproductor están visibles en todo momento. | BOOLEAN | Falso | S | N |
Width | Permite especificar el ancho del reproductor de vídeo. | NUMBER | 480 | S | N |
Height | Permite especificar la altura del reproductor de vídeo. | NUMBER | 314 | S | N |
CustomClass | Clase CSS definida por el usuario que se aplicará al elemento div superior del widget. Pueden introducirse varias clases, separadas por un espacio. | NUMBER | Ninguno | S | N |
TabSequence | Permite especificar el orden de tabulación del widget. | NUMBER | 0 | No | N |
Propiedades de validación
En la siguiente tabla se enumeran las propiedades de validación del widget:
Nombre de la propiedad | Descripción | Tipo base | Valor por defecto | ¿Es enlazable? (Sí/No) | ¿Es localizable? (Sí/No) |
|---|---|---|---|---|---|
PlaybackErrorMessage | El mensaje que se mostrará cuando el fichero de vídeo se bloquee debido a reglas de CSP. | STRING | Token: [[Widgets.VideoPlayer.Validation.PlaybackErrorMessage]] Valor: Error de reproducción | S | S |
PlaybackErrorMessageDetails | Los detalles que se mostrarán en el mensaje cuando el fichero de vídeo esté bloqueado debido a reglas de CSP. | STRING | [[Widgets.VideoPlayer.Validation.PlaybackErrorMessageDetails]] Asegúrese de que el formato de vídeo sea compatible y de que su conexión de red funcione, e inténtelo de nuevo. | S | S |
NetworkErrorMessage | El mensaje que se mostrará cuando el vídeo no se cargue debido a un error de red. | STRING | [[Widgets.VideoPlayer.Validation.NetworkErrorMessage]] Problema de red | S | S |
NetworkErrorMessageDetails | Los detalles que se mostrarán debajo del mensaje cuando el vídeo no se cargue debido a un error de red. | STRING | [[Widgets.VideoPlayer.Validation.NetworkErrorMessageDetails]] Compruebe la conexión de red e inténtelo de nuevo. | S | S |
DownloadBlockedMessage | El mensaje que se mostrará cuando no se pueda descargar el vídeo debido a un problema con los permisos de acceso. | STRING | [[Widgets.VideoPlayer.Validation.DownloadBlockedMessage]] Descarga bloqueada | S | S |
DownloadBlockedMessageDetails | Los detalles que se mostrarán en el mensaje cuando no se pueda descargar el vídeo debido a un problema con los permisos de acceso. | STRING | [[Widgets.VideoPlayer.Validation.DownloadBlockedMessageDetails]] La descarga está bloqueada por la plataforma. Asegúrese de que las reglas de CSP de la plataforma estén configuradas correctamente e inténtelo de nuevo. | S | S |
PlaybackBlockedMessage | El mensaje que se mostrará cuando el fichero de vídeo se bloquee debido a reglas de CSP. | STRING | [[Widgets.VideoPlayer.Validation.PlaybackBlockedMessage]] Este contenido está bloqueado | S | S |
PlaybackBlockedMessageDetails | Los detalles que se mostrarán en el mensaje cuando el fichero de vídeo esté bloqueado debido a reglas de CSP. | STRING | [[Widgets.VideoPlayer.Validation.PlaybackBlockedMessageDetails]] Póngase en contacto con el propietario del sitio para solucionar este problema. | S | S |
ValidationFailureIcon | Permite especificar el icono que se debe mostrar cuando falle la validación. | STRING | cds:icon_error | N | N |