Adição de ativos do Dynamic Media a páginas adding-dynamic-media-assets-to-pages

Para adicionar a funcionalidade Dynamic Media aos ativos que você usa nos sites, é possível adicionar o componente de Mídia Dynamic Media, Mídia interativa, Mídia panorâmica ou Mídia de vídeo 360 diretamente na página. Adicione componentes ao entrar no modo Layout e ativar os componentes do Dynamic Media. Em seguida, adicione esses componentes à página e adicionar ativos ao componente. Os componentes do Dynamic Media são inteligentes - eles sabem se você está adicionando uma imagem ou um vídeo e as opções de configuração disponíveis mudam de acordo.

Você pode adicionar ativos do Dynamic Media diretamente à página se estiver usando o Adobe Experience Manager como o WCM. Se estiver usando um dispositivo de terceiros no WCM, vincule ou incorpore os ativos. Para obter um site responsivo de terceiros, consulte Fornecer imagens otimizadas para um site responsivo.

NOTE
Certifique-se de publicar ativos antes de adicioná-los às páginas no Experience Manager. Consulte ativos do Publish Dynamic Media.

Adicionar um componente Dynamic Media a uma página adding-a-dynamic-media-component-to-a-page

Adicionar um componente de Mídia 3D, Dynamic Media, Mídia interativa, Mídia panorâmica, Recorte inteligente de vídeo ou Mídia de vídeo 360 a uma página é o mesmo que adicionar um componente a qualquer página. Os componentes do Dynamic Media são descritos nas seções a seguir.

Para adicionar um componente do Dynamic Media a uma página:

  1. No Experience Manager, abra a página em que deseja adicionar o componente Dynamic Media.

  2. No painel no lado esquerdo da página (se necessário, alterne a exibição do painel lateral), selecione o ícone Componentes.

  3. No cabeçalho Componentes, na lista suspensa, selecione Dynamic Media.

    Se nenhuma lista de componentes do Dynamic Media estiver disponível, você deverá ativar os componentes do Dynamic Media que deseja usar. Consulte Habilitar componentes do Dynamic Media.

    6_5_360video_wcmcomponent

  4. Arraste um componente Dynamic Media que você deseja usar e solte-o no local desejado na página.

  5. Passe o ponteiro do mouse diretamente no componente. Quando o componente estiver rodeado por uma caixa azul, selecione uma vez para exibir a barra de ferramentas do componente. Selecione o ícone Configuração (chave inglesa).

    6_5_360video_wcmcomponentconfigure

  6. Dependendo do componente do Dynamic Media que você soltou na página, uma caixa de diálogo de configuração se abre. Defina as opções do componente conforme necessário.

    O exemplo abaixo mostra a caixa de diálogo do componente de Mídia de Vídeo 360 do Dynamic Media e as opções disponíveis na lista suspensa Predefinição do Visualizador.

    Componente de mídia de vídeo 360

    O componente de mídia do Dynamic Media Video 360.

  7. Quando terminar, no canto superior direito da caixa de diálogo, marque a marca de seleção para salvar as alterações.

Ativar componentes do Dynamic Media enabling-dynamic-media-components

Se nenhum componente do Dynamic Media estiver disponível para ser adicionado a uma página, provavelmente significa que você deve primeiro ativar os componentes que deseja usar.

Para habilitar componentes do Dynamic Media:

  1. No Experience Manager, abra a página em que deseja adicionar o componente Dynamic Media.

  2. No lado esquerdo da barra de ferramentas próximo à parte superior da página, selecione o ícone Informações da página e selecione Editar modelo na lista suspensa.

    editar-modelo

  3. No lado direito da barra de ferramentas próximo à parte superior da página, na lista suspensa, selecione Estrutura.

    Política

  4. Próximo à parte inferior da página, selecione Contêiner de layout para abrir sua barra de ferramentas e, em seguida, selecione o ícone Política.

  5. Na página Contêiner de layout, no cabeçalho Propriedades, verifique se a guia Componentes permitidos está selecionada.

    Componentes permitidos

  6. Role até ver Dynamic Media.

  7. Selecione o ícone > à esquerda de Dynamic Media para expandir a lista e selecione os componentes do Dynamic Media que deseja habilitar.

    lista de componentes do Dynamic Media

  8. Próximo ao canto superior direito da página Contêiner de layout, selecione o ícone Concluído (marca de seleção).

  9. No lado direito da barra de ferramentas próximo à parte superior da página, na lista suspensa, selecione Conteúdo inicial e adicione um componente do Dynamic Media a uma página como de costume.

Localizar componentes do Dynamic Media localizing-dynamic-media-components

Você pode traduzir componentes do Dynamic Media de uma das duas formas a seguir:

  • Em uma página da Web no Sites, abra Propriedades e selecione a guia Avançado. Selecione o idioma desejado para localização.

    chlimage_1-172

  • No seletor de sites, selecione a página ou o grupo de páginas desejado. Selecione Propriedades e a guia Avançado. Selecione o idioma desejado para localização.

    note note
    NOTE
    Atualmente, nem todos os idiomas disponíveis no menu Idioma têm tokens atribuídos.

Componentes do Dynamic Media dynamic-media-components

Os componentes do Dynamic Media estão disponíveis ao selecionar o ícone Componentes e filtrar no Dynamic Media.

Os componentes do Dynamic Media disponíveis incluem o seguinte:

  • Dynamic Media - use para ativos como imagens, vídeo, eCatalogs e conjuntos de rotação.
  • Mídia interativa - Use para qualquer ativo interativo, como vídeo interativo, imagens interativas ou conjuntos de carrossel.
  • Mídia panorâmica - Use para ativos de imagem panorâmica ou VR panorâmica.
  • Mídia de vídeo 360 - Use para ativos de vídeo 360 e vídeo 360 VR.
NOTE
Esses componentes não estão disponíveis por padrão. Eles devem ser disponibilizados por meio do editor de modelo antes de você usá-los. Depois que eles forem disponibilizados non editor de modelo, você poderá adicionar os componentes à sua página como faria com qualquer outro componente Experience Manager.

6_5_dynamicmediawcmcomponents

Componente do Dynamic Media dynamic-media-component

O componente Dynamic Media é inteligente. Ao adicionar uma imagem ou um vídeo, você tem várias opções. O componente oferece suporte a Predefinições de imagem, visualizadores baseados em imagem, como conjuntos de imagens, conjuntos de rotação, conjuntos de mídia mista e vídeo. Além disso, o visualizador é responsivo - o tamanho da tela muda automaticamente com base no tamanho da tela. Todos os visualizadores são visualizadores HTML5.

NOTE
Se sua página da Web tiver o seguinte:
  • Várias instâncias do componente Dynamic Media em uso na mesma página.
  • Cada instância usa o mesmo tipo de ativo.
Não há suporte para atribuir uma predefinição do visualizador diferente a cada componente do Dynamic Media nessa página.
No entanto, é possível usar a mesma predefinição do visualizador para todos os componentes do Dynamic Media que usam ativos do mesmo tipo, na página.

Quando você adicionar o componente do Dynamic Media e as Configurações do Dynamic Media estiverem em branco ou não for possível adicionar um ativo corretamente, verifique o seguinte:

  • Você habilitou o Dynamic Media. O Dynamic Media está desativado por padrão.
  • A imagem tem um arquivo TIFF de pirâmide. As imagens importadas antes de habilitar o Dynamic Media não têm um arquivo TIFF em pirâmide.

Ao trabalhar com imagens when-working-with-images

O componente Dynamic Media permite adicionar imagens dinâmicas, incluindo conjuntos de imagens, conjuntos de rotação e conjuntos de mídia mista. Você pode ampliar, reduzir e, se aplicável, girar uma imagem em um conjunto de rotação ou selecionar uma imagem de outro tipo de conjunto.

Também é possível configurar a predefinição do visualizador, a predefinição da imagem ou o formato da imagem diretamente no componente. Para tornar uma imagem responsiva, você pode definir os pontos de interrupção ou aplicar uma predefinição de imagem responsiva.

Edite as seguintes Configurações do Dynamic Media selecionando o ícone Editar no componente e depois Configurações do Dynamic Media.

dm-settings-image-preset

NOTE
Por padrão, o componente de imagem do Dynamic Media é adaptável. Se desejar torná-lo de um tamanho fixo, defina-o no componente na guia Avançado com a Largura e a Altura.
  • Predefinição do visualizador - Selecione uma predefinição do visualizador existente no menu suspenso. Se a predefinição do visualizador que você está procurando não estiver visível, é necessário torná-la visível. Consulte Gerenciar predefinições do visualizador. Não é possível selecionar uma predefinição do visualizador se você estiver usando uma predefinição de imagem e vice-versa.

    Essa opção é a única disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista. As predefinições do visualizador exibidas são inteligentes - somente as predefinições relevantes do visualizador são exibidas.

  • Modificadores do visualizador - Os modificadores do visualizador tomam a forma do par nome=valor com um delimitador & e permitem alterar os visualizadores conforme descrito no Guia de Referência do Visualizador. Um exemplo de um modificador de visualizador é posterimage=img.jpg&caption=text.vtt,1 que define uma imagem diferente para a miniatura do vídeo e associa um arquivo de legendas ocultas ao vídeo.

  • Predefinição de imagem - Selecione uma predefinição de imagem existente no menu suspenso. Se a predefinição de imagem que você está procurando não estiver visível, será necessário torná-la visível. Consulte Gerenciamento de predefinições de imagem. Não é possível selecionar uma predefinição do visualizador se você estiver usando uma predefinição de imagem e vice-versa.

    Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista.

  • Modificadores de Imagem - Você pode aplicar efeitos de imagem fornecendo comandos de imagem adicionais. Esses efeitos são descritos nas Predefinições de imagem e na referência do Comando de disponibilização de imagens.

    Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista.

  • Pontos de interrupção - Se estiver usando este ativo em um site responsivo, você deve adicionar os pontos de interrupção da imagem. Os pontos de interrupção da imagem são separados por vírgulas (,). Essa opção funciona quando não há altura ou largura definidas em uma predefinição de imagem.

    Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista.

    Você pode editar as seguintes Configurações avançadas selecionando Editar no componente.

  • Otimizar para dispositivos de maior resolução - Marque (padrão) a caixa de seleção para permitir a otimização de DPR (Proporção de pixels do dispositivo).

    A opção Otimizar para dispositivos de maior resolução só é exibida quando o seguinte é verdadeiro:

    • Em Tipo de Predefinição, a Predefinição de Imagem está selecionada e o RESS_IP está selecionado na lista suspensa Predefinição de Imagem.

    configuração da proporção de pixels do dispositivo para a predefinição de imagem

    Consulte também Sobre a otimização da proporção de pixels do dispositivo. Quaisquer valores de DPR de Imagem inteligente do Adobe Experience Manager Dynamic Media são ignorados.

  • Título - Alterar o título da imagem.

  • Texto Alternativo - Adicione um título à imagem para os usuários que têm gráficos desativados.

    Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista.

  • URL, Abrir em - Você pode definir um ativo para abrir um link. Defina a URL e, em Abrir em, indique se deseja abri-la na mesma janela ou em uma nova.

    Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista.

  • Largura - Insira o valor em pixels se desejar que a imagem seja de tamanho fixo. Deixar esse valor em branco torna o ativo adaptável.

  • Altura - Insira o valor em pixels se desejar que a imagem seja de tamanho fixo. Deixar esse valor em branco torna o ativo adaptável.

Ao trabalhar com Vídeo when-working-with-video

Use o componente Dynamic Media para adicionar vídeo dinâmico às suas páginas da Web. Ao editar o componente, você pode optar por usar uma predefinição predefinida do visualizador de vídeo para reproduzir o vídeo na página.

chlimage_1-173

Edite as seguintes configurações do Dynamic Media selecionando Editar no componente.

NOTE
Por padrão, o componente de vídeo do Dynamic Media é adaptável. Se quiser torná-lo de um tamanho fixo, defina-o no componente com a Largura e a Altura na guia Avançado.
  • Predefinição do visualizador - Selecione uma predefinição do visualizador de vídeo existente no menu suspenso. Se a predefinição do visualizador que você está procurando não estiver visível, é necessário torná-la visível. Consulte Gerenciar predefinições do visualizador.

  • Modificadores do visualizador - Os modificadores do visualizador tomam a forma do par nome=valor com um delimitador & e permitem alterar os visualizadores conforme descrito no Guia de Referência de Visualizadores Adobe. Um exemplo de um modificador de visualizador é posterimage=img.jpg&caption=text.vtt,1

    Com modificadores do visualizador, por exemplo, você pode fazer o seguinte:

    • Associar um arquivo de legenda a um vídeo: legenda

    • Associar um arquivo de navegação a um vídeo: navegação

      Você pode editar as seguintes Configurações avançadas selecionando Editar no componente.

  • Título - Alterar o título do vídeo.

  • Largura - Insira o valor em pixels se desejar que a imagem seja de tamanho fixo. Deixar esse valor em branco torna o ativo adaptável.

  • Altura - Insira o valor em pixels se desejar que a imagem seja de tamanho fixo. Deixar esse valor em branco torna o ativo adaptável.

Ao trabalhar com o Recorte inteligente when-working-with-smart-crop

Use o componente Dynamic Media para adicionar ativos de imagem do Corte inteligente às suas páginas da Web. Ao editar o componente, você pode optar por usar uma predefinição predefinida do visualizador de vídeo para reproduzir o vídeo na página.

Consulte também Perfis de imagem.

dm-settings-smart-crop

Edite a seguinte Configuração do Dynamic Media selecionando Editar no componente.

NOTE
Por padrão, o componente de imagem do Dynamic Media é adaptável. Se desejar torná-lo de um tamanho fixo, defina-o no componente na guia Avançado com a Largura e a Altura.
  • Modificadores de Imagem - Você pode aplicar efeitos de imagem fornecendo comandos de imagem adicionais. Esses efeitos são descritos nas Predefinições de imagem e na referência do Comando de disponibilização de imagens.

    Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista.

    Você pode editar as seguintes Configurações avançadas selecionando Editar no componente.

  • Habilitar correspondência de taxa de proporção - Para permitir que o Dynamic Media escolha uma representação de recorte inteligente com uma taxa de proporção que melhor corresponda à taxa de proporção da imagem original, selecione esta opção.

  • Otimizar para dispositivos de maior resolução - Marque (padrão) a caixa de seleção para permitir a otimização de DPR (Proporção de pixels do dispositivo).

    A opção Otimizar para dispositivos de maior resolução só é exibida quando o seguinte é verdadeiro:

    • Em Tipo de predefinição, a opção Recorte inteligente está selecionada.

    configuração de taxa de pixels do dispositivo para corte inteligente

    Consulte também Sobre a otimização da proporção de pixels do dispositivo. Quaisquer valores de DPR de Imagem inteligente do Adobe Experience Manager Dynamic Media são ignorados.

  • Título - Alterar o título da imagem do Corte inteligente.

  • Texto Alternativo - Adicione um título à imagem de recorte inteligente para os usuários que têm gráficos desativados.

    Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista.

  • URL, Abrir em - Você pode definir um ativo para abrir um link. Defina o URL e, em Abrir no, indique se deseja abri-lo na mesma janela ou em uma nova janela.

    Essa opção não estará disponível se você estiver visualizando conjuntos de imagens, conjuntos de rotação ou conjuntos de mídia mista.

  • Largura - Insira o valor em pixels se desejar que a imagem seja de tamanho fixo. Deixar esse valor em branco torna o ativo adaptável.

  • Altura - Insira o valor em pixels se desejar que a imagem seja de tamanho fixo. Deixar esse valor em branco torna o ativo adaptável.

Componente de mídia interativa interactive-media-component

O componente de Mídia interativa é para os ativos que têm interatividade, como pontos de acesso ou mapas de imagem. Se você tiver uma imagem interativa, vídeo interativo ou banner de carrossel, use o componente Mídia interativa.

O componente de Mídia interativa é inteligente. Ao adicionar uma imagem ou um vídeo, você tem várias opções. Além disso, o visualizador é responsivo - o tamanho da tela muda automaticamente com base no tamanho da tela. Todos os visualizadores são visualizadores HTML5.

NOTE
Se sua página da Web tiver o seguinte:
  • Várias instâncias do componente de Mídia interativa sendo usadas na mesma página.
  • Cada instância usa o mesmo tipo de ativo.
Não há suporte para a atribuição de uma predefinição do visualizador diferente para cada componente de Mídia interativa nessa página.
No entanto, você pode usar a mesma predefinição do visualizador para todos os componentes de Mídia interativa que usam ativos do mesmo tipo, na página.

chlimage_1-174

Você pode editar as seguintes configurações de Geral selecionando Editar no componente.

  • Predefinição do visualizador - Selecione uma predefinição do visualizador existente no menu suspenso. Se a predefinição do visualizador que você está procurando não estiver visível, é necessário torná-la visível. As predefinições do visualizador devem ser publicadas antes de serem usadas. Consulte Gerenciamento de predefinições do visualizador.

  • Título - Alterar o título do vídeo.

  • Largura - Insira o valor em pixels se desejar que a imagem seja de tamanho fixo. Deixar esse valor em branco torna o ativo adaptável.

  • Altura - Insira o valor em pixels se desejar que a imagem seja de tamanho fixo. Deixar esse valor em branco torna o ativo adaptável.

    Você pode editar as seguintes configurações de Adicionar ao carrinho selecionando Editar no componente.

  • Mostrar ativo de produto - Por padrão, este valor está selecionado. O ativo do produto mostra uma imagem do produto conforme definido no módulo Commerce. Desmarque a marca de seleção para que o ativo do produto não seja exibido.

  • Mostrar Preço do Produto - Por padrão, este valor é selecionado. Preço do produto mostra o preço do item conforme definido no módulo Commerce. Desmarque a marca de seleção para que o preço do produto não seja exibido.

  • Mostrar Formulário de Produto - Por padrão, esse valor não está selecionado. O Formulário de produto inclui qualquer variante de produto, como tamanho e cor. Desmarque a marca de seleção para que as grades de produtos não sejam exibidas.

Componente de mídia panorâmica panoramic-media-component

O componente de Mídia panorâmica é para os ativos que são imagens panorâmicas esféricas. Essas imagens fornecem uma experiência de visualização de 360 graus de uma sala, propriedade, localização ou paisagem. Para que uma imagem seja qualificada como panorama esférico, ela deve ter uma ou ambas as opções a seguir:

  • Uma proporção de 2:1.
  • Marcado com as palavras-chave equirectangular ou (spherical + panorama) ou (spherical + panoramic). Consulte Usando Tags.

Tanto a proporção quanto os critérios de palavra-chave se aplicam aos ativos panorâmicos da página de detalhes do ativo e o componente Panorâmica Media WCM.

NOTE
Se sua página da Web tiver o seguinte:
  • Várias instâncias do componente Mídia panorâmica sendo usadas na mesma página.
  • Cada instância usa o mesmo tipo de ativo.
Não há suporte para a atribuição de uma predefinição do visualizador diferente para cada componente de Mídia panorâmica nessa página.
No entanto, você pode usar a mesma predefinição do visualizador para todos os componentes de Mídia panorâmica que usam ativos do mesmo tipo, na página.

panoramic-media-viewer-preset

Você pode editar a seguinte configuração selecionando Configurar no componente.

  • Predefinição do visualizador - Selecione um visualizador existente no menu suspenso Predefinição do visualizador.

Se a predefinição do visualizador que você estava procurando não estiver visível, verifique se ela foi publicada. predefinições do visualizador do Publish antes de usá-las. Consulte Gerenciamento de Predefinições do Visualizador.

Componente de mídia de vídeo 360 video-media-component

Use o componente de Mídia do Vídeo 360 para renderizar vídeo retangular equivalente em sua página da Web para obter uma experiência de exibição imersiva de sala, propriedade, local, paisagem ou procedimento médico.

Durante a reprodução em uma tela plana, o usuário tem controle do ângulo de visão; a reprodução em dispositivos móveis geralmente usa seus controles giroscópicos incorporados.

O visualizador inclui suporte nativo para a entrega de 360 ativos de vídeo. Por padrão, nenhuma configuração adicional é necessária para exibir ou reproduzir. Você fornece vídeo 360 usando extensões de vídeo padrão, como .mp4, .mkv e .mov. O codec mais comum é o H.264.

6_5_360video_wcmcomponent-1

Você pode editar a seguinte configuração selecionando Configurar no componente.

  • Predefinição do visualizador - Selecione um visualizador existente no menu suspenso Predefinição do visualizador. Use o Video360VR para usuários finais que utilizam óculos de realidade virtual. Ele inclui controles básicos de reprodução de vídeo e recursos de redes sociais. Use Video360_social que inclua controles básicos de reprodução de vídeo. A renderização de vídeo é feita no modo estéreo. O controle manual do ponto de vista está desativado, mas o controle giroscópico está ativado. Não há recursos de redes sociais.

Se a predefinição do visualizador que você estava procurando não estiver visível, verifique se ela foi publicada. Certifique-se de publicar as predefinições do visualizador antes de usá-las. Consulte Gerenciamento de Predefinições do Visualizador.

Utilização de HTTP/2 para fornecer ativos do Dynamic Media using-http-to-delivery-dynamic-media-assets

HTTP/2 é o novo protocolo da Web atualizado que melhora a maneira como navegadores e servidores se comunicam. Ele possibilita a transferência mais rápida de informações e reduz a quantidade necessária de poder de processamento. A entrega de ativos do Dynamic Media agora pode ser por HTTP/2, que fornece melhores tempos de resposta e carregamento.

Consulte Entrega de conteúdo HTTP2 para obter detalhes completos sobre a introdução ao uso de HTTP/2 com sua conta do Dynamic Media.

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2