Adicionar ativos Dynamic Media às páginas

Para adicionar a funcionalidade Dynamic Media aos ativos que você usa nos sites, é possível adicionar o componente Dynamic Media, Mídia interativa, Mídia panorâmica ou Mídia de vídeo 360 diretamente na página. Você entra no modo Layout e ativa os componentes do Dynamic Media. Em seguida, adicione esses componentes à página e adicione 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ê adiciona ativos do Dynamic Media diretamente à página se estiver usando Adobe Experience Manager como seu WCM. Se estiver usando um dispositivo de terceiros para o WCM, link ou embed seus ativos. Para obter um site responsivo de terceiros, consulte entrega de imagens otimizadas para um site responsivo.

Adicionar um componente Dynamic Media a uma página

Adicionar um componente de mídia 3D, Dynamic Media, Mídia interativa, Mídia panorâmica, Vídeo de corte inteligente ou Vídeo 360 a uma página é o mesmo que adicionar um componente a qualquer página.

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

1. Em Experience Manager, abra a página à qual deseja adicionar o componente Dynamic Media.

2. No painel esquerdo, selecione o Componentes e, em seguida, filtre pelo Dynamic Media.

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

   

3. Arraste um Dynamic Media e solte-o no local desejado na página.

4. 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 Configuração (chave inglesa) ícone .

   

5. Dependendo do componente do Dynamic Media que você soltou na página, uma caixa de diálogo de configuração é aberta. Definir as opções do componente conforme necessário.

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

   

   O componente de mídia Dynamic Media Video 360.

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

Ativar componentes do Dynamic Media

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

1. Em Experience Manager, abra a página à qual deseja adicionar o componente Dynamic Media.

2. À esquerda da barra de ferramentas, perto da parte superior da página, selecione o ícone Informações da página e selecione Editar modelo na lista suspensa.

   

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

   

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

5. No Contêiner de layout na página Propriedades verifique se a variável Componentes permitidos é selecionada.

   

6. Role até ver Dynamic Media.

7. Selecione o ícone > à esquerda de Dynamic Media e selecione os componentes do Dynamic Media que deseja ativar.

   

8. Próximo ao canto superior direito do 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.

10. Adicionar um componente Dynamic Media a uma página como de costume.

Localizar componentes do Dynamic Media

Você pode localizar componentes do Dynamic Media de uma das duas maneiras:

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

  

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

  OBSERVAÇÃO

  Nem todos os idiomas disponíveis no Idioma têm tokens atribuídos no momento.

Componentes disponíveis do Dynamic Media

Os componentes do Dynamic Media estão disponíveis ao selecionar a variável Componentes ícone e, em seguida, filtre em Dynamic Media.

Os componentes do Dynamic Media disponíveis incluem:

• 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 imagens panorâmicas ou ativos de imagens VR panorâmicas.
• Mídia de vídeo 360 - Use para 360 vídeos e 360 vídeos VR.

Componente: Dynamic Media

O componente Dynamic Media é inteligente. Se você adicionar uma imagem ou um vídeo, você terá 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 são visualizadores HTML5.

Quando você adiciona o componente Mídia dinâmica e as Configurações de mídia dinâmica estão em branco ou não é possível adicionar um ativo corretamente, verifique o seguinte:

• 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 de pirâmide.

Ao trabalhar com imagens

O componente Mídia dinâmica 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, transformar uma imagem em um conjunto de giro ou selecionar uma imagem de outro tipo de conjunto.

Você também pode 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.

Você pode editar as seguintes configurações do Dynamic Media selecionando o Editar no componente e, em seguida, Configurações do Dynamic Media.

• Predefinição do visualizador - Selecione uma predefinição de visualizador existente na lista suspensa. Se a predefinição do visualizador que você está procurando não estiver visível, você deve 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 é a única opção 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 também são exibidas somente para smart viewer.

• Modificadores do visualizador - Os modificadores do visualizador assumem a forma de par name=value com um & delimitador e permitem alterar os visualizadores, conforme descrito no Guia de referência dos visualizadores. Um exemplo de um modificador do visualizador é posterimage=img.jpg&caption=text.vtt,1 que define uma imagem diferente para a miniatura do vídeo e associa um arquivo de legenda/subtítulo fechado ao vídeo.

• Predefinição de imagem - Selecione uma predefinição de imagem existente na lista suspensa. Se a predefinição de imagem que você está procurando não estiver visível, você deve torná-la visível. Consulte Gerenciar predefinições de imagens. 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 mix de mídia.

• Modificadores de imagem - Você pode aplicar efeitos de imagem fornecendo mais comandos de imagem. Esses comandos são descritos em 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 mix de mídia.

• Pontos de interrupção - Se você estiver usando esse ativo em um site responsivo, será necessário adicionar os pontos de interrupção da imagem. Os pontos de interrupção da imagem devem ser separados por vírgulas (,). Essa opção funciona quando não há altura ou largura definida 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 mix de mídia.

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

• Otimizar para dispositivos de resolução mais alta - Selecione (padrão) a caixa de seleção para permitir a otimização do DPR (Device Pixel Ratio).

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

  • Em Tipo de predefinição, Predefinição de imagem estiver selecionada, e RESS_IP é selecionado no Predefinição de imagem lista suspensa.

  

  Consulte também Sobre a otimização da taxa de pixels do dispositivo.

  Qualquer Experience Manager Os valores do DPR do Dynamic Media Smart Imaging são ignorados.

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

• Texto alternativo - Adicione um título à imagem para os usuários que tenham os 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 mix de mídia.

• URL, Abrir em - É possível definir um ativo para abrir um link. Defina o URL e, em Abrir em, indique se você deseja que ele abra 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 mix de mídia.

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

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

Ao trabalhar com vídeo

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 de visualizador de vídeo predefinida para reproduzir o vídeo na página.

Você pode editar as seguintes configurações do Dynamic Media selecionando Editar no componente .

• Predefinição do visualizador - Selecione uma predefinição de visualizador de vídeo existente na lista suspensa. Se a predefinição do visualizador que você está procurando não estiver visível, você deve torná-la visível. Consulte Gerenciar predefinições do visualizador.

• Modificadores do visualizador - Os modificadores do visualizador assumem a forma de name=value par com um & delimiter. Eles permitem alterar os visualizadores conforme descrito no Guia de referência de visualizadores do Adobe. Um exemplo de um modificador do visualizador é posterimage=img.jpg&caption=text.vtt,1

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

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

  • 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 - Altere o título do vídeo.

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

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

Ao trabalhar com o Recorte inteligente

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

Consulte Usar o recorte inteligente com o Experience Manager Assets Dynamic Media

Consulte também Perfis de imagem.

Você pode editar a seguinte configuração do Dynamic Media selecionando Editar no componente .

• Modificadores de imagem - Você pode aplicar efeitos de imagem fornecendo mais comandos de imagem. Esses comandos são descritos em 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 mix de mídia.

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

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

• Otimizar para dispositivos de resolução mais alta - Selecione (padrão) a caixa de seleção para permitir a otimização do DPR (Device Pixel Ratio).

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

  • Em Tipo de predefinição, Corte inteligente está selecionada.

  

  Consulte também Sobre a otimização da taxa de pixels do dispositivo.

  Qualquer Experience Manager Os valores do DPR do Dynamic Media Smart Imaging são ignorados.

• Título - Altere o título da imagem do Recorte 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 mix de mídia.

• URL, Abrir em - É possível definir um ativo para abrir um link. Defina o URL e, em Abrir em, indique se você deseja que ele abra 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 mix de mídia.

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

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

Componente: Mídia interativa

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

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

Você pode editar o seguinte Geral selecionando Editar no componente .

• Predefinição do visualizador - Selecione uma predefinição de visualizador existente na lista suspensa. Se a predefinição do visualizador que você está procurando não estiver visível, você deve torná-la visível. As Predefinições do visualizador devem ser publicadas para poderem ser usadas. Consulte Gerenciar predefinições do visualizador.

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

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

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

  Você pode editar o seguinte Adicionar ao carrinho selecionando Editar no componente .

• Mostrar ativo do produto - Por padrão, esse valor é selecionado. O ativo do produto mostra uma imagem do produto, conforme definido no módulo Comércio. Limpe a marca de seleção para não mostrar o ativo do produto.

• Mostrar preço do produto - Por padrão, esse valor é selecionado. O preço do produto mostra o preço do item, conforme definido no módulo Comércio. Limpe a marca de seleção para não mostrar o preço do produto.

• Mostrar formulário do produto - Por padrão, esse valor não está selecionado. O Formulário de produto inclui quaisquer variantes de produto, como tamanho e cor. Limpe a marca de seleção para não mostrar as variantes do produto.

Componente: Mídia panorâmica

O componente 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° de uma sala, propriedade, local ou paisagem. Para que uma imagem seja qualificada como um panorama esférico, ela deve ter um OU ambos os itens a seguir:

• Uma proporção de aspecto de 2:1.
• Marcado com as palavras-chave equirectangular ou (spherical + panorama) ou (spherical + panoramic). Consulte Uso de 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.

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

• Predefinição do visualizador - Selecione um visualizador existente na lista suspensa Predefinição do visualizador .

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

Componente: Mídia de vídeo 360

Use o Mídia de vídeo 360 para renderizar o vídeo necessário na página da Web. Isso garante uma experiência de visualização imersiva de uma sala, propriedade, localização, paisagem ou procedimento médico.

Durante a reprodução num ecrã plano, o utilizador controla o ângulo de visualizaçã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 visualizar ou reproduzir. Você fornece 360 vídeos usando extensões de vídeo padrão, como .mp4, .mkv e .mov. O codec mais comum é o H.264.

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

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

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

Usar HTTP/2 para fornecer ativos do Dynamic Media

HTTP/2 é o novo protocolo da Web atualizado que melhora a maneira como os navegadores e servidores se comunicam. Ele oferece transferência mais rápida de informações e reduz a quantidade de poder de processamento necessário. A entrega de ativos do Dynamic Media agora pode ser feita via HTTP/2, o que oferece melhor resposta e tempo de carregamento.

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

Recursos de Business.Adobe.com