Corte inteligente de vídeo smart-crop-video

O Visualizador de vídeo de recorte inteligente reproduz streaming e vídeo progressivo codificado no formato H.264, além de suporte para recorte inteligente. Ele é fornecido pela Dynamic Media Classic ou pelo Experience Manager com Dynamic Media.

Consulte Requisitos e pré-requisitos do sistema.

Há suporte para vídeo único e Conjuntos de vídeos adaptados. Além disso, o visualizador suporta o trabalho com vídeo progressivo e fluxos HLS hospedados em locais externos. Ele foi projetado para funcionar em navegadores para desktop e para dispositivos móveis que suportam vídeo HTML5. Esse visualizador também oferece suporte a legendas ocultas opcionais que são exibidas sobre conteúdo de vídeo, navegação de capítulo de vídeo e ferramentas de compartilhamento de redes sociais.

O Visualizador de vídeo de recorte inteligente usa a reprodução de vídeo de streaming HTML5 no formato HLS na configuração padrão, sempre que o sistema subjacente a suportar. Em sistemas que não suportam transmissão contínua de HTML5, o visualizador retorna à entrega de vídeo progressiva de HTML5.

Visualizador tipo 518.

URL de demonstração section-e1c3106f5b3e445d9b95be337c2f94e2

https://s7d9.scene7.com/s7viewers/html5/SmartCropVideoViewer.html?asset=html5automation/frisbee-AVS

Uso do visualizador de vídeo de recorte inteligente section-f21ac23d3f6449ad9765588d69584772

O Visualizador de vídeo de recorte inteligente representa um arquivo JavaScript principal e um conjunto de arquivos auxiliares - um único JavaScript inclui todos os componentes do SDK do visualizador usados por esse visualizador específico, ativos e CSS baixados pelo visualizador em tempo de execução.

Você pode usar o Visualizador de vídeo de recorte inteligente no modo pop-up usando a página de HTML pronta para produção fornecida com os Visualizadores IS. Ou você pode usar o visualizador no modo incorporado, onde ele é integrado em uma página da Web de destino usando a API documentada.

A tarefa de configurar e definir a aparência do visualizador é semelhante a outros visualizadores. Toda a atribuição de capa é obtida por meio de CSS personalizado.

Consulte Referência de comando comum a todos os visualizadores - Atributos de configuração e Referência de comando comum a todos os visualizadores - URL

Interação com o visualizador de vídeo de recorte inteligente section-ab66eb6955aa4a8aa6d14a3b3acfed3f

O Visualizador de vídeo de recorte inteligente fornece um conjunto de controles padrão da interface do usuário para reprodução de vídeo, como:

  • Um botão Reproduzir/Pausar.
  • Bolha de tempo de vídeo do depurador de vídeo.
  • Indicador de tempo de reprodução/tempo total.
  • Controle de volume.
  • botão de tela cheia.
  • Alternar legenda oculta.

Todos esses controles estão agrupados em uma barra de controle na parte inferior da interface do usuário do visualizador.

Em dispositivos de toque, o controle de volume fica oculto na interface do usuário, pois só é possível controlar o volume usando os botões do hardware.

Quando o visualizador opera no modo pop-up, o botão de tela cheia não está disponível na interface do usuário.

É possível navegar pelo conteúdo de um vídeo rapidamente quando um capítulo de vídeo é ativado. Os capítulos de vídeo são exibidos como marcadores no rastreamento do depurador de vídeo e mostram o título do capítulo e a descrição associada em uma rolagem do mouse ou com um único toque em sistemas de toque. Os usuários podem buscar um capítulo específico selecionando um marcador de capítulo ou a bolha de descrição do capítulo.

O visualizador é compatível com entrada por toque e entrada do mouse em dispositivos Windows com tela sensível ao toque e mouse. No entanto, esse suporte está limitado apenas aos navegadores Chrome, Internet Explorer 11 e Edge.

Este visualizador é totalmente acessível pelo teclado.

Consulte Acessibilidade e navegação pelo teclado.

Ferramentas de compartilhamento de redes sociais com o Visualizador de vídeo de recorte inteligente section-907d316fe1da4b87abb9775f02464704

O Visualizador de vídeo de recorte inteligente é compatível com ferramentas de compartilhamento de redes sociais. Eles estão disponíveis como um único botão na interface do usuário do, que se expande para uma barra de ferramentas de compartilhamento quando o usuário clica ou toca nela.

A barra de ferramentas de compartilhamento contém um ícone para cada tipo de canal de compartilhamento compatível, como Facebook, Twitter, compartilhamento de email, compartilhamento de código incorporado e compartilhamento de link. Quando as ferramentas de compartilhamento de email, compartilhamento incorporado ou compartilhamento de link são ativadas, o visualizador exibe uma caixa de diálogo modal com um formulário de entrada de dados correspondente. Quando Facebook ou Twitter são chamados, o visualizador redireciona o usuário para uma caixa de diálogo de compartilhamento padrão a partir de um serviço de mídia social. Além disso, quando uma ferramenta de compartilhamento é ativada, a reprodução de vídeo é pausada automaticamente.

As ferramentas de compartilhamento não estão disponíveis no modo de tela cheia devido a restrições de segurança do navegador da Web.

Incorporação do visualizador de corte inteligente de vídeo section-6bb5d3c502544ad18a58eafe12a13435

Páginas da Web diferentes têm necessidades diferentes para o comportamento do visualizador. Às vezes, uma página da Web fornece um link que, quando selecionado, abre o visualizador em uma janela do navegador separada. Em outros casos, é necessário incorporar o visualizador diretamente na página de hospedagem. No último caso, a página da Web pode ter um layout de página estático ou usar um design responsivo que é exibido de forma diferente em diferentes dispositivos ou para diferentes tamanhos de janela do navegador. Para acomodar essas necessidades, o visualizador suporta três modos de operação principais: pop-up, incorporação de tamanho fixo e incorporação de design responsiva.

A incorporação de vários vídeos na mesma página é compatível com tablets e dispositivos móveis. Normalmente, somente um vídeo pode ser reproduzido de cada vez. Quando um usuário começa a reproduzir um vídeo e, em seguida, tenta reproduzir outro vídeo, o primeiro vídeo é pausado automaticamente. O vídeo que foi pausado automaticamente lembra seu tempo de reprodução atual, para que o usuário possa sempre voltar e retomar a reprodução. A única exceção dessa regra é o navegador Chrome em dispositivos Android™ 4.x, que podem reproduzir vídeos em paralelo.

Sobre o modo pop-up

No modo pop-up, o visualizador é aberto em uma janela ou guia separada do navegador da Web. Ela ocupa toda a área da janela do navegador e é ajustada caso o navegador seja redimensionado ou a orientação do dispositivo seja alterada.

Esse modo é o mais comum para dispositivos móveis. A página da Web carrega o visualizador usando window.open() Chamada de JavaScript, configurada corretamente A elemento HTML ou qualquer outro método adequado.

É recomendável usar uma página de HTML para o modo de operação pop-up. É chamado de SmartCropVideoViewer.html e está localizado sob o html5/ subpasta da implantação padrão do IS-Viewers:

<s7viewers_root>/html5/SmartCropVideoViewer.html

Você pode obter personalização visual aplicando CSS personalizado.

Veja a seguir um exemplo do código HTML que abre o visualizador em uma nova janela:

<a href="http://s7d1.scene7.com/s7viewers/html5/SmartCropVideoViewer.html?asset=html5automation/frisbee-AVS" target="_blank">Open popup viewer</a>

Sobre o modo de incorporação de tamanho fixo e o modo de incorporação responsiva

No modo incorporado, o visualizador é adicionado à página da Web existente, que pode já ter algum conteúdo de cliente não relacionado ao visualizador. O visualizador normalmente ocupa apenas uma parte do espaço imobiliário da página da Web.

Os principais casos de uso são páginas da Web orientadas para desktops ou dispositivos tablet e também páginas de design responsivas que ajustam o layout automaticamente, dependendo do tipo de dispositivo.

A incorporação de tamanho fixo é usada quando o visualizador não altera seu tamanho após o carregamento inicial. Essa opção é a melhor para páginas da Web com layout de página estático.

A incorporação responsiva de design presume que o visualizador deve redimensionar em tempo de execução em resposta à alteração de tamanho de seu contêiner DIV. O caso de uso mais comum é adicionar o visualizador a uma página da Web que usa um layout de página flexível.

No modo de incorporação de design responsivo, o visualizador se comporta de forma diferente, dependendo da forma como a página da Web dimensiona seu contêiner DIV. Se a página da Web definir somente a largura do container DIV, deixando sua altura irrestrita, o visualizador escolhe automaticamente sua altura de acordo com a proporção do ativo usado. Esse método garante que o ativo se ajuste perfeitamente à exibição sem qualquer preenchimento nas laterais. Esse caso de uso é o mais comum para páginas da Web que usam uma estrutura de layout de design responsiva, como Bootstrap ou Foundation.

Caso contrário, se a página da Web definir a largura e a altura do container do visualizador DIV, o visualizador preenche apenas essa área e segue o tamanho fornecido pelo layout da página da Web. Um bom exemplo é a incorporação do visualizador em uma sobreposição modal, em que a sobreposição é dimensionada de acordo com o tamanho da janela do navegador da Web.

Incorporação de tamanho fixo

Você adiciona o visualizador a uma página da Web fazendo o seguinte:

  1. Adicionar o arquivo JavaScript do visualizador à página da Web.

  2. Definição do contêiner DIV.

  3. Definindo o tamanho do visualizador.

  4. Criar e inicializar o visualizador.

  5. Adicionar o arquivo JavaScript do visualizador à página da Web.

    A criação de um visualizador exige a adição de uma tag de script no cabeçalho de HTML. Antes de usar a API do visualizador, inclua SmartCropVideoViewer.js. A variável SmartCropVideoViewer.js O arquivo está localizado sob o html5/js/ subpasta da implantação padrão do IS-Viewers:

<s7viewers_root>/html5/js/SmartCropVideoViewer.js

Você pode usar um caminho relativo se o visualizador for implantado em um dos servidores do Adobe Dynamic Media Classic e for distribuído no mesmo domínio. Caso contrário, especifique um caminho completo para um dos servidores do Adobe Dynamic Media Classic que têm os Visualizadores IS instalados.

O caminho relativo tem a seguinte aparência:

<script language="javascript" type="text/javascript" src="/s7viewers/html5/js/SmartCropVideoViewer.js"></script>
NOTE
Fazer referência apenas ao JavaScript do visualizador principal include arquivo na sua página. Não faça referência a nenhum arquivo JavaScript adicional no código da página da Web que possa ser baixado pela lógica do visualizador no tempo de execução. Em particular, não faça referência direta ao SDK do HTML5 Utils.js biblioteca carregada pelo visualizador de /s7viewers caminho de contexto (o chamado SDK consolidado) include). O motivo é que a localização de Utils.js ou bibliotecas semelhantes do visualizador de tempo de execução são totalmente gerenciadas pela lógica do visualizador e a localização muda entre as versões do visualizador. O Adobe não mantém versões mais antigas do visualizador secundário includes no servidor.
Como resultado, ao inserir uma referência direta a qualquer JavaScript secundário include usado pelo visualizador na página interrompe a funcionalidade do visualizador no futuro, quando uma nova versão do produto é implantada.
  1. Definição do container DIV.

    Adicione um elemento DIV vazio à página em que você deseja que o visualizador apareça. O elemento DIV deve ter sua ID definida porque essa ID é passada posteriormente para a API do visualizador. O DIV tem seu tamanho especificado por meio de CSS.

    O espaço reservado DIV é um elemento posicionado, o que significa que o position A propriedade CSS está definida como relative ou absolute.

    Verifique se o recurso de tela cheia funciona corretamente no Internet Explorer. Verifique se não há outros elementos no DOM com uma ordem de empilhamento superior à do espaço reservado DIV.

    Veja a seguir um exemplo de um elemento DIV de espaço reservado definido:

    code language-html
    <div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
    
  2. Definir o tamanho do visualizador

    Você pode definir o tamanho estático do visualizador declarando-o para .s7videoviewer classe CSS de nível superior em unidades absolutas ou usando o modificador stagesize.

    Você pode colocar o dimensionamento no CSS diretamente na página do HTML ou em um arquivo CSS do visualizador personalizado. Posteriormente, ele é atribuído a um registro de predefinição do visualizador no Dynamic Media Classic ou transmitido explicitamente usando um comando de estilo.

    Consulte Personalização do visualizador de vídeo de recorte inteligente para obter mais informações sobre como estilizar o visualizador usando CSS.

    Este é um exemplo de definição de um tamanho de visualizador estático em uma página de HTML:

    code language-html
    #s7viewer.s7videoviewer {
     width: 640px;
     height: 480px;
    }
    

    Você pode definir stagesize modificador no registro predefinido do visualizador no Dynamic Media Classic, ou passe-o explicitamente com o código de inicialização do visualizador com params coleção. Ou, como uma chamada de API, conforme descrito na seção Referência de comandos, como no seguinte:

    code language-html
    smartCropVideoViewer.setParam("stagesize", "640,480");
    

    Uma abordagem baseada em CSS é recomendada e é usada neste exemplo.

  3. Criar e inicializar o visualizador.

    Quando tiver concluído as etapas acima, você criará uma instância de s7viewers.SmartCropVideoViewer classe, transmita todas as informações de configuração para seu construtor e chame init() em uma instância do visualizador. As informações de configuração são passadas ao construtor como um objeto JSON. No mínimo, esse objeto deve ter containerId campo que contém o nome da ID do contêiner de visualização e aninhado params Objeto JSON com parâmetros de configuração compatíveis com o visualizador. Nesse caso, params objeto deve ter pelo menos o URL do Servidor de imagens passado como serverUrl propriedade, URL do servidor de vídeo passado como videoserverurl propriedade e o ativo inicial como asset parâmetro. A API de inicialização baseada em JSON permite criar e iniciar o visualizador com uma única linha de código.

    É importante adicionar o contêiner do visualizador ao DOM para que o código do visualizador possa encontrar o elemento do contêiner por sua ID. Alguns navegadores atrasam a criação do DOM até o fim da página da Web. Para obter compatibilidade máxima, chame o init() método antes do fechamento BODY ou no corpo onload() evento.

    Ao mesmo tempo, o elemento de contêiner não deve necessariamente fazer parte do layout da página da Web ainda. Por exemplo, pode ser oculto usando display:none estilo atribuído a ele. Nesse caso, o visualizador atrasa o processo de inicialização até o momento em que a página da Web traz o elemento de contêiner de volta ao layout. Quando essa ação ocorre, o carregamento do visualizador é retomado automaticamente.

    Este é um exemplo de criação de uma instância do visualizador, transmissão de opções de configuração mínimas necessárias para o construtor e chamada de init() método. Este exemplo assume smartCropVideoViewer é a instância do visualizador, s7viewer é o nome do espaço reservado DIV, http://s7d1.scene7.com/is/image/ é o URL do Servidor de imagens, http://s7d1.scene7.com/is/content/ é o URL do servidor de vídeo e html5automation/frisbee-AVS é o ativo.

    code language-html
    <script type="text/javascript">
    var smartCropVideoViewer = new s7viewers.SmartCropVideoViewer({
     "containerId":"s7viewer",
    "params":{
     "asset":"html5automation/frisbee-AVS",
     "serverurl":"http://s7d1.scene7.com/is/image/",
     "videoserverurl":"http://s7d1.scene7.com/is/content/"
    }
    }).init();
    </script>
    

    O código a seguir é um exemplo completo de uma página da Web trivial que incorpora o Visualizador de corte inteligente de vídeo com um tamanho fixo:

    code language-html
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SmartCropVideoViewer.js"></script>
    <style type="text/css">
    #s7viewer.s7videoviewer {
     width: 640px;
     height: 480px;
    }
    </style>
    </head>
    <body>
    <div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
    <script type="text/javascript">
    var smartCropVideoViewer = new s7viewers.SmartCropVideoViewer({
     "containerId":"s7viewer",
    "params":{
     "asset":"html5automation/frisbee-AVS",
     "serverurl":"http://s7d1.scene7.com/is/image/",
     "videoserverurl":"http://s7d1.scene7.com/is/content/"
    }
    }).init();
    </script>
    </body>
    </html>
    

Incorporação responsiva de design com altura irrestrita

Com a incorporação responsiva de design, a página da Web normalmente tem algum tipo de layout flexível em vigor que determina o tamanho do tempo de execução do container do visualizador DIV. Para os fins deste exemplo, considere que a página da Web permite o container do visualizador DIV para obter 40% do tamanho da janela do navegador web, deixando sua altura irrestrita. O código de HTML da página da Web seria semelhante ao seguinte:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

Adicionar o visualizador a essa página é semelhante à incorporação de tamanho fixo; a única diferença é que você não precisa definir explicitamente o tamanho do visualizador.

  1. Adicionar o arquivo JavaScript do visualizador à página da Web.
  2. Definição do container DIV.
  3. Criar e inicializar o visualizador.

Todas as etapas acima são as mesmas da incorporação de tamanho fixo. Adicionar contêiner DIV ao "detentor" existente DIV. O código a seguir é um exemplo completo. Você pode ver como o tamanho do visualizador muda quando o navegador é redimensionado e como a taxa de proporção do visualizador corresponde ao ativo.

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SmartCropVideoViewer.js"></script>
<style type="text/css">
.holder {
 width: 40%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var smartCropVideoViewer = new s7viewers.SmartCropVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"html5automation/frisbee-AVS",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

A página de exemplos a seguir ilustra mais o uso real de incorporação de design responsivo com altura irrestrita:

Demonstrações ao vivo

Local de demonstração alternativo

Incorporação responsiva de design com largura e altura definidas

Se houver incorporação de design responsiva com largura e altura definidas, o estilo da página da Web será diferente; ele fornece ambos os tamanhos para o "suporte" DIV e centralize-o na janela do navegador. Além disso, a página da Web define o tamanho da variável HTML e BODY elemento a 100%:

<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder"></div>
</body>
</html>

As etapas de incorporação restantes são idênticas à incorporação responsiva de design com altura irrestrita. O exemplo resultante é o seguinte:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SmartCropVideoViewer.js"></script>
<style type="text/css">
html, body {
 width: 100%;
 height: 100%;
}
.holder {
 position: absolute;
 left: 20%;
 top: 20%;
 width: 60%;
height: 60%;
}
</style>
</head>
<body>
<div class="holder">
<div id="s7viewer" style="position:relative"></div>
</div>
<script type="text/javascript">
var smartCropVideoViewer = new s7viewers.SmartCropVideoViewer({
 "containerId":"s7viewer",
"params":{
 "asset":"html5automation/frisbee-AVS",
 "serverurl":"http://s7d1.scene7.com/is/image/",
 "videoserverurl":"http://s7d1.scene7.com/is/content/"
}
}).init();
</script>
</body>
</html>

Incorporação usando a API baseada em setter

Em vez de usar a inicialização baseada em JSON, é possível usar a API baseada em setter e o construtor sem args. Com essa API, o construtor não aceita parâmetros e os parâmetros de configuração são especificados usando setContainerId(), setParam(), e setAsset() Métodos de API do com chamadas de JavaScript separadas.

O exemplo a seguir ilustra a incorporação de tamanho fixo com a API baseada em setter:

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://s7d1.scene7.com/s7viewers/html5/js/SmartCropVideoViewer.js"></script>
<style type="text/css">
#s7viewer.s7videoviewer {
 width: 640px;
 height: 480px;
}
</style>
</head>
<body>
<div id="s7viewer" style="position:relative;width:640px;height:360px;"></div>
<script type="text/javascript">
var smartCropVideoViewer = new s7viewers.SmartCropVideoViewer();
smartCropVideoViewer.setContainerId("s7viewer");
smartCropVideoViewer.setParam("serverurl", "http://s7d1.scene7.com/is/image/");
smartCropVideoViewer.setParam("videoserverurl", "http://s7d1.scene7.com/is/content/");
smartCropVideoViewer.setAsset("html5automation/frisbee-AVS");
smartCropVideoViewer.init();
</script>
</body>
</html>
recommendation-more-help
b7426f53-aad9-4c00-83fc-664f30f681e8