Documentación Guía de referencia de visores de Dynamic Media

Personalización del visualizador de vídeo interactivo customizing-interactive-video-viewer

Last update: Mon Jul 22 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

Temas:

Creado para:

Desarrollador
Usuario

Toda la personalización visual y la mayor parte de la personalización del comportamiento del visualizador de vídeo interactivo se realiza creando un CSS personalizado.

El flujo de trabajo sugerido es tomar el archivo CSS predeterminado para el visor apropiado, copiarlo en una ubicación diferente, personalizarlo y especificar la ubicación del archivo personalizado en el comando style=.

Los archivos CSS predeterminados se encuentran en la siguiente ubicación:

<s7_viewers_root>/html5/InteractiveVideoViewer_dark.css

El visor incluye dos archivos CSS predeterminados para combinaciones de colores "claro" y "oscuro". La versión "oscura" se utiliza de forma predeterminada, pero es fácil cambiar a la versión "clara" mediante el uso del siguiente CSS estándar:

<s7_viewers_root>/html5/InteractiveVideoViewer_light.css

El archivo CSS personalizado debe contener las mismas declaraciones de clase que la predeterminada. Si se omite una declaración de clase, el visor no funciona correctamente porque no proporciona estilos predeterminados integrados para los elementos de la interfaz de usuario.

Una forma alternativa de proporcionar reglas CSS personalizadas es utilizar estilos incrustados directamente en la página web o en una de las reglas CSS externas vinculadas.

Al crear CSS personalizado, tenga en cuenta que el visor asigna la clase .s7interactivevideoviewer a su elemento DOM contenedor. Si está usando un archivo CSS externo pasado con el comando style=, use la clase .s7interactivevideoviewer como clase principal en el selector descendiente para las reglas CSS. Si está utilizando estilos incrustados en la página web, clasifique este selector con un ID del elemento DOM contenedor de la siguiente manera:

#<containerId>.s7interactivevideoviewer

Creación de CSS diseñado interactivo section-0bb49aca42d242d9b01879d5ba59d33b

Es posible segmentar diferentes dispositivos y tamaños de incrustación en CSS para que el contenido se muestre de forma diferente en función del dispositivo del usuario o de un diseño de página web concreto. Este método incluye, entre otros, diferentes diseños, tamaños de elementos de interfaz de usuario y resolución de ilustraciones.

El visor admite dos mecanismos para crear CSS diseñadas de forma interactiva: marcadores CSS y consultas de medios CSS estándar. Puede utilizar estos mecanismos de forma independiente o conjunta.

marcadores CSS

Para ayudar a crear CSS diseñado interactivo, el visor admite marcadores CSS. Estos marcadores son clases CSS especiales. Se asignan dinámicamente al elemento contenedor del visor de nivel superior en función del tamaño del visor en tiempo de ejecución y el tipo de entrada utilizado en el dispositivo actual.

El primer grupo de marcadores CSS incluye las clases .s7size_large, .s7size_medium y .s7size_small. Se aplican en función del área de tiempo de ejecución del contenedor del visor. Si el área del visor es igual o mayor que el tamaño de un monitor de escritorio común, se usa .s7size_large; si el área está cerca de un dispositivo de tableta común, se asigna .s7size_medium. Para áreas similares a las pantallas de teléfonos móviles, se ha establecido .s7size_small. El propósito principal de estos marcadores CSS es crear diferentes diseños de interfaz de usuario para diferentes pantallas y tamaños de visor.

El segundo grupo de marcadores CSS contiene .s7mouseinput y .s7touchinput. El marcador .s7touchinput se establece si el dispositivo actual tiene capacidades de entrada táctil; de lo contrario, se utiliza .s7mouseinput. Estos marcadores están pensados principalmente para crear elementos de entrada de interfaz de usuario con diferentes tamaños de pantalla para diferentes tipos de entrada, ya que normalmente la entrada táctil requiere elementos más grandes.

El tercer grupo de marcadores CSS contiene .s7device_landscape y .s7device_portrait. El marcador .s7device_landscape se establece si el dispositivo táctil está en orientación horizontal; .s7device_portrait se utiliza cuando el dispositivo táctil gira hacia la orientación vertical. Estos marcadores CSS están pensados para su uso únicamente en sistemas de escritorio.

El siguiente CSS de ejemplo establece el tamaño del botón de reproducción/pausa en 28 x 28 píxeles en sistemas con entrada de ratón y 56 x 56 píxeles en dispositivos táctiles. Además, oculta el botón por completo si se reduce significativamente el tamaño del visor:

.s7interactivevideoviewer.s7mouseinput .s7playpausebutton {
    width:28px;
    height:28px;
}
.s7interactivevideoviewer.s7touchinput .s7playpausebutton {
    width:56px;
    height:56px;
}
.s7interactivevideoviewer.s7size_small .s7playpausebutton {
    visibility:hidden;
}

En el siguiente ejemplo, la barra de control de vídeo se coloca 138 píxeles por encima de la parte inferior del visor si el dispositivo táctil está en orientación vertical. Se mueve a la parte inferior del visor en todos los demás casos:

.s7interactivevideoviewer.s7touchinput.s7device_landscape .s7controlbar,
.s7interactivevideoviewer.s7mouseinput .s7controlbar {
 bottom:0px;
}
.s7interactivevideoviewer.s7touchinput.s7device_portrait .s7controlbar {
 bottom:136px;
}

Para dirigirse a dispositivos con diferente densidad de píxeles, debe utilizar consultas de medios CSS. El siguiente bloque de consulta de medios contendría CSS específico para pantallas de alta densidad:

@media screen and (-webkit-min-device-pixel-ratio: 1.5)
{
}

El uso de marcadores CSS es la forma más flexible de crear CSS diseñado interactivo, ya que le permite dirigirse no solo al tamaño de pantalla del dispositivo, sino también al tamaño real del visor, lo que resulta útil para los diseños interactivos.

Puede utilizar el archivo CSS del visor predeterminado como ejemplo de un enfoque de marcadores CSS.

consultas de medios CSS

También puede realizar la detección de dispositivos utilizando consultas de medios CSS puras. Todo lo incluido dentro de un bloque de consulta de medios determinado se aplica solo cuando se ejecuta en un dispositivo correspondiente.

Cuando se aplica a visores móviles, utiliza cuatro consultas de medios CSS, definidas en su CSS, en el orden indicado a continuación:

Contiene solo reglas específicas para todos los dispositivos táctiles.

code language-none

code language-none
`@media only screen and (max-device-width:13.5in) and (max-device- height:13.5in) and (max-device-width:799px), only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) { }`

@media only screen and (max-device-width:13.5in) and (max-device-
height:13.5in) and (max-device-width:799px),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in)
and (max-device-height:799px)
{
}

Contiene solo reglas específicas para tabletas con pantallas de alta resolución.

code language-none

code language-none
`@media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px) and (-webkit-min-device-pixel-ratio:1.5), only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) and (-webkit-min-device-pixel-ratio:1.5) { }`

@media only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-width:799px) and (-webkit-min-device-pixel-ratio:1.5),
only screen and (max-device-width:13.5in) and (max-device-height:13.5in) and (max-device-height:799px) and (-webkit-min-device-pixel-ratio:1.5)
{
}

Contiene solo reglas específicas para todos los teléfonos móviles.

code language-none
`@media only screen and (max-device-width:9in) and (max-device-height:9in) { }`

Contiene únicamente reglas específicas para teléfonos móviles con pantallas de alta resolución.

code language-none

code language-none
`@media only screen and (max-device-width:9in) and (max-device-height:9in) and (-webkit-min-device-pixel-ratio: 1.5), only screen and (device-width:720px) and (device-height:1280px) and (-webkit-device-pixel-ratio: 2), only screen and (device-width:1280px) and (device-height:720px) and (-webkit-device-pixel-ratio: 2) { }`

@media only screen and (max-device-width:9in) and (max-device-height:9in) and (-webkit-min-device-pixel-ratio: 1.5),
  only screen and (device-width:720px) and (device-height:1280px) and (-webkit-device-pixel-ratio: 2),
  only screen and (device-width:1280px) and (device-height:720px) and (-webkit-device-pixel-ratio: 2)
{
}

Con un enfoque de consultas de medios, debe organizar CSS con detección de dispositivos de la siguiente manera:

En primer lugar, la sección específica del escritorio define todas las propiedades que son específicas del escritorio o comunes a todas las pantallas.
Y segundo, las cuatro consultas de medios van en el orden definido arriba y proporcionan reglas CSS específicas para el tipo de dispositivo correspondiente.

No es necesario duplicar todo el visor de CSS en cada consulta de medios. Solo las propiedades específicas de dispositivos determinados se redefinen dentro de una consulta de medios.

Sprites CSS section-9b6d8d601cb441d08214dada7bb4eddc

Muchos elementos de la interfaz de usuario del visor tienen un estilo que utiliza ilustraciones de mapa de bits y tienen más de un estado visual distinto. Un buen ejemplo es un botón que normalmente tiene al menos tres estados diferentes: "arriba", "sobre" y "abajo". Cada estado requiere su propia ilustración de mapa de bits asignada.

Con un enfoque clásico del estilo, el CSS tendría una referencia independiente a un archivo de imagen individual en el servidor para cada estado del elemento de interfaz de usuario. El siguiente es un ejemplo de CSS para aplicar estilo a un botón de pantalla completa:

.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='up'] {
background-image:url(images/v2/PlayButton_up.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='over'] {
background-image:url(images/v2/PlayButton_over.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='down'] {
background-image:url(images/v2/PlayButton_down.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][state='disabled'] {
background-image:url(images/v2/PlayButton_disabled.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='up'] {
background-image:url(images/v2/PauseButton_up.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='over'] {
background-image:url(images/v2/PauseButton_over.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='down'] {
background-image:url(images/v2/PauseButton_down.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='false'][state='disabled'] {
background-image:url(images/v2/PauseButton_disabled.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='up'] {
background-image:url(images/v2/ReplayButton_up.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='over'] {
background-image:url(images/v2/ReplayButton_over.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='down'] {
background-image:url(images/v2/ReplayButton_down.png);
}
.s7interactivevideoviewer.s7mouseinput .s7playpausebutton[selected='true'][replay='true'][state='disabled'] {
background-image:url(images/v2/ReplayButton_disabled.png);
}

El inconveniente de este enfoque es que el usuario final experimenta parpadeos o una respuesta retrasada en la interfaz de usuario cuando el elemento interactúa con por primera vez. Esta acción se produce porque la ilustración de la imagen para el nuevo estado del elemento aún no se ha descargado. Además, este método puede tener un ligero impacto negativo en el rendimiento debido al aumento en el número de llamadas HTTP al servidor.

Los sprites CSS son un enfoque diferente en el que la ilustración de la imagen para todos los estados de elementos se combina en un solo archivo PNG llamado "sprite". Este "sprite" tiene todos los estados visuales para el elemento dado colocados uno tras otro. Al aplicar estilo a un elemento de interfaz de usuario con sprites, se hace referencia a la misma imagen sprite para todos los estados diferentes en CSS. Además, la propiedad background-position se usa en cada estado para especificar qué parte de la imagen "sprite" se usa. Puede estructurar una imagen "sprite" de cualquier manera adecuada. Los visualizadores normalmente lo tienen apilado verticalmente. A continuación se muestra un ejemplo basado en "sprite" de cómo aplicar estilo al mismo botón de pantalla completa anteriormente:

.s7interactivevideoviewer .s7fullscreenbutton[state][selected]{
 background-image: url(images/v2/FullScreenButton_dark_sprite.png);
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='up'] {
background-position: -84px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='over'] {
background-position: -56px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='down'] {
background-position: -28px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='true'][state='disabled'] {
background-position: -0px -1148px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='up'] {
background-position: -84px -1120px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='over'] {
background-position: -56px -1120px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='down'] {
background-position: -28px -1120px;
}
.s7interactivevideoviewer.s7mouseinput .s7fullscreenbutton[selected='false'][state='disabled'] {
background-position: -0px -1120px;
}

Notas y consejos generales sobre estilo section-95855dccbbc444e79970f1aaa3260b7b

Al personalizar la interfaz de usuario del visor con CSS, no se admite el uso de la regla !IMPORTANT para aplicar estilo a los elementos del visor. En particular, la regla !IMPORTANT no debe usarse para anular ningún estilo predeterminado o en tiempo de ejecución proporcionado por el visor o el SDK del visor. El motivo es que puede afectar al comportamiento de los componentes adecuados. En su lugar, debe utilizar selectores de CSS con la especificidad adecuada para establecer las propiedades CSS documentadas en esta guía de referencia.
Todas las rutas a recursos externos dentro de CSS se resuelven en la ubicación de CSS, no en la ubicación de la página del HTML del visor. Tenga en cuenta esta regla al copiar el CSS predeterminado en una ubicación diferente. Copie también los recursos predeterminados o actualice las rutas dentro del CSS personalizado.
El formato preferido para las ilustraciones de mapa de bits es PNG.
La ilustración de mapa de bits se ha asignado a elementos de interfaz de usuario utilizando la propiedad background-image.
Las propiedades width y height de un elemento de interfaz de usuario definen su tamaño lógico. El tamaño del mapa de bits pasado a background-image no afecta al tamaño lógico.
Para utilizar la alta densidad de píxeles de pantallas de alta resolución como Retina, especifique ilustraciones de mapa de bits dos veces más grandes que el tamaño del elemento de interfaz de usuario lógico. A continuación, aplique la propiedad -webkit-background-size:contain para reducir el fondo al tamaño del elemento de la interfaz de usuario lógica.
Para quitar un botón de la interfaz de usuario, agregue display:none a su clase CSS.
Puede utilizar varios formatos para los valores de color que admite CSS. Si necesita transparencia, use el formato rgba(R,G,B,A). De lo contrario, puede utilizar el formato #RRGGBB.

Elementos comunes de la interfaz de usuario section-d6330c9be8c444aa9b2a07886e3dbc2a

A continuación se muestra la documentación de referencia de los elementos de la interfaz de usuario que se aplica al visualizador de vídeo interactivo:

recommendation-more-help

b7426f53-aad9-4c00-83fc-664f30f681e8