Gerenciar predefinições do visualizador do Dynamic Media managing-viewer-presets
Uma predefinição do visualizador do Dynamic Media é uma coleção de configurações que determinam como os usuários visualizam ativos de mídia avançada em suas telas de computadores e 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, você pode 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 do HTML5, consulte o Adobe Dynamic Media Documentação da API do SDK do visualizador do HTML5. O SDK está disponível no servidor de publicação do IS incorporado no próprio SDK. Cada versão da biblioteca tem sua própria documentação do SDK incluída.
Caminho: <scene7_domain>/s7sdk/<library_version>/docs/jsdocs/index.html.
Por exemplo, 3.10 SDK: https://s7d1.scene7.com/s7sdk/3.10/docs/jsdoc/index.html
Consulte também a Guia de referência de visualizadores do Adobe Dynamic Media.
Esta seção descreve como criar, editar e gerenciar predefinições do visualizador. Você pode aplicar uma predefinição do visualizador a um ativo a qualquer momento que o visualizar. Consulte Aplicação de predefinições do visualizador.
Acessibilidade de teclado para visualizadores keyboard-accessibility-for-viewers
Todos os visualizadores prontos para uso suportam acessibilidade do teclado.
Consulte também Acessibilidade e navegação do teclado.
Gerenciar predefinições do visualizador do Dynamic Media managing-presets
Você pode adicionar, editar, excluir, publicar, cancelar a publicação e visualizar predefinições do visualizador no AEM ao tocar em Ferramentas > Ativos > Predefinições do visualizador.
Suporte para visualizador para páginas da Web responsivas projetadas viewer-support-for-responsive-designed-web-pages
Páginas da Web diferentes têm necessidades diferentes. Por exemplo, às vezes, você deseja uma página da Web que forneça um link que abra o Visualizador do HTML5 em uma janela separada do navegador. Em outros casos, pode ser necessário incorporar o Visualizador do HTML5 diretamente na página de hospedagem. No último caso, a página da Web pode ter um layout estático. Ou pode ser responsivo e são exibidos de forma diferente em diferentes dispositivos ou para tamanhos de janela de navegador diferentes. Para acomodar essas necessidades, todos os visualizadores HTML5 predefinidos e prontos para uso que vêm com o Dynamic Media suportam páginas da Web estáticas e páginas da Web responsivas projetadas.
Consulte Biblioteca de imagens responsivas no Ajuda da API de disponibilização de imagens para obter mais informações sobre como incorporar visualizadores responsivos às suas páginas da Web.
Consulte Predefinições do visualizador de publicação.
Compatibilidade do sistema predefinido 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:
- Desktops
- Apple iPhone
- Apple iPad
- Android Smartphone
- Tablet Android
- Para vídeo, é fornecido suporte adicional para reprodução MP4 para BlackBerry e Windows Phone 8.
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 novas predefinições do visualizador.
Para que uma imagem carregada 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.
- Marcada com as palavras-chave "equirectangular", "esférico" e "panorama", "esférico" e "panorâmico". Consulte Uso de tags.
O visualizador de Zoom vertical permite maximizar uma experiência de visualização de imagem de 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 da área de trabalho do do usuário, as amostras não ficavam visíveis até que o usuário rolasse pela página. Ao colocar as amostras verticalmente no visualizador, ele garante que elas fiquem visíveis, 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.
Lista de predefinições do visualizador pronto 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.
Consulte também Demonstrações ao vivo.
Para obter informações sobre versões compatíveis de navegadores da Web e sistemas operacionais para visualizadores, consulte as Notas de versão dos visualizadores.
Consulte Notas de versão dos visualizadores no índice do Guia de referência de visualizadores.
Consulte Predefinições do visualizador de publicação.
Consulte Ativar ou desativar predefinições do visualizador e Predefinições do visualizador de publicação.
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 que são compatíveis com dispositivos iOS, Android 2.x e Android 3.x.
Aumentar o número de predefinições do visualizador do Dynamic Media exibidas increasing-the-number-of-viewer-presets-that-display
AEM mostra uma grande variedade de predefinições do visualizador ao visualizar ativos de Exibição de detalhes > Visualizadores. Você pode aumentar ou diminuir o número de visualizadores exibidos.
Para aumentar o número de predefinições do visualizador do Dynamic Media exibidas:
-
Navegar para CRXDE Lite (http://localhost:4502/crx/de).
-
Navegue até o nó da listagem de predefinições do visualizador em
/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist
-
Na propriedade limit, altere o Value, que é definido como 15 por padrão, para o número desejado.
-
Navegue até a fonte de dados predefinida do visualizador em
/libs/dam/gui/coral/content/commons/sidepanels/viewerpresets/viewerpresetslist/datasource
-
No limite , altere o número para o número desejado, por exemplo
{empty requestPathInfo.selectors[1] ? "20" : requestPathInfo.selectors[1]} -
Toque Salvar tudo.
Criação de uma nova predefinição do visualizador do Dynamic Media creating-a-new-viewer-preset
A criação de predefinições do visualizador permite aplicar várias configurações para visualizar e interagir com ativos. No entanto, não é necessário criar novas predefinições do visualizador. Se preferir, você pode usar as predefinições padrão do visualizador pronto para uso que já vêm com o AEM Assets.
Se você optar por criar uma nova predefinição do visualizador, depois de salvá-la, o estado do visualizador será ativado automaticamente (definido como Ligado) na Predefinições do visualizador página. Esse estado significa que é visível no Dynamic Media e o Mídia interativa e sempre que você visualizar 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 que você estiver criando, 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 de Visualizador de banner do carrossel.
Para criar uma nova predefinição do visualizador do Dynamic Media:
-
No canto superior esquerdo do AEM, toque no logotipo do AEM e, em seguida, no painel à esquerda, toque em Ferramentas > Ativos > Predefinições do visualizador.
-
No Predefinições do visualizador na barra de ferramentas, toque em Criar.
-
No Nova predefinição do visualizador na caixa de diálogo , na Nome da predefinição , insira o nome da nova predefinição. Escolha um nome com cuidado, eles não são editáveis depois de tocar em Criar.
Quando você salvar a predefinição posteriormente nessas etapas, o nome aparecerá na página Predefinições do visualizador sob a Título da predefinição cabeçalho da coluna.
-
No Tipo de mídia avançada no menu suspenso, selecione o tipo de predefinição do visualizador que deseja criar e, no canto superior direito da página, toque em Criar.
Consulte Tipos de mídia avançada para predefinições do visualizador.
-
No Editar predefinição do visualizador toque na página Aparência guia .
-
Siga uma das seguintes opções:
-
No Tipo selecionado selecione um componente cujo design visual você deseja personalizar. Como alternativa, toque em qualquer elemento visual no visualizador para selecioná-lo para configuração.
O editor visual permite ver qual efeito uma determinada propriedade tem em um estilo. Basta definir ou ajustar qualquer propriedade para ver instantaneamente qual efeito ela tem no visualizador usando a amostra à esquerda do editor.
As propriedades de estilo CSS para cada tipo de predefinição do visualizador são descritas em qualquer "Personalização <viewer_name> Visualizador" Tópico de Ajuda na Guia de referência de visualizadores.
Por exemplo, se você estiver criando uma predefinição do visualizador do tipo
Mixed_Media, consulte Personalização do Visualizador de mídia mista para obter uma lista e a 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. Toque Importar CSS abaixo do Tipo selecionado menu suspenso (talvez seja necessário rolar o editor visual para cima para vê-lo) para localizar 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 do visualizador corretos. Por exemplo, se você estiver criando um visualizador de Zoom, todas as regras de CSS importadas devem ser definidas usando o nome da classe do visualizador
.s7mixedmediaviewerdefinido em um elemento de visualizador pai.Você pode importar CSS arbitrário e artesanal, desde que ele defina corretamente os marcadores de CSS para um determinado visualizador. (Os marcadores CSS são descritos em qualquer "Personalização <viewer name=""> Visualizador" Tópico de Ajuda na Guia de referência de visualizadores. Por exemplo, se você deseja ler sobre marcadores CSS para o Visualizador de Zoom, consulte Personalização do Visualizador de Zoom.) No entanto, é possível que o editor visual não entenda alguns valores de 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, toque em Mostrar/Ocultar CSS abaixo do menu suspenso Tipo selecionado (talvez seja necessário rolar o editor visual para cima para vê-lo). Como o editor visual, quando você faz uma alteração em uma propriedade diretamente no CSS, você pode ver instantaneamente qual efeito 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, o editor visual ou ambos alternadamente. note note NOTE Para arte-final de botão, escolha a imagem 2x e faça upload de arte de alta resolução. Ao trabalhar com imagens interativas e banners que podem ser comprados, também é possível selecionar a partir de vários botões de ponto de acesso prontos para uso. -
-
(Opcional) Próximo à parte superior do Editar predefinição do visualizador página, toque em Desktop, Comprimido ou Telefone para definir estilos visuais de forma exclusiva para diferentes tipos de dispositivos e telas.
-
No Editar predefinição do visualizador toque na página Comportamento guia . Como alternativa, toque ou clique em qualquer elemento visual no visualizador para selecioná-lo para configuração.
-
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 ela. Essas descrições são exibidas 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 estiver usando um dispositivo de toque, como um telefone ou tablet… Depois de digitar um valor no campo de texto, toque em outro lugar na interface do usuário para enviar a alteração e fechar o teclado virtual. Se você tocar em Enter, nenhuma ação ocorre. -
Próximo ao canto superior direito da página, toque em Salvar.
-
Publique sua nova predefinição do visualizador. Você deve publicar a predefinição antes de usá-la em seu site.
Considerações especiais para criar uma predefinição do Visualizador interativo special-considerations-for-creating-an-interactive-viewer-preset
Sobre modos de exibição para miniaturas de imagem no painel
Ao criar ou editar uma predefinição do visualizador de Vídeo interativo, você pode escolher qual Modo de exibição configuração a ser usada ao selecionar InteractiveSwatches do Componente selecionado menu suspenso abaixo do Comportamento guia . O modo de exibição escolhido afeta a forma como e quando as miniaturas são exibidas durante a reprodução do vídeo. Você pode escolher uma segmentmodo de exibição (padrão) ou um continuousmodo 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 Rolagem automática do Comportamento guia . Na guia Comportamento, no menu suspenso Componentes selecionados, toque em InteractiveSwatches. O Rolagem automática A caixa de seleção 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 serem exibidas nos 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:
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 são visíveis no painel duas vezes mais longas do que as 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 miniatura, 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 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 = 10 segundos de exibição de cada subsegmento de vídeo.
Considerações especiais para criar uma predefinição do visualizador de banner do carrossel special-considerations-for-creating-a-carousel-banner-viewer-preset
Ao criar predefinições do visualizador de banner do carrossel, a alteração do estilo dos pontos de acesso pode ser acessada da seguinte maneira:
Ativação ou desativação das predefinições do visualizador do Dynamic Media 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 é Ligado depois de criá-lo. Se você desativar a predefinição, ela não será exibida no modo Autor. Se a predefinição for publicada. ele sempre será publicado independentemente de estar ligado ou desligado. 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 seja disponibilizada para uso.
Para ativar ou desativar as predefinições do visualizador do Dynamic Media:
-
No canto superior esquerdo do AEM, toque no logotipo do AEM e, em seguida, no painel à esquerda, toque em Ferramentas > Ativos > Predefinições do visualizador.
-
No Predefinição do visualizador na página Estado no cabeçalho da coluna, toque no 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.
Publicar predefinições do visualizador do Dynamic Media publishing-viewer-presets
Ativar (ou ativar) Ligado) o estado de uma predefinição do visualizador significa que ela está visível no componente Dynamic Media, no componente Mídia interativa e sempre que você exibe um ativo.
No entanto, para fornecer 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 publicado para obter o URL ou código incorporado 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 Ativar ou desativar predefinições do visualizador.
Consulte também Visualização de ativos.
Para publicar predefinições do visualizador do Dynamic Media:
- No canto superior esquerdo do AEM, toque no logotipo do AEM e, em seguida, no painel à esquerda, toque em Ferramentas > Ativos > Predefinições do visualizador.
- Selecione uma ou mais predefinições do visualizador que você deseja publicar.
- Na barra de ferramentas, toque no botão Publicar ícone .
Classificação de predefinições do visualizador do Dynamic Media sorting-viewer-presets
Para classificar as predefinições do visualizador do Dynamic Media:
- No canto superior esquerdo do AEM, toque no logotipo do AEM e, no painel à esquerda, toque em Ferramentas (ícone de martelo) > Ativos > Predefinições do visualizador.
- Clique em Título da predefinição, Tipo, Publicado ou Estado para classificar pelo cabeçalho da coluna. Por exemplo, clique em Tipo para classificar os tipos de predefinição do visualizador em ordem alfabética ou não.
Editar predefinições do visualizador do Dynamic Media editing-viewer-presets
Esteja ciente de que editar qualquer predefinições predefinidas e prontas para uso do visualizador não é um cenário compatível. Se você editar uma predefinição do visualizador pronta para uso, será solicitado que ela seja salva com um novo nome.
Para editar predefinições do visualizador do Dynamic Media:
-
No canto superior esquerdo do AEM, toque no logotipo do AEM e, em seguida, no painel à esquerda, toque em Ferramentas > Ativos > Predefinições do visualizador.
-
Selecione uma predefinição marcando a caixa à esquerda do título da predefinição do visualizador.
-
Na barra de ferramentas, toque em Editar.
-
No Editar predefinição do visualizador faça as alterações desejadas na predefinição do visualizador.
-
Siga uma das seguintes opções:
- Toque Salvar para salvar suas alterações e retornar ao Predefinição do visualizador página.
- Toque Cancelar para evitar alterações feitas e retornar ao Predefinição do visualizador página.
Exclusão de predefinições personalizadas do visualizador do Dynamic Media deleting-custom-viewer-presets
É possível excluir as Predefinições do visualizador que você criou e adicionou ao Dynamic Media.
Para excluir predefinições personalizadas do visualizador do Dynamic Media:
- No canto superior esquerdo do AEM, toque no logotipo do AEM e, em seguida, no painel à esquerda, toque em Ferramentas > Ativos > Predefinições do visualizador.
- No Predefinições do visualizador verifique uma Título da predefinição e toque em Lixeira ícone .
- Toque Excluir.
Aplicar uma predefinição do visualizador do Dynamic Media 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 do Dynamic Media a um ativo:
-
Abra o ativo e, próximo ao canto superior esquerdo da página, toque no menu suspenso e selecione 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. -
Selecione uma predefinição do visualizador no painel esquerdo para aplicá-la ao ativo.
Você pode copie o URL para compartilhar com outros usuários.
Entrega de ativos com predefinições do visualizador do Dynamic Media delivering-assets-with-viewer-presets
Para obter os URLs das Predefinições do visualizador, consulte Vincular URLs à sua aplicação web. Consulte também Incorporação do visualizador de vídeo em uma página da Web.
Se você estiver usando o AEM como o WCM, é possível adicionar ativos usando as predefinições do visualizador diretamente na página. Consulte Adicionar ativos Dynamic Media às páginas.