Show Menu
TEMAS×

Adición de recursos de Dynamic Media a las páginas

Para añadir la funcionalidad Dynamic Media a los recursos que utilice en sus sitios web, puede agregar directamente en la página el componente Dynamic Media , Interactive Media , Panoramic Media o Video 360 Media . Para ello, indique el modo Diseño y active los componentes de Dynamic Media. A continuación, puede añadir estos componentes a la página y añadir recursos al componente. Los componentes de Dynamic Media son inteligentes: saben si va a añadir una imagen o un vídeo y las opciones de configuración disponibles cambian en consecuencia.
Puede añadir recursos de Dynamic Media directamente a la página si utiliza AEM como WCM. Si utiliza un tercero para su WCM, vincule o incruste los recursos. Para ver un sitio web interactivo de terceros, consulte Distribución de imágenes optimizadas en un sitio interactivo .
Debe publicar recursos antes de agregarlos a páginas en AEM. See Publishing Dynamic Media Assets .

Adding a Dynamic Media component to a page

Añadir un componente de medios 3D, medios dinámicos, medios interactivos, medios panorámicos, vídeos de recorte inteligente o medios de vídeo 360 a una página es lo mismo que agregar un componente a cualquier página. Los componentes de Dynamic Media se describen en las secciones siguientes.
Añadir un componente de Dynamic Media en una página
  1. En AEM, abra la página a la que desea añadir el componente de Dynamic Media.
  2. En el panel izquierdo, toque el icono Componentes y, a continuación, filtre para Medios dinámicos.
    Si no hay ninguna lista de componentes de Dynamic Media disponible, es probable que deba activar los componentes de Dynamic Media que desee utilizar. See Enabling Dynamic Media components .
  3. Arrastre un componente de Dynamic Media y colóquelo en la ubicación deseada de la página.
  4. Sitúe el puntero del ratón directamente sobre el componente. Cuando el componente esté rodeado por un cuadro azul, toque una vez para mostrar la barra de herramientas del componente. Toque el icono Configuración (llave) .
  5. Según el componente Dynamic Media que haya colocado en la página, se abre un cuadro de diálogo de configuración. Configure las opciones del componente según sea necesario.
    El ejemplo siguiente muestra el cuadro de diálogo del componente Dynamic Media Video 360 Media y las opciones disponibles en la lista desplegable Ajustes preestablecidos de visor.
    Componente Dynamic Media Video 360 Media.
  6. Cuando haya terminado, en la esquina superior derecha del cuadro de diálogo, toque la marca de verificación para guardar los cambios.

Activación de componentes de Dynamic Media

Si no hay componentes de Dynamic Media disponibles para agregar a una página, es probable que primero deba habilitar los componentes que desee utilizar.
  1. En AEM, abra la página a la que desea añadir el componente de Dynamic Media.
  2. En la parte izquierda de la barra de herramientas, cerca de la parte superior de la página, toque el icono Información de página y, a continuación, Editar plantilla en la lista desplegable.
  3. En la parte derecha de la barra de herramientas cerca de la parte superior de la página, en la lista desplegable, toque Estructura .
  4. Cerca de la parte inferior de la página, toque el Contenedor ​Diseño para abrir su barra de herramientas y, a continuación, toque el icono Política.
  5. En la página Contenedor ​Diseño, bajo el encabezado Propiedades , asegúrese de que la ficha Componentes ​permitidos está seleccionada.
  6. Desplácese hasta que vea Medios dinámicos .
  7. Toque el icono > situado a la izquierda de Medios dinámicos para expandir la lista y seleccione los componentes de Dynamic Media que desee activar.
  8. Cerca de la esquina superior derecha de la página de Contenedor de diseño, toque el icono Listo (marca de verificación).
  9. En la parte derecha de la barra de herramientas cerca de la parte superior de la página, en la lista desplegable, toque Contenido ​inicial y, a continuación, agregue un componente Medios dinámicos a una página como de costumbre.

Localización de componentes de Dynamic Media

Puede localizar los componentes de Dynamic Media de una de las dos formas siguientes:
  • En una página web de Sites, abra Propiedades y seleccione la pestaña Avanzadas . Seleccione el idioma que desee para la localización.
  • En el selector de sitios, seleccione la página o el grupo de páginas que desee. Toque Propiedades y seleccione la ficha Avanzadas . Seleccione el idioma que desee para la localización.
    Tenga en cuenta que actualmente no todos los idiomas disponibles en el menú Idioma tienen tokens asignados.

Componentes de Dynamic Media disponibles

Los componentes de Dynamic Media están disponibles cuando toca el icono Componentes y, a continuación, se filtran en Medios dinámicos .
Los componentes de Dynamic Media disponibles son los siguientes:
  • Dynamic Media: Se utiliza para recursos como imágenes, vídeos, catálogos electrónicos y conjuntos de giros.
  • Medios interactivos: se utiliza para cualquier recurso interactivo, como vídeo interactivo, imágenes interactivas o conjuntos de carrusel.
  • Medios panorámicos: utiliza para imágenes panorámicas o imágenes panorámicas VR.
  • Medios de vídeo 360: se utilizan para recursos de vídeo de 360 y 360 VR.
Estos componentes no están disponibles de forma predeterminada y deben estar disponibles mediante el editor de plantillas antes de su uso. Una vez que estén disponibles en el editor de plantillas, puede añadir los componentes a la página como lo haría con cualquier otro componente de AEM.

Componente: Medios dinámicos

El componente Dynamic Media es inteligente. Según si agrega una imagen o un vídeo, tiene varias opciones. El componente admite ajustes preestablecidos de imagen, visores basados en imágenes, como conjuntos de imágenes, conjuntos de giros, conjuntos de medios mixtos y vídeo. Además, el visor responde: el tamaño de la pantalla cambia automáticamente en función del tamaño de la pantalla. Todos los visores son visores HTML5.
Si la página web tiene lo siguiente:
  • Varias instancias del componente Dynamic Media que se están utilizando en la misma página.
  • Cada instancia utiliza el mismo tipo de recurso.
Tenga en cuenta que no se admite la asignación de un ajuste preestablecido de visor diferente a cada componente de Dynamic Media en esa página.
Sin embargo, puede utilizar el mismo ajuste preestablecido de visor para todos los componentes de Dynamic Media que utilicen recursos del mismo tipo en la página.
Cuando se añade el componente de Dynamic Media y la opción Configuración de Dynamic Media está vacía o no puede añadir un recurso correctamente, compruebe lo siguiente:
  • La imagen tiene un archivo TIFF piramidal. Las imágenes importadas antes de la activación de Dynamic Media no tienen un archivo TIFF piramidal.

Uso de imágenes

El componente de Dynamic Media permite añadir imágenes dinámicas, como conjuntos de imágenes, conjuntos de giros y conjuntos de medios mixtos. Puede acercar, alejar y, si procede, girar una imagen en un conjunto de giros o seleccionar una imagen de otro tipo de conjunto.
También puede configurar el ajuste preestablecido de visor, el ajuste preestablecido de imagen o el formato de imagen directamente en el componente. Para hacer que en una imagen sea interactiva, puede establecer puntos de interrupción o aplicar un ajuste preestablecido de imagen interactiva.
You can edit the following Dynamic Media Settings by tapping the Edit icon in the component and then Dynamic Media Settings .
De forma predeterminada, el componente de imagen Dynamic Media es adaptable. Si desea que tenga un tamaño fijo, configúrelo en el componente de la pestaña Avanzado con la anchura y la altura apropiadas.
  • Ajuste preestablecido de visor: seleccione un ajuste preestablecido de visor existente en el menú desplegable. Si el ajuste preestablecido de visor que busca no está visible, es posible que tenga que hacerlo visible. Consulte Administración de ajustes preestablecidos de visor. No es posible seleccionar un ajuste preestablecido de visor si utiliza un ajuste preestablecido de imagen, y viceversa.
    Esta es la única opción disponible al visualizar conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos. Los ajustes preestablecidos de visor que se muestran también son inteligentes: solo aparecen los ajustes preestablecidos del visor pertinente.
  • Modificadores de visor: los modificadores de visor adoptan la forma de par nombre=valor con un delimitador & y permiten cambiar los visores como se describe en la Guía de referencia de visores. Un ejemplo de modificador de visor es posterimage=img.jpg&caption=text.vtt,1 el que establece una imagen diferente para la miniatura de vídeo y asocia un archivo de subtítulos o subtítulos opcionales al vídeo.
  • Ajuste preestablecido de imagen: seleccione un ajuste preestablecido de imagen existente en el menú desplegable. Si el ajuste preestablecido de imagen que busca no está visible, es posible que tenga que hacerlo visible. Consulte Administración de ajustes preestablecidos de imagen. No es posible seleccionar un ajuste preestablecido de visor si utiliza un ajuste preestablecido de imagen, y viceversa.
    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
  • Modificadores de imagen: se pueden aplicar efectos de imagen mediante comandos de imagen adicionales. Estos se describen en Ajustes preestablecidos de imagen y en la referencia de comandos de servicio de imágenes.
    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
  • Puntos de interrupción : si utiliza este recurso en un sitio interactivo, debe agregar los puntos de interrupción de la imagen. Los puntos de interrupción de imagen deben separarse por comas (,). Esta opción funciona cuando no se ha definido ninguna altura o anchura en el ajuste preestablecido de una imagen.
    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
    You can edit the following Advanced Settings by tapping Edit in the component.
  • Título : permite cambiar el título de la imagen.
  • Texto alternativo: Añada un título a la imagen para aquellos usuarios que tengan los gráficos desactivados.
    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
  • URL, Abrir en : puede definir un recurso para abrir un vínculo. Defina la dirección URL y, en Abrir en, indique si quiere que se abra en la misma ventana o en una nueva.
    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
  • Anchura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Al dejar este valor en blanco, el recurso se adapta.
  • Altura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Al dejar este valor en blanco, el recurso se adapta.

Uso de vídeos

Utilice el componente Dynamic Media para añadir vídeo dinámico a las páginas web. Cuando edita el componente, tiene la opción de usar un ajuste preestablecido de visor de vídeo predefinido para reproducir el vídeo en la página.
You can edit the following Dynamic Media Settings by clicking Edit in the component.
De forma predeterminada, el componente de vídeo de Dynamic Media es adaptable. If you want to make it a fixed size, set it in the component with the Width and Height in the Advanced tab.
  • [!Ajuste preestablecido de visor UICONTROL: seleccione un ajuste preestablecido de visor de vídeo existente en el menú desplegable. Si el ajuste preestablecido de visor que busca no está visible, es posible que tenga que hacerlo visible. Consulte Administración de ajustes preestablecidos de visor.
  • [!Modificadores del visor UICONTROL: los modificadores del visor adoptan la forma de par nombre=valor con delimitador & y permiten cambiar los visores como se describe en la Guía de referencia de visores de Adobe. Un ejemplo de modificador de visor es posterimage=img.jpg&caption=text.vtt,1
    Con los modificadores de visor, por ejemplo, puede hacer lo siguiente:
    • Asocie un archivo de subtítulos con un vídeo: caption
    • Asociación de un archivo de navegación con un vídeo: navegación
    You can edit the following Advanced Settings by clicking Edit in the component.
  • [!Título UICONTROL: cambie el título del vídeo.
  • Anchura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Al dejar este valor en blanco, el recurso se adapta.
  • Altura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Al dejar este valor en blanco, el recurso se adapta.

Al trabajar con recorte inteligente

Utilice el componente Dynamic Media para añadir recursos de imagen de recorte inteligente a sus páginas web. Cuando edita el componente, tiene la opción de usar un ajuste preestablecido de visor de vídeo predefinido para reproducir el vídeo en la página.
Consulte también Perfiles de imagen .
You can edit the following Dynamic Media Setting by clicking Edit in the component.
De forma predeterminada, el componente de imagen Dynamic Media es adaptable. Si desea que tenga un tamaño fijo, configúrelo en el componente de la pestaña Avanzado con la anchura y la altura apropiadas.
  • Modificadores de imagen: se pueden aplicar efectos de imagen mediante comandos de imagen adicionales. Estos se describen en Ajustes preestablecidos de imagen y en la referencia de comandos de servicio de imágenes.
    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
    You can edit the following Advanced Settings by clicking Edit in the component.
  • Habilitar coincidencia de relación de aspecto: seleccione esta opción para permitir que Dynamic Media elija una representación de recorte inteligente con una proporción de aspecto que mejor se ajuste a la proporción de aspecto de la imagen original.
  • Título : cambie el título de la imagen de recorte inteligente.
  • Texto alternativo: Añada un título a la imagen de recorte inteligente para los usuarios que tienen gráficos desactivados.
    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
  • URL, Abrir en : puede definir un recurso para abrir un vínculo. Defina la dirección URL y, en Abrir en, indique si quiere que se abra en la misma ventana o en una nueva.
    Esta opción no está disponible si visualiza conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
  • Anchura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Al dejar este valor en blanco, el recurso se adapta.
  • Altura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Al dejar este valor en blanco, el recurso se adapta.

Componente: Medios interactivos

El componente de Medios interactivos es para los recursos que tienen elementos interactivos integrados en ellos, como puntos interactivos o mapas de imágenes. Si tiene una imagen interactiva, un vídeo interactivo o un titular de carrusel, utilice el componente de Medios interactivos .
El componente Medios interactivos es inteligente. Según si agrega una imagen o un vídeo, tiene varias opciones. Además, el visor responde: el tamaño de la pantalla cambia automáticamente en función del tamaño de la pantalla. Todos los visores son visores HTML5.
Si la página web tiene lo siguiente:
  • Varias instancias del componente Medios interactivos que se están utilizando en la misma página.
  • Cada instancia utiliza el mismo tipo de recurso.
Tenga en cuenta que no se admite la asignación de un ajuste preestablecido de visor diferente a cada componente de medios interactivos de esa página.
Sin embargo, puede utilizar el mismo ajuste preestablecido de visor para todos los componentes de medios interactivos que utilicen recursos del mismo tipo en la página.
You can edit the following General settings by tapping Edit in the component.
  • Ajuste preestablecido de visor: seleccione un ajuste preestablecido de visor existente en el menú desplegable. Si el ajuste preestablecido de visor que busca no está visible, es posible que tenga que hacerlo visible. Los ajustes preestablecidos de visor se deben publicar para que se puedan usar. Consulte Administración de ajustes preestablecidos de visor.
  • Título : cambie el título del vídeo.
  • Anchura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Al dejar este valor en blanco, el recurso se adapta.
  • Altura : introduzca el valor en píxeles si desea que la imagen tenga un tamaño fijo. Al dejar este valor en blanco, el recurso se adapta.
    Puede editar las siguientes opciones de configuración Añadir a carro al hacer clic en Editar en el componente.
  • Mostrar recurso de producto: este valor está seleccionado de forma predeterminada. El recurso del producto muestra una imagen del producto, según se ha definido en el módulo Commerce. Desactive la casilla para no mostrar el recurso del producto.
  • Mostrar precio del producto: este valor está seleccionado de forma predeterminada. El precio del producto muestra el precio del artículo, según se ha definido en el módulo Commerce. Desactive la casilla para no mostrar el precio del producto.
  • Mostrar formulario de producto: de forma predeterminada, este valor no está seleccionado. En el formulario del producto se incluye las variantes de producto, como talla y color. Desactive la casilla para no mostrar las variantes del producto.

Componente: Medios panorámicos

El componente de medios panorámicos es para aquellos recursos que son imágenes panorámicas esféricas. Estas imágenes proporcionan una experiencia de visualización de 360° de una habitación, propiedad, ubicación o paisaje. Para que una imagen se considere panorámica esférica, debe tener una O ambas de las opciones siguientes:
  • Proporción de aspecto de 2:1.
  • Se etiqueta con las palabras clave equirectangular o ( spherical + panorama ) o ( spherical + panoramic ). Consulte Uso de etiquetas .
Tanto la proporción de aspecto como los criterios de palabra clave se aplican a los recursos panorámicos para la página de detalles de recursos y el componente WCM de medios panorámicas .
Si la página web tiene lo siguiente:
  • Varias instancias del componente Medios panorámicas que se utilizan en la misma página.
  • Cada instancia utiliza el mismo tipo de recurso.
Tenga en cuenta que no se admite la asignación de un ajuste preestablecido de visualizador diferente a cada componente de medios panorámicos de esa página.
Sin embargo, puede utilizar el mismo ajuste preestablecido de visor para todos los componentes de medios panorámicas que utilicen recursos del mismo tipo en la página.
Puede editar la siguiente configuración tocando Configurar en el componente.
  • Ajuste preestablecido de visor: seleccione un visor existente en el menú desplegable Ajustes preestablecidos de visor.
Si el ajuste preestablecido de visor que está buscando no está visible, asegúrese de que se ha publicado. Debe publicar ajustes preestablecidos de visor para poder utilizarlos. Consulte Administración de ajustes preestablecidos de visor .

Componente: Medios de vídeo 360

Utilice el componente Vídeo de medios 360 para procesar vídeos equirectangulares en la página web para una experiencia de visualización envolvente de una sala, propiedad, ubicación, paisaje o procedimiento médico.
Durante la reproducción en una pantalla plana, el usuario controla el ángulo de visualización; la reproducción en dispositivos móviles suele aprovechar los controles giroscópicos integrados.
El visor incluye compatibilidad nativa con el envío de 360 recursos de vídeo. De forma predeterminada, no es necesaria ninguna configuración adicional para la visualización o reproducción. El vídeo 360 se distribuye con extensiones de vídeo estándar como .mp4, .mkv y .mov. El códec más común es H.264.
Puede editar la siguiente configuración tocando Configurar en el componente.
  • Ajuste preestablecido de visor: seleccione un visor existente en el menú desplegable Ajustes preestablecidos de visor. Utilice Video360VR para los usuarios finales que utilicen gafas de realidad virtual. Incluye controles básicos de reproducción de vídeo y funciones de medios sociales. Utilice Video360_social, que incluye controles básicos de reproducción de vídeo. La representación de vídeo se realiza en modo estéreo. El control manual del punto de vista está desactivado, pero el control giroscópico está activado. No hay características de medios sociales.
Si el ajuste preestablecido de visor que está buscando no está visible, asegúrese de que se ha publicado. Debe publicar ajustes preestablecidos de visor para poder utilizarlos. Consulte Administración de ajustes preestablecidos de visor .

Uso de HTTP/2 para envío de recursos de Dynamic Media

HTTP/2 es el nuevo protocolo web actualizado que mejora la forma en que se comunican los exploradores y los servidores. Proporciona una transferencia de información más rápida y reduce la cantidad de potencia de procesamiento necesaria. Ahora, el Envío de recursos de Dynamic Media puede realizarse a través de HTTP/2, lo que proporciona una mejor respuesta y tiempos de carga.
Consulte Envío de contenido Preguntas frecuentes sobre la entrega de contenido HTTP2 HTTP2 para obtener información detallada sobre cómo empezar a utilizar HTTP/2 con su cuenta de Dynamic Media.