Adición de recursos de Dynamic Media a las páginas adding-dynamic-media-assets-to-pages
Para agregar la funcionalidad Dynamic Media a los recursos que usa en sus sitios web, puede agregar directamente en la página el componente Dynamic Media, Interactive Media, Panoramic Media o Video 360 Media. Para agregar componentes, acceda al 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 agregar recursos de Dynamic Media directamente a la página si utiliza Adobe Experience Manager 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.
Añadir un componente de Dynamic Media a una página adding-a-dynamic-media-component-to-a-page
Añadir un componente multimedia 3D, Dynamic Media, Interactive Media, Panoramic Media, Smart Crop Video o Video 360 Media a una página es lo mismo que añadir un componente a cualquier página. Los componentes de Dynamic Media se describen en las secciones siguientes.
Para agregar un componente de Dynamic Media a una página:
-
En Experience Manager, abra la página donde desee agregar el componente Dynamic Media.
-
En el panel situado en el lado izquierdo de la página (si es necesario, alterne la visualización del panel lateral), seleccione el icono Componentes.
-
Bajo el encabezado Componentes, en la lista desplegable, seleccione Dynamic Media.
Si no hay ninguna lista de componentes de Dynamic Media disponible, debe habilitar los componentes de Dynamic Media que desee utilizar. Consulte Habilitar componentes de Dynamic Media.
-
Arrastre un componente Dynamic Media que desee usar y suéltelo en la ubicación deseada de la página.
-
Pase el puntero del ratón directamente sobre el componente. Cuando el componente esté rodeado por un cuadro azul, seleccione una vez para mostrar la barra de herramientas del componente. Seleccione el icono Configuración (llave inglesa).
-
Según el componente de Dynamic Media que haya colocado en la página, se abrirá un cuadro de diálogo de configuración. Establezca las opciones del componente según sea necesario.
El ejemplo siguiente muestra el cuadro de diálogo del componente Dynamic Media Vídeo 360 multimedia y las opciones disponibles en la lista desplegable Ajuste preestablecido de visor.
Componente multimedia del vídeo 360 de Dynamic Media.
-
Cuando haya terminado, en la esquina superior derecha del cuadro de diálogo, seleccione la marca de verificación para guardar los cambios.
Habilitar componentes de Dynamic Media enabling-dynamic-media-components
Si no hay componentes de Dynamic Media disponibles para agregar a una página, probablemente signifique que primero debe habilitar los componentes que desea utilizar.
Para habilitar los componentes de Dynamic Media:
-
En Experience Manager, abra la página donde desee agregar el componente Dynamic Media.
-
En el lado izquierdo de la barra de herramientas cerca de la parte superior de la página, selecciona el icono Información de página y, a continuación, selecciona Editar plantilla en la lista desplegable.
-
En el lado derecho de la barra de herramientas cerca de la parte superior de la página, en la lista desplegable, seleccione Estructura.
-
Cerca de la parte inferior de la página, seleccione Contenedor de diseño para abrir su barra de herramientas y, a continuación, seleccione el icono Directiva.
-
En la página Contenedor de diseño, bajo el encabezado Propiedades, asegúrese de que la ficha Componentes permitidos esté seleccionada.
-
Desplácese hasta que vea Dynamic Media.
-
Seleccione el icono > a la izquierda de Dynamic Media para poder expandir la lista y, a continuación, seleccione los componentes de Dynamic Media que desee habilitar.
-
Cerca de la esquina superior derecha de la página Contenedor de diseño, seleccione el icono Listo (marca de verificación).
-
En el lado derecho de la barra de herramientas cerca de la parte superior de la página, en la lista desplegable, seleccione Contenido inicial, luego agregue un componente de Dynamic Media a una página como de costumbre.
Localice los componentes de Dynamic Media localizing-dynamic-media-components
Puede localizar los componentes de Dynamic Media de una de las dos maneras 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 sitio, seleccione la página o el grupo de páginas que desee. Seleccione Propiedades y seleccione la ficha Avanzadas. Seleccione el idioma que desee para la localización.
note note NOTE No todos los idiomas disponibles en el menú Idioma tienen tokens asignados actualmente.
Componentes de Dynamic Media dynamic-media-components
Los componentes de Dynamic Media están disponibles cuando selecciona el icono Componentes y luego filtra en Dynamic Media.
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: utilícelo para cualquier recurso interactivo, como vídeo interactivo, imágenes interactivas o conjuntos de carrusel.
- Medios panorámicos: se utiliza para recursos de imagen panorámica o de realidad virtual panorámica.
- Vídeo 360 multimedia: se utiliza para recursos de vídeo 360 y vídeo de RV 360.
componente de Dynamic Media dynamic-media-component
El componente Dynamic Media es inteligente. Tanto si añade una imagen como si añade 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 es adaptable: el tamaño de la pantalla cambia automáticamente en función del tamaño de la pantalla. Todos los visualizadores son visualizadores de HTML5.
- Se están utilizando varias instancias del componente Dynamic Media en la misma página.
- Cada instancia utiliza el mismo tipo de recurso.
Cuando agregue el componente Dynamic Media y Configuración de Dynamic Media esté en blanco o no pueda agregar un recurso correctamente, compruebe lo siguiente:
- Ha habilitado Dynamic Media. Dynamic Media está deshabilitado de forma predeterminada.
- La imagen tiene un archivo tiff piramidal. Las imágenes que importa antes de habilitar Dynamic Media no tienen un archivo tiff piramidal.
Al trabajar con imágenes when-working-with-images
El componente Dynamic Media permite agregar imágenes dinámicas, incluidos conjuntos de imágenes, conjuntos de giros y conjuntos de medios mixtos. Puede acercar y alejar la imagen y, si procede, girar una imagen dentro de un conjunto de giros o seleccionar una imagen de otro tipo de conjunto.
También puede configurar el ajuste preestablecido de visualizador, el ajuste preestablecido de imagen o el formato de imagen directamente en el componente. Para que una imagen sea adaptable, puede establecer los puntos de interrupción o aplicar un ajuste preestablecido de imagen adaptable.
Edite la siguiente configuración de Dynamic Media seleccionando el icono Editar en el componente y, a continuación, Configuración de Dynamic Media.
-
Ajuste preestablecido de visor: seleccione un ajuste preestablecido de visor existente en el menú desplegable. Si el ajuste preestablecido de visualizador que busca no está visible, debe hacerlo visible. Consulte Administrar ajustes preestablecidos de visor. No puede seleccionar un ajuste preestablecido de visualizador si utiliza un ajuste preestablecido de imagen y a la inversa.
Esta opción es la única disponible si está viendo conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos. Los ajustes preestablecidos de visualizador que se muestran son inteligentes: solo aparecen los ajustes preestablecidos de visualizador relevantes.
-
Modificadores de visor: los modificadores de visor toman la forma de par nombre=valor con delimitador & y le permiten cambiar visores como se describe en la Guía de referencia de visores. Un ejemplo de un modificador de visor es
posterimage=img.jpg&caption=text.vtt,1que establece una imagen diferente para la miniatura de vídeo y asocia un archivo de subtítulos con el vídeo. -
Ajuste preestablecido de imagen: seleccione un ajuste preestablecido de imagen existente en el menú desplegable. Si el ajuste preestablecido de imagen que está buscando no está visible, debe hacerlo visible. Consulte Administración de ajustes preestablecidos de imagen. No puede seleccionar un ajuste preestablecido de visualizador si utiliza un ajuste preestablecido de imagen y a la inversa.
Esta opción no está disponible si está viendo conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
-
Modificadores de imagen: puede aplicar efectos de imagen suministrando comandos de imagen adicionales. Estos efectos se describen en Ajustes preestablecidos de imagen y en la Referencia del comando para servicio de imágenes.
Esta opción no está disponible si está viendo conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
-
Puntos de interrupción: si utiliza este recurso en un sitio adaptable, debe agregar los puntos de interrupción de la imagen. Los puntos de interrupción de imagen están separados por comas (,). Esta opción funciona cuando no hay altura o anchura definida en un ajuste preestablecido de imagen.
Esta opción no está disponible si está viendo conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
Puede editar la siguiente Configuración avanzada seleccionando Editar en el componente.
-
Optimizar para dispositivos de mayor resolución - Seleccione (predeterminada) la casilla de verificación para permitir la optimización de la RGPD (proporción de píxeles del dispositivo).
La opción Optimizar para dispositivos de mayor resolución solo se muestra cuando se cumple lo siguiente:
- En Tipo de ajuste preestablecido, Ajuste preestablecido de imagen está seleccionado, y RESS_IP está seleccionado en la lista desplegable Ajuste preestablecido de imagen.
Consulte también Acerca de la optimización de la proporción de píxeles del dispositivo. Se ignorará cualquier valor de DPR de Adobe Experience Manager Dynamic Media Smart Imaging.
-
Título: cambie el título de la imagen.
-
Texto alternativo: agregue un título a la imagen para los usuarios que tengan los gráficos desactivados.
Esta opción no está disponible si está viendo conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
-
URL, Abrir en: puede configurar un recurso para abrir un vínculo. Establezca la dirección URL y en Abrir en indique si desea que se abra en la misma ventana o en una nueva.
Esta opción no está disponible si está viendo conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
-
Anchura: escriba el valor en píxeles si desea que la imagen tenga un tamaño fijo. Si se deja este valor en blanco, el recurso se adaptará.
-
Altura: escriba el valor en píxeles si desea que la imagen tenga un tamaño fijo. Si se deja este valor en blanco, el recurso se adaptará.
Al trabajar con vídeo when-working-with-video
Utilice el componente Dynamic Media para añadir vídeo dinámico a las páginas web. Al editar el componente, puede elegir utilizar un ajuste preestablecido de visualizador de vídeo para reproducir el vídeo en la página.
Edite la siguiente configuración de Dynamic Media seleccionando Editar en el componente.
-
Ajuste preestablecido de visor: seleccione un ajuste preestablecido de visor de vídeo existente en el menú desplegable. Si el ajuste preestablecido de visualizador que busca no está visible, debe hacerlo visible. Consulte Administrar ajustes preestablecidos de visor.
-
Modificadores de visor: los modificadores de visor toman la forma de par nombre=valor con delimitador & y le permiten cambiar 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,1Con los modificadores de visor, por ejemplo, puede hacer lo siguiente:
-
Asocie un archivo de subtítulos con un vídeo: subtítulos
-
Asociar un archivo de navegación con un vídeo: navegación
Puede editar la siguiente Configuración avanzada seleccionando Editar en el componente.
-
-
Título: cambie el título del vídeo.
-
Anchura: escriba el valor en píxeles si desea que la imagen tenga un tamaño fijo. Si se deja este valor en blanco, el recurso se adaptará.
-
Altura: escriba el valor en píxeles si desea que la imagen tenga un tamaño fijo. Si se deja este valor en blanco, el recurso se adaptará.
Al trabajar con Recorte inteligente when-working-with-smart-crop
Utilice el componente Dynamic Media para agregar recursos de imagen de recorte inteligente a las páginas web. Al editar el componente, puede elegir utilizar un ajuste preestablecido de visualizador de vídeo para reproducir el vídeo en la página.
Consulte también Perfiles de imagen.
Edite la siguiente configuración de Dynamic Media seleccionando Editar en el componente.
-
Modificadores de imagen: puede aplicar efectos de imagen suministrando comandos de imagen adicionales. Estos efectos se describen en Ajustes preestablecidos de imagen y en la Referencia del comando para servicio de imágenes.
Esta opción no está disponible si está viendo conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
Puede editar la siguiente Configuración avanzada seleccionando Editar en el componente.
-
Habilitar coincidencia de relación de aspecto: para permitir que Dynamic Media elija una representación de recorte inteligente con una relación de aspecto que mejor se ajuste a la proporción de aspecto de la imagen original, seleccione esta opción.
-
Optimizar para dispositivos de mayor resolución - Seleccione (predeterminada) la casilla de verificación para permitir la optimización de la RGPD (proporción de píxeles del dispositivo).
La opción Optimizar para dispositivos de mayor resolución solo se muestra cuando se cumple lo siguiente:
- En Tipo de ajuste preestablecido, la opción Recorte inteligente está seleccionada.
Consulte también Acerca de la optimización de la proporción de píxeles del dispositivo. Se ignorará cualquier valor de DPR de Adobe Experience Manager Dynamic Media Smart Imaging.
-
Título: cambie el título de la imagen de recorte inteligente.
-
Texto alternativo: agregue un título a la imagen de recorte inteligente para los usuarios que tengan los gráficos desactivados.
Esta opción no está disponible si está viendo conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
-
URL, Abrir en: puede configurar un recurso para abrir un vínculo. Configure la dirección URL y, en Abrir en, indique si desea que se abra en la misma ventana o en una nueva.
Esta opción no está disponible si está viendo conjuntos de imágenes, conjuntos de giros o conjuntos de medios mixtos.
-
Anchura: escriba el valor en píxeles si desea que la imagen tenga un tamaño fijo. Si se deja este valor en blanco, el recurso se adaptará.
-
Altura: escriba el valor en píxeles si desea que la imagen tenga un tamaño fijo. Si se deja este valor en blanco, el recurso se adaptará.
Componente de medios interactivo interactive-media-component
El componente de medios interactivos es para los recursos que tienen interactividad, como zonas interactivas o mapas de imagen. Si tiene una imagen interactiva, un vídeo interactivo o un banner de carrusel, use el componente Medios interactivos.
El componente multimedia interactivo es inteligente. Tanto si añade una imagen como si añade un vídeo, tiene varias opciones. Además, el visor es adaptable: el tamaño de la pantalla cambia automáticamente en función del tamaño de la pantalla. Todos los visualizadores son visualizadores de HTML5.
- Varias instancias del componente de medios interactivos que se utilizan en la misma página.
- Cada instancia utiliza el mismo tipo de recurso.
Puede editar la siguiente configuración de General seleccionando Editar en el componente.
-
Ajuste preestablecido de visor: seleccione un ajuste preestablecido de visor existente en el menú desplegable. Si el ajuste preestablecido de visualizador que busca no está visible, debe hacerlo visible. Los ajustes preestablecidos del visor deben publicarse para poder utilizarse. Consulte Administración de ajustes preestablecidos de visor.
-
Título: cambie el título del vídeo.
-
Anchura: escriba el valor en píxeles si desea que la imagen tenga un tamaño fijo. Si se deja este valor en blanco, el recurso se adaptará.
-
Altura: escriba el valor en píxeles si desea que la imagen tenga un tamaño fijo. Si se deja este valor en blanco, el recurso se adaptará.
Puede editar la siguiente configuración de Agregar al carro seleccionando Editar en el componente.
-
Mostrar recurso del producto: este valor está seleccionado de forma predeterminada. El recurso de producto muestra una imagen del producto tal como se define en el módulo de Commerce. Desactive la marca de verificación para que no se muestre 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 tal como se define en el módulo Commerce. Desactive la marca de verificación para que no se muestre el precio del producto.
-
Mostrar formulario de productos: de forma predeterminada, este valor no está seleccionado. El formulario de producto incluye cualquier variante de producto, como tamaño y color. Desactive la marca de verificación para que no se muestren las variantes del producto.
Componente de medios panorámicas panoramic-media-component
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 grados de una habitación, propiedad, ubicación o paisaje. Para que una imagen se califique como panorama esférico, debe tener uno O ambos de los siguientes elementos:
- Una relación de aspecto de 2:1.
- Etiquetado con las palabras clave
equirectangularo (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.
- Se están utilizando varias instancias del componente medios panorámicos en la misma página.
- Cada instancia utiliza el mismo tipo de recurso.
Puede editar la siguiente configuración seleccionando Configurar en el componente.
- Ajuste preestablecido de visor: seleccione un visor existente en el menú desplegable Ajuste preestablecido de visor.
Si el ajuste preestablecido de visualizador que estaba buscando no está visible, compruebe que se ha publicado. Ajustes preestablecidos del visualizador de Publish antes de utilizarlos. Consulte Administrar ajustes preestablecidos de visor.
Componente multimedia del vídeo 360 video-media-component
Use el componente Vídeo 360 multimedia para procesar vídeo equirectangular en su página web y obtener una experiencia de visualización envolvente de una habitación, propiedad, ubicación, paisaje o procedimiento médico.
Durante la reproducción en una pantalla plana, el usuario tiene control del ángulo de visión; la reproducción en dispositivos móviles suele utilizar sus controles giroscópicos integrados.
El visor incluye compatibilidad nativa para la entrega de 360 recursos de vídeo. De forma predeterminada, no es necesaria ninguna configuración adicional para la visualización o reproducción. Puede entregar vídeo 360 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 seleccionando Configurar en el componente.
- Ajuste preestablecido de visor: seleccione un visor existente en el menú desplegable Ajuste preestablecido de visor. Use
Video360VRpara los usuarios finales que usan gafas de realidad virtual. Incluye controles básicos de reproducción de vídeo y funciones de medios sociales. UseVideo360_socialque incluya controles básicos de reproducción de vídeo. El procesamiento 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 funciones de medios sociales.
Si el ajuste preestablecido de visualizador que estaba buscando no está visible, compruebe que se ha publicado. Asegúrese de publicar los ajustes preestablecidos del visor antes de utilizarlos. Consulte Administrar ajustes preestablecidos de visor.
Uso de HTTP/2 para entregar recursos de Dynamic Media using-http-to-delivery-dynamic-media-assets
HTTP/2 es el nuevo protocolo web actualizado que mejora la forma en que los exploradores y servidores se comunican. Proporciona una transferencia de información más rápida y reduce la cantidad de potencia de procesamiento necesaria. La entrega de recursos de Dynamic Media ahora se puede realizar a través de HTTP/2, que proporciona mejores tiempos de respuesta y carga.
Consulte Entrega de contenido HTTP2 para obtener información detallada sobre cómo empezar a usar HTTP/2 con su cuenta de Dynamic Media.