Gerenciar predefinições do visualizador managing-viewer-presets

Uma predefinição do visualizador é uma coleção de configurações que determinam como os usuários visualizam ativos de mídia avançada nas telas dos computadores e nos dispositivos móveis. Se você for um administrador, poderá criar Predefinições do visualizador. As configurações estão disponíveis para uma matriz de opções de configuração do visualizador. Por exemplo, é possível alterar o tamanho de exibição do visualizador ou o comportamento de zoom.

Para obter instruções sobre como criar e personalizar suas próprias predefinições do visualizador de HTML5, consulte a Documentação da API do SDK do visualizador de HTML5 do Adobe Dynamic Media. O SDK está disponível no servidor de publicação do IS incorporado ao próprio SDK. Cada versão da biblioteca tem sua própria documentação de SDK incluída.

Caminho: <scene7_domain>/s7sdk/<library_version>/docs/jsdocs/index.html.
Por exemplo, SDK 3.10: https://s7d1.scene7.com/s7sdk/3.10/docs/jsdoc/index.html

Consulte também o Guia de Referência do Adobe Dynamic Media Viewers.

Esta seção descreve como criar, editar e gerenciar predefinições do visualizador. É possível aplicar uma predefinição do visualizador a um ativo sempre que você o visualiza. Consulte Aplicando as Predefinições do Visualizador.

NOTE
Não há suporte para a edição de predefinições do visualizador predefinidas. Se tentar editar uma predefinição do visualizador pronta para uso, você será solicitado a salvar a predefinição do visualizador usando um novo nome.

Acessibilidade de teclado para visualizadores keyboard-accessibility-for-viewers

Todos os visualizadores prontos para uso oferecem suporte à acessibilidade do teclado.

Consulte também Acessibilidade e navegação do teclado.

Gerenciar predefinições do visualizador managing-viewer-presets-1

Adicione, edite, exclua, publique, cancele a publicação e visualize predefinições do visualizador no Adobe Experience Manager ao tocar em Ferramentas (ícone de martelo) > Assets > Predefinições do visualizador.

6_5_ferramentas-ativos-visualizarpredefinições

NOTE
Por padrão, o sistema mostra 15 predefinições do visualizador ao selecionar Visualizadores na exibição detalhada de um ativo. Você pode aumentar esse limite. Consulte Aumentar o número de predefinições do visualizador exibidas.

Suporte de visualizador para páginas da Web com design responsivo viewer-support-for-responsive-designed-web-pages

Páginas da Web diferentes têm necessidades diferentes. Por exemplo, às vezes você quer uma página da Web que forneça um link que abra o Visualizador de HTML 5 em uma janela separada do navegador. Em outros casos, pode ser necessário incorporar o Visualizador HTML5 diretamente na página de hospedagem. Nesse último caso, a página da Web pode ter um layout estático. Ou ele pode ser "responsivo" e ser exibido de forma diferente em diferentes dispositivos ou para diferentes tamanhos de janela de navegador. Para acomodar essas necessidades, todos os Visualizadores de HTML5 predefinidos e prontos para uso que acompanham o Dynamic Media são compatíveis com páginas da Web estáticas e páginas da Web com design responsivo.

Consulte Biblioteca de imagens responsiva para obter mais informações sobre como incorporar visualizadores responsivos nas suas páginas da Web.

NOTE
Publish exibe todos os visualizadores prontos para uso antes de usá-los pela primeira vez.
Consulte [Publicar Predefinições Do Visualizador].(#publishing-viewer-presets)

Compatibilidade do sistema de predefinição do visualizador viewer-preset-system-compatibility

Todas as predefinições do visualizador prontas para uso que acompanham o Dynamic Media são totalmente compatíveis com os seguintes sistemas:

  • Áreas de trabalho
  • Apple iPhone
  • Apple iPad
  • Android™ Smartphone
  • Android™ Tablet
  • Para vídeo, é fornecido suporte adicional para reprodução de MP4 para BlackBerry® e Windows Phone.

Tipos de mídia avançada para Predefinições do visualizador rich-media-types-for-viewer-presets

Os administradores podem adicionar e personalizar os seguintes tipos de mídia avançada ao criar predefinições do visualizador.

Conjunto de carrosséis
Pontos de acesso, mapas de imagem ou ambos são adicionados a uma série de duas ou mais imagens. Um cliente pode deslocar as imagens para a esquerda ou direita e, em seguida, selecionar um ponto de acesso em uma imagem para obter detalhes adicionais ou para comprar diretamente da categoria, da página inicial ou das páginas de aterrissagem de um site.
Dimensional
Exibe cenas 3D que permitem girar, deslocar, ampliar ou recentralizar a câmera.
Flyout Zoom

Exibe uma segunda imagem da área com zoom ao lado da imagem original. Não há controles a serem usados - os usuários movem a seleção pela área que desejam visualizar.

Ao determinar o uso completo da largura de banda para esse visualizador, considere que tanto a imagem principal quanto a imagem suspensa são fornecidas no visualizador. O tamanho da imagem principal (Largura e Altura do Palco) e o Fator de Zoom determinam o tamanho da imagem suspensa. Para evitar que o tamanho do arquivo de imagem suspensa fique muito grande, equilibre esses dois valores: se você tiver um tamanho grande de imagem principal, diminua o valor do Fator de zoom. (A Largura da imagem suspensa e a Altura da imagem suspensa determinam o tamanho da janela da imagem suspensa, mas não o tamanho da imagem suspensa que é exibida no visualizador.)

Por exemplo, se o tamanho da imagem principal for 350 por 350 pixels, com um Fator de Zoom de 3, a imagem suspensa resultante será 1050 por 1050 pixels. Se o tamanho da imagem principal for 300 por 300 pixels, com um Fator de Zoom de 4, a imagem suspensa será de 1200 por 1200 pixels. Dependendo da configuração de qualidade do JPEG (as configurações recomendadas estão entre 80 e 90), é possível diminuir o tamanho do arquivo significativamente. Os fatores de zoom recomendados são de 2,5 a 4, dependendo do tamanho da imagem principal.

Zoom in-line
Exibe uma imagem da área ampliada dentro do visualizador original. Não há controles a serem usados. Ou seja, os usuários movem a seleção pela área que desejam visualizar.
Definição de imagem
No visualizador do Conjunto de imagens, os usuários podem ver diferentes exibições ou variações de cores de um item selecionando uma imagem em miniatura. Esse visualizador também oferece ferramentas de zoom para examinar as imagens de perto.
Imagem interativa
Os hotspots são adicionados às partes de uma imagem que um cliente pode selecionar para obter detalhes adicionais ou para comprar diretamente da categoria, da página inicial ou das páginas de aterrissagem de um site.
Vídeo interativo
As miniaturas são adicionadas aos segmentos da linha do tempo em um vídeo que um cliente pode selecionar para obter detalhes adicionais ou para comprar diretamente da categoria, da página inicial ou das páginas de aterrissagem de um site.
Mix de mídia
Exibe diferentes tipos de mídia em um visualizador. É possível incluir conjuntos de rotação, conjunto de imagem, imagens e vídeos.
Imagem panorâmica

Os visualizadores Panoramic Image e PanoramicVR renderizam imagens panorâmicas esféricas para imergir os usuários em uma experiência de visualização de 360 graus de uma sala, propriedade, localização ou paisagem.

Para que uma imagem carregada seja qualificada como um 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 e panorama, ou spherical e 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 WCM "Mídia panorâmica".

Importante: este visualizador só está disponível no modo Dynamic Media - Scene7.

Recorte inteligente de vídeo
Use esse visualizador para detectar e recortar automaticamente o ponto focal em qualquer vídeo.
Grupo de rotação
Fornece várias visualizações de uma imagem para que os usuários possam virar o objeto para examinar os diferentes lados e ângulos.
Vídeo 360

Use o visualizador de vídeo 360/VR para renderizar vídeo equiretangular para obter uma experiência de visualização imersiva de uma 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 aplica 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.

Importante: este visualizador só está disponível no modo Dynamic Media - Scene7.

Vídeo
Reproduz vídeo usando a transmissão progressiva ou adaptável da taxa de bits. A transmissão adaptável da taxa de bits executa automaticamente a detecção do dispositivo e da largura de banda para fornecer o vídeo de qualidade certa no formato certo.
Zoom vertical

O visualizador de zoom vertical permite maximizar uma experiência de visualização de imagens do produto para fornecer aos usuários a melhor representação de um produto. A localização vertical das amostras faz o seguinte:

  • Garante que as amostras estejam "acima da dobra".
    Com amostras horizontais, dependendo do tamanho da tela de desktop do usuário, elas não ficam visíveis até que o usuário role a página para baixo. Ao inserir as amostras verticalmente no visualizador, elas garantem a visibilidade independentemente do tamanho da tela do usuário.
  • Maximiza o tamanho da imagem principal.
    Com amostras horizontais, é necessário reservar espaço na página para garantir que elas estejam visíveis. Esse posicionamento diminuiu o tamanho da imagem principal. No entanto, com um layout de amostra vertical, não é necessário alocar esse espaço. Dessa forma, você pode maximizar o tamanho da imagem principal.
Zoom
Permite que os usuários ampliem a área ao selecioná-la. Os usuários podem selecionar controles para ampliar, reduzir e redefinir o tamanho padrão da imagem.

Lista de predefinições do visualizador prontas para uso list-of-out-of-the-box-viewer-presets

A tabela a seguir identifica todas as Predefinições do visualizador predefinidas e prontas para uso que acompanham o Dynamic Media.

Veja também Demonstrações em tempo real.

Para obter informações sobre o navegador da Web e as versões do sistema operacional compatíveis para Visualizadores, consulte as Notas de versão dos Visualizadores.

Consulte "Notas de versão de visualizadores" no sumário do Guia de Referência de Visualizadores.

NOTE
Todas as predefinições do visualizador prontas para uso no Dynamic Media já estão ativadas (ativadas), mas você deve publicá-las.
Consulte Publicar Predefinições Do Visualizador.
Qualquer nova predefinição do visualizador criada e adicionada deve ser ativada *e *publicada.
Consulte Ativando ou Desativando Predefinições do Visualizador e Publicando Predefinições do Visualizador.
Título da predefinição do visualizador
Tipo
Nome do arquivo CSS
Carrossel_Pontilhado_escuro
Carousel_Set
html5_carouselviewer_dotted_dark.css
Carrossel_Pontilhado_claro
Carousel_Set
html5_carouselviewer_dotted_light.css
Carrossel_Numeric_dark
Carousel_Set
html5_carouselviewer_numeric_dark.css
Carousel_Numeric_light
Carousel_Set
html5_carouselviewer_numeric_light.css
Dimensional
Dimensional
html5_dimensionalviewer.css
Flyout
Flyout_Zoom
html5_flyoutviewer.css
ImageSet_dark
Definição de imagem
html5_zoomviewer_dark.css
ImageSet_light
Definição de imagem
html5_zoomviewer_light.css
InlineMixedMedia_dark
Mixed_Media
html5_inlinemixedmediaviewer_dark.css
InlineMixedMedia_light
Mixed_Media
html5_inlinemixedmediaviewer_light.css
ZoomEmbutido
Flyout_Zoom
html5_inlinezoomviewer.css
MixedMedia_dark
Mixed_Media
html5_mixedmediaviewer_dark.css
MixedMedia_light
Mixed_Media
html5_mixedmediaviewer_light.css
ImagemPanorâmica
Imagem_Panorâmica
html5_panoramicimage.css
ImagemPanorâmicaVR
Imagem_Panorâmica
html5_panoramicimage.css
Shoppable_Banner
Interative_Image
html5_interactiveimage.css
Shoppable_Video_dark
Interative_Video
html5_interactivevideoviewer_dark.css
Shoppable_Video_light
Interative_Video
html5_interactivevideovewer_light.css
SmartCropVideo
Smart_Crop_Video
html5_smartcropvideoviewer.css
SmartCropVideo_social
Smart_Crop_Video
html5_smartcropvideoviewersocial.css
SpinSet_dark
Spin_Set
html5_spinviewer_dark.css
SpinSet_light
Spin_Set
html5_spinviewer_light.css

Vídeo

(Inclui suporte para legendas ocultas)

Vídeo
html5_videoviewer.css

Video360_social

(Inclui controles básicos de reprodução de vídeo, a renderização de vídeo é feita em modo estéreo, o controle manual de ponto de vista está desativado, mas o controle giroscópico está ativado e nenhum recurso de mídia social)

Video_360
html5_video360viewersocial.css

Video360VR

(Projetado 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)

Video_360
html5_video360viewer.css

Video_social

(Inclui suporte para legendas ocultas e redes sociais)

Vídeo
html5_videoviewersocial.css
Zoom_dark
Zoom
html5_basiczoomviewer_dark.css
Zoom_light
Zoom
html5_basiczoomviewer_light.css
ZoomVertical_dark
Vertical_Zoom
html5_zoomverticalviewer_dark.css
ZoomVertical_light
Vertical_Zoom
html5_zoomverticalviewer_light.css

Matriz de gestos de visualizadores móveis compatíveis supported-mobile-viewers-gestures-matrix

A tabela a seguir identifica os gestos do visualizador móvel compatíveis com dispositivos iOS, Android™ 2.x e Android™ 3.x.

Gesto
Flyout Zoom
Zoom
Rotação
Arrastar
Panelas
Panelas
Panelas
Selecionar
Mostra a janela de imagem suspensa
Mostra ou oculta a interface do usuário
Mostra ou oculta a interface do usuário
Seleção dupla
Não se aplica
Aumenta ou redefine
Aumenta ou redefine
Pinça aberta
Não se aplica
Aumenta o zoom (somente iOS e Android™ 3x)
Aumenta o zoom (somente iOS e Android™ 3x)
Apertar fechamento
Não se aplica
Reduz (somente iOS e Android™ 3x)
Reduz (somente iOS e Android™ 3x)
Deslizar
Barra de amostra de rolagens
Rola imagens
Rotações
Movimento
Barra de amostra de rolagens
Rola imagens
Rotações

Aumentar o número de Predefinições do visualizador exibidas increasing-the-number-of-viewer-presets-that-display

O Experience Manager mostra uma grande variedade de predefinições do visualizador ao visualizar um ativo da Exibição de detalhes > Visualizadores. Você pode aumentar ou diminuir o número de visualizadores exibidos.

Aumente o número de Predefinições do Visualizador exibidas:

  1. Navegue até CRXDE Lite (https://localhost:4502/crx/de).

  2. Navegue até o nó da listagem de predefinições do visualizador no seguinte local:

    /libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist

    chlimage_1-221

  3. Na propriedade limit, altere o Value, que é definido como 15 por padrão, para o número desejado.

  4. Navegar até a fonte de dados predefinida do visualizador em /libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource

    chlimage_1-222

  5. Na propriedade limit, altere o número para o número desejado, por exemplo, {empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]}

  6. Selecione Salvar tudo.

Criar uma predefinição do visualizador creating-a-new-viewer-preset

A criação de predefinições do visualizador permite aplicar várias configurações para exibir e interagir com ativos. No entanto, não é necessário criar predefinições do visualizador. Se preferir, você poderá usar as predefinições do visualizador padrão prontas para uso que já acompanham o AEM Assets.

Se você optar por criar uma predefinição do visualizador, após salvá-la, o estado do visualizador será ativado automaticamente (definido como Ativado) na página Predefinições do visualizador. Esse estado significa que está visível no componente Dynamic Media e no componente de Mídia interativa e sempre que você visualiza uma imagem ou vídeo.

Algumas predefinições do visualizador têm configurações exclusivas que podem afetar o uso e o comportamento geral do visualizador. Dependendo da predefinição do visualizador criada, talvez você queira estar ciente dessas considerações especiais.

Consulte Considerações especiais para criar uma predefinição do Visualizador Interativo.

Consulte Considerações especiais para criar uma predefinição do Visualizador de banner do Carousel.

Para criar uma Predefinição do Visualizador:

  1. No canto superior esquerdo do Experience Manager, selecione o logotipo Experience Manager e, no painel à esquerda, selecione Ferramentas (ícone de martelo) > Assets > Predefinições do visualizador.

    6_5_viewerpresets

  2. Na página Predefinições do Visualizador, na barra de ferramentas, selecione Criar.

  3. Na caixa de diálogo Nova Predefinição do Visualizador, no campo Nome da Predefinição, digite o nome da nova predefinição. Escolha um nome com cuidado, eles não são editáveis depois de selecionar Criar.

    Quando você salva a predefinição posteriormente nessas etapas, o nome é exibido na página Predefinições do visualizador sob o cabeçalho da coluna Título da predefinição.

  4. No menu suspenso Tipo de mídia avançada, selecione o tipo de predefinição do visualizador que deseja criar e, no canto superior direito da página, selecione Criar.

    Consulte Tipos de mídia avançada para Predefinições do visualizador.

  5. Na página Editor de predefinições do visualizador, selecione a guia Aparência.

  6. Siga uma das seguintes opções:

    • No menu suspenso Tipo selecionado, selecione um componente cujo design visual você deseja personalizar. Como alternativa, você pode selecionar qualquer elemento visual no visualizador para selecioná-lo para configuração.

      O editor visual permite ver o efeito que uma determinada propriedade tem em um estilo. Defina ou ajuste qualquer propriedade para ver instantaneamente o efeito sobre o visualizador usando a amostra à esquerda do editor.

      As propriedades de estilo CSS para cada tipo de predefinição do visualizador são descritas no tópico da Ajuda "Personalizando o Visualizador do <viewer name>" no Guia de Referência do Visualizador. Por exemplo, se você estiver criando uma predefinição do visualizador do tipo Mixed_Media, consulte Personalizando o Visualizador de Mídia Mista para obter uma lista e uma descrição de cada propriedade.

    • Se você tiver definido as configurações de estilo em um arquivo CSS separado, é possível fazer upload do arquivo CSS para o AEM Assets. Selecione Importar CSS abaixo do menu suspenso Tipo Selecionado (se necessário, role o editor visual para cima para vê-lo) para que você possa encontrar o arquivo CSS carregado e associá-lo à predefinição do visualizador.

      Ao importar um arquivo CSS, o editor visual verifica se o CSS usa os marcadores de visualização corretos. Por exemplo, se você estiver criando um visualizador de Zoom, todas as regras de CSS importadas deverão ser definidas usando o nome de classe do visualizador .s7mixedmediaviewer definido em um elemento de visualizador pai.

      Você pode importar CSS arbitrário e artesanal, desde que ele defina corretamente os marcadores CSS de um determinado visualizador. (Os marcadores CSS são descritos em qualquer tópico da Ajuda "Personalizando o <nome do visualizador>" no Guia de Referência do Visualizador. Por exemplo, se você deseja ler sobre marcadores CSS para o Visualizador de Zoom, consulte Personalizando o Visualizador de Zoom.) Entretanto, é possível que o editor visual não entenda alguns valores CSS. Nesses casos, o editor visual tenta substituir os erros para que o CSS ainda possa funcionar.

    note note
    NOTE
    Se preferir editar o CSS diretamente em sua forma bruta, selecione Mostrar/Ocultar CSS abaixo do menu suspenso Tipo selecionado (se necessário, role o editor visual para cima para vê-lo).
    Assim como o editor visual, ao alterar uma propriedade diretamente no CSS, você vê instantaneamente o efeito que ela tem na amostra do visualizador. E, essa mesma propriedade é atualizada automaticamente ao mesmo tempo no editor visual. Dessa forma, você pode usar o editor de CSS bruto, ou o editor visual, ou usar ambos alternadamente.
    note note
    NOTE
    Para arte-final de botão, escolha o dobro da imagem e faça upload do trabalho artístico de alta resolução. Ao trabalhar com imagens interativas e banners para compra, você também pode selecionar vários botões de ponto de acesso prontos para uso.
  7. (Opcional) Próximo à parte superior da página Editar Predefinição do Visualizador, selecione Área de Trabalho, Tablet ou Telefone para definir estilos visuais de forma exclusiva para diferentes tipos de dispositivos e telas.

  8. Na página do Editor de predefinições do visualizador, selecione a guia Comportamento. Como alternativa, você pode selecionar qualquer elemento visual no visualizador para selecioná-lo para configuração.
    Por exemplo, para o tipo VideoPlayer, em Modificadores > Reprodução, você pode selecionar uma das três opções de transmissão adaptáveis de taxa de bits:

    • traço - Fluxo de vídeos somente como traço. No entanto, em dispositivos Safari/iOS, você deve selecionar hls como o tipo.

    • hls - Fluxo de vídeos somente como hls.

    • auto - Prática recomendada. A criação de fluxos DASH e HLS é otimizada para armazenamento. Portanto, o Adobe recomenda que você sempre selecione auto como o tipo de reprodução. Fluxo de vídeos como traço, hls ou progressivo, como na seguinte ordem de reprodução:

      • Se o navegador suportar DASH, a transmissão DASH será usada primeiro.
      • Se o navegador não suportar DASH, a transmissão HLS será usada, em segundo lugar.
      • Se o navegador não for compatível com DASH ou HLS, a reprodução progressiva será usada por último.
    note note
    NOTE
    Para ver e usar a opção traço, ela deve ser primeiro habilitada pelo Suporte Técnico Adobe na sua conta. Consulte Habilitar DASH na sua conta.
  9. No menu suspenso Tipo selecionado, selecione um componente cujos comportamentos você deseja alterar.

    Muitos componentes no editor visual têm uma descrição detalhada associada a ele. Essas descrições aparecem em caixas azuis quando você expande um componente para revelar seus parâmetros associados.

    Alguns tipos de Visualizador têm componentes que permitem especificar comandos do Servidor de imagens em um campo de texto Comando IS. Para obter uma lista de comandos que podem ser usados, consulte a Referência da API de disponibilização de imagens.

    note note
    NOTE
    Se você estiver usando um dispositivo sensível ao toque, como um telefone ou tablet…
    Depois de digitar um valor no campo de texto, selecione outro lugar na interface para enviar a alteração e fechar o teclado virtual. Se você selecionar Inserir, nenhuma ação ocorrerá.
  10. Próximo ao canto superior direito da página, selecione Salvar.

  11. Publish sua nova predefinição do visualizador para que você possa usá-la em seu site.

    Consulte Publicar Predefinições Do Visualizador.

    note important
    IMPORTANT
    Para vídeos antigos que usam um perfil de transmissão de taxa de bits adaptável, o URL continua a ser reproduzido como de costume, com a transmissão HLS, até que você reprocesse os ativos de vídeo. Após o reprocessamento, a mesma URL continua a funcionar, mas agora com o DASH e o streaming HLS habilitado.

Considerações especiais para a criação de uma predefinição do Visualizador interativo special-considerations-for-creating-an-interactive-viewer-preset

Sobre os Modos de Exibição para miniaturas de imagem no painel

Ao criar ou editar uma predefinição do visualizador de Vídeo interativo, você opta por qual configuração do Modo de exibição usar ao selecionar InteractiveSwatches no menu Componente selecionado na guia Comportamento. O modo de exibição escolhido afeta como e quando as miniaturas aparecem enquanto o vídeo está sendo reproduzido. Você pode escolher um modo de exibição segmentou um modo de exibição continuous.

Modo de exibição
Descrição
Segmento

Segment é o modo de exibição padrão das predefinições do Visualizador de Vídeo Interativo Shoppable_Video_light e Shoppable_Video_dark e de qualquer predefinição do Visualizador de Vídeo Interativo criada por você mesmo.

Nesse modo, quando houver menos miniaturas atribuídas a um segmento de vídeo do que o número de pontos visíveis no painel de exibição. Além disso, as miniaturas dos subsegmentos anteriores ou seguintes não são puxadas para preencher pontos vazios no painel. Ou seja, ela preserva a exibição de amostras atribuídas ao segmento de vídeo específico.

Contínuo

No modo de exibição continuous , se o número de miniaturas em um segmento for menor que o número visível no painel, o visualizador incluirá automaticamente a exibição de miniaturas do próximo segmento. Ou o visualizador inclui automaticamente a exibição das miniaturas do segmento anterior, nos casos em que a última miniatura é exibida.

O vídeo neste tópico é um exemplo do continuous modo de exibição.

Sobre o comportamento de rolagem automática no visualizador de Vídeo Interativo

O comportamento de rolagem automática das miniaturas no visualizador de Vídeo interativo funciona independentemente do modo de exibição escolhido.

Ao criar ou editar uma predefinição interativa do visualizador de vídeo, você acessa a opção Rolagem automática na guia Comportamento. Na guia Comportamento, no menu suspenso Componentes Selecionados, selecione InterativeSwatches. A caixa de seleção Rolagem automática está listada abaixo do campo de texto Comando IS.

Se desativar a opção Rolagem automática (desmarcar a caixa de seleção) na predefinição do visualizador, durante a reprodução do vídeo pelo usuário, o painel exibirá apenas a primeira imagem em miniatura em toda a duração do vídeo. Entretanto, um usuário pode rolar manualmente pelas miniaturas usando os ícones de seta para cima e para baixo, se desejar.

Ao ativar (selecionar) a Rolagem automática na predefinição do visualizador as imagens em miniatura atribuídas a um segmento de vídeo são roladas para exibição no início de um segmento durante a reprodução do vídeo. Entretanto, há instâncias em que determinadas miniaturas em um segmento são exibidas com duas vezes mais comprimento no início ou no final delas. Esse comportamento ocorre porque a quantidade de miniaturas em um segmento é maior que o número visível no painel e não é divisível uniformemente.

Para ilustrar, suponha que você tenha um segmento de vídeo de 30 segundos. E há um total de nove miniaturas para exibir durante os 30 segundos. Seu navegador é dimensionado de forma que haja quatro posições de miniatura visíveis no painel de exibição. O segmento de tempo do vídeo de 30 segundos é dividido em três subsegmentos. A tabela a seguir mostra o detalhamento de quais miniaturas são exibidas para um determinado subsegmento de tempo:

Subsegmento de vídeo
Tempo do subsegmento em segundos
Miniaturas visíveis no painel
1
0-10
1, 2, 3, 4
2
10-20
4, 5, 6, 7
3
20-30
6, 7, 8, 9

O subsegmento de vídeo 3 não se estende além das miniaturas atribuídas a ele. Observe também que as miniaturas 4, 6 e 7 estão visíveis no painel com o dobro de comprimento das outras miniaturas.

A lógica que o visualizador usa para quantas miniaturas são exibidas no painel com base no número de posições disponíveis é a seguinte:

  • Número de subsegmentos = arredondar para o próximo subsegmento (número de miniaturas / número de slots visíveis no painel de miniaturas, com base no tamanho da janela do navegador).
    Usando o exemplo na tabela acima, 9 miniaturas / 4 slots = 2,25; a lógica do visualizador arredonda para até três subsegmentos.

  • Número de miniaturas = arredondar para a próxima miniatura (número de miniaturas / número de subsegmentos de vídeo).
    Usando o exemplo na tabela acima, 9 miniaturas / 3 subsegmentos de vídeo = 3 miniaturas.

  • Duração do subsegmento = duração total do vídeo / número de subsegmentos do vídeo.
    Usando o exemplo na tabela acima, 30 segundos / 3 subsegmentos de vídeo = exibição de 10 segundos de cada subsegmento de vídeo.

Ao criar predefinições do visualizador de banner do Carousel, a alteração do estilo de pontos de acesso pode ser acessada da seguinte maneira:

Descrição
Ações
Ícone de ponto de acesso
Alterar o ícone usado para ponto de acesso
Para alterar a imagem do ícone do ponto de acesso, na guia Aparência, em Componente Selecionado, selecione ImageMapEffect. Em Ícone, selecione Plano de Fundo e, no campo Imagem, navegue até a imagem de plano de fundo desejada.

Ativar ou desativar predefinições do visualizador activating-or-deactivating-viewer-presets

As Predefinições do visualizador disponíveis na interface do usuário dependem de quais estão ativas no modo Autor. Por padrão, uma predefinição do visualizador é "Ativada" após a criação. Se você desativar a predefinição, não a verá no modo Autor. Se a predefinição for publicada, ela será sempre publicada, independentemente de estar ativada ou desativada. Talvez você queira desativar as predefinições do visualizador se a lista se tornar muito difícil ou se não quiser que uma predefinição do visualizador fique disponível para uso.

Para ativar ou desativar as Predefinições do Visualizador:

  1. No canto superior esquerdo do Experience Manager, selecione o logotipo Experience Manager e, no painel à esquerda, selecione Ferramentas (ícone de martelo) > Assets > Predefinições do visualizador.

  2. Na página Predefinição do visualizador, no cabeçalho da coluna Estado, selecione o botão para ativar ou desativar uma predefinição do visualizador.

    As predefinições do visualizador ativadas têm o botão de alternância exibido à direita, dentro de uma caixa azul; as predefinições do visualizador desativadas têm o botão de alternância exibido à esquerda, dentro de uma caixa cinza-claro.

Predefinições do visualizador do Publish publishing-viewer-presets

Ativar (ou ativar "Ativar") o estado de uma predefinição do visualizador significa que ela fica visível no componente do Dynamic Media, no componente de Mídia interativa e sempre que você visualiza um ativo.

No entanto, para entregar um ativo com uma predefinição do visualizador, a predefinição do visualizador também deve ser publicada. Todas as predefinições do visualizador devem ser ativadas e publicadas para obter a URL ou o código de inserção de um ativo. Ative e publique todas as predefinições do visualizador prontas para uso que acompanham o Dynamic Media. As predefinições do visualizador personalizado criadas e adicionadas são ativadas automaticamente, mas também devem ser publicadas.

Consulte Ativando ou Desativando Predefinições do Visualizador.

Consulte também Visualização do Assets.

Para publicar Predefinições do Visualizador:

  1. No canto superior esquerdo do Experience Manager, selecione o logotipo Experience Manager e, no painel à esquerda, selecione Ferramentas (ícone de martelo) > Assets > Predefinições do visualizador.
  2. Selecione uma ou mais predefinições do visualizador que deseja publicar.
  3. Na barra de ferramentas, selecione o ícone Publish.

Classificar predefinições do visualizador sorting-viewer-presets

  1. No canto superior esquerdo do Experience Manager, selecione o logotipo Experience Manager e, no painel à esquerda, selecione Ferramentas (ícone de martelo) > Assets > Predefinições do visualizador.
  2. Selecione Título de predefinição, Tipo, Publicado ou Estado para classificar pelo cabeçalho da coluna. Por exemplo, selecione Tipo para classificar os tipos de predefinição do visualizador em ordem alfabética ou não.

Editar predefinições do visualizador editing-viewer-presets

Não há suporte para a edição de predefinições do visualizador predefinidas. Se você editar uma predefinição do visualizador pronta para uso, será solicitado a salvá-la com um novo nome.

Para editar as Predefinições do Visualizador:

  1. No canto superior esquerdo do Experience Manager, selecione o logotipo Experience Manager e, no painel à esquerda, selecione Ferramentas (ícone de martelo) > Ativo > Predefinições do visualizador.

  2. Selecione uma predefinição marcando a caixa à esquerda do título da predefinição do visualizador.

  3. Na barra de ferramentas, selecione Editar.

  4. Na página Editor de Predefinições do Visualizador, faça as alterações desejadas na predefinição do visualizador, usando as opções encontradas nas guias Aparência e Comportamento.

    Na guia Aparência, próximo ao canto superior esquerdo da página Editor de Predefinições do Visualizador, selecione Área de Trabalho, Tablet ou Telefone para alterar o modo de apresentação do ativo.

  5. Próximo ao canto superior direito da página, siga um destes procedimentos:

    • Selecione Salvar para salvar suas alterações e retornar à página Predefinição do Visualizador.
    • Selecione Cancelar para anular as alterações feitas e retornar à página Predefinição do visualizador.

Excluir predefinições personalizadas do visualizador deleting-custom-viewer-presets

É possível excluir as Predefinições do visualizador criadas e adicionadas ao Dynamic Media.

Para excluir as Predefinições do Visualizador personalizado:

  1. No canto superior esquerdo do Experience Manager, selecione o logotipo Experience Manager e, no painel à esquerda, selecione Ferramentas (ícone de martelo) Assets > Predefinições do visualizador.
  2. Na página Predefinições do visualizador, verifique um Título de predefinição e selecione o ícone Lixeira.
  3. Selecione Excluir.

Aplicar uma predefinição do visualizador a um ativo applying-a-viewer-preset-to-an-asset

Se já tiver publicado o ativo e o visualizador selecionado, os botões URL e Incorporar aparecerão depois de selecionar uma predefinição do visualizador.

Para aplicar uma Predefinição do Visualizador a um ativo:

  1. Abra o ativo e próximo ao canto superior esquerdo da página, selecione o menu suspenso e Visualizadores.

    note note
    NOTE
    Se já tiver publicado o ativo e o visualizador selecionado, os botões URL e Incorporar aparecerão depois de selecionar uma predefinição do visualizador.
  2. Selecione uma predefinição do visualizador no painel esquerdo para que você possa aplicá-la ao ativo.

    Você pode copiar a URL para compartilhar com outros usuários.

Entregar ativos com predefinições do visualizador delivering-assets-with-viewer-presets

Para obter as URLs das Predefinições do Visualizador, consulte Vinculando URLs ao seu aplicativo Web. Consulte também Incorporação do Visualizador de Vídeo em uma Página da Web.

Se estiver usando o Experience Manager como o WCM, você poderá adicionar ativos usando as predefinições do visualizador diretamente na página. Consulte Adicionando o Dynamic Media Assets às páginas.

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