Elementos de mídia no Cartão Adaptável

Importante

Essa documentação é considerada herdada. Para obter informações e recursos abrangentes relacionados à mídia em Cartões Adaptáveis, visite o hub de documentação de Cartões Adaptáveis.

A captura de tela mostra a página inicial do site de Cartões Adaptáveis da Microsoft.

O hub de documentação de Cartões Adaptáveis oferece documentação de referência completa e mais recente, um Designer de Cartão Adaptável atualizado, exemplos de JSON internos, práticas recomendadas de design e um histórico de versão detalhado dos recursos do Cartão Adaptável. Para obter mais informações, consulte introdução ao hub de documentação de Cartões Adaptáveis e novas atualizações de Cartões Adaptáveis.

O elemento de mídia do Cartão Adaptável é um componente usado para inserir arquivos de áudio e vídeo diretamente no Cartão Adaptável. Os elementos de mídia aprimoram a experiência do usuário, tornando os cartões mais interativos e envolventes. Os usuários do aplicativo podem exibir e reproduzir arquivos de mídia diretamente nos Cartões Adaptáveis no Teams. Aqui estão alguns benefícios sobre os elementos de mídia no Cartão Adaptável:

  • Maior engajamento: a adição de elementos de mídia torna os cartões mais eficazes e pode capturar a atenção dos usuários do aplicativo com mais eficiência.

  • Comunicação aprimorada: os elementos de mídia podem transmitir informações de forma mais eficaz com pôsteres ricos do que apenas texto.

  • Versatilidade: Os elementos de mídia podem ser usados em vários cenários, como tutoriais, comunicados ou solicitações de comentários.

Você pode adicionar os arquivos de mídia disponíveis no OneDrive, SharePoint, YouTube, Dailymotion ou Vimeo ao seu Cartão Adaptável.

A imagem a seguir mostra o elemento de mídia no Cartão Adaptável:

Adicionar elementos de mídia ao seu Cartão Adaptável

Adicione arquivos de mídia a um Cartão Adaptável existente ou novo por meio do Portal do Desenvolvedor do Teams ou do Designer do Cartão Adaptável. Para incorporar arquivos de mídia ao seu Cartão Adaptável, siga estas etapas:

  1. Vá para Portal do Desenvolvedor para Teams.

  2. Selecione um card existente na lista de Cartões Adaptáveis criados anteriormente ou crie um novo Cartão Adaptável. Para criar um novo card, selecione +New card, insira o nome do card e selecione Save.

  3. No painel esquerdo, em Elementos, selecione Mídia e adicione-a ao seu Cartão Adaptável.

    A captura de tela mostra o Cartão Adaptável com elementos de mídia.

  4. Em ESTRUTURA DO CARTÃO, selecione Mídia. A janela PROPRIEDADES DO ELEMENTO é exibida.

  5. Em PROPRIEDADES DO ELEMENTO, atualize os seguintes campos:

    • Na seção Fontes, insira a URL do arquivo de mídia na URL.

      Obter URL de mídia para o OneDrive ou o SharePointComo o Cartão Adaptável não dá suporte a URLs de arquivos de mídia copiados da barra de endereços do OneDrive ou do SharePoint, você deve obter uma URL de mídia. Para arquivos de mídia do SharePoint ou do OneDrive, verifique se os usuários do aplicativo têm acesso aos arquivos de mídia disponíveis no SharePoint ou no OneDrive. Para obter a URL para seus arquivos de mídia no OneDrive ou no SharePoint, siga as etapas:

      1. Carregue seus arquivos de mídia no OneDrive ou no SharePoint.

      2. Obtenha uma URL usando as opções Compartilhar, Copiar link ou Copiar link no momento atual do OneDrive ou do SharePoint.

        A captura de tela mostra de onde você pode copiar um link.

        Você também pode criar uma URL para um DriveItem. Para obter mais informações, consulte DriveItem.

  6. Selecione Salvar e, em seguida, selecione Enviar-me este card.

    A captura de tela mostra como salvar seu Cartão Adaptável e enviá-lo para o chat do Teams.

    Seu Cartão Adaptável com arquivo de mídia foi salvo com êxito e enviado para o chat do Teams. Veja a seguir um exemplo de arquivo de mídia em seu Cartão Adaptável:

    A captura de tela mostra um Cartão Adaptável com arquivos de mídia em um chat do Teams.

O código a seguir mostra um exemplo de conteúdo de Cartão Adaptável com elementos de mídia:

{
  "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", 
  "type": "AdaptiveCard", 
  "version": "1.6", 
  "fallbackText": "This card requires CaptionSource to be viewed. Ask your platform to update to Adaptive Cards v1.6 for this and more!", 
  "body": [
    {
      "type": "TextBlock",
      "text": "YouTube video",
      "wrap": true
    },
    { 
      "type": "Media",
      "poster": "https://adaptivecards.microsoft.com/images/adaptivecards1.jpeg",
      "sources": [
        {
          "mimeType": "video/mp4",
          "url": "https://www.youtube.com/watch?v=S7xTBa93TX8"
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Vimeo video",
      "wrap": true
    },
    {
      "type": "Media",
      "poster": "https://adaptivecards.microsoft.com/images/adaptivecards1.jpeg",
      "sources": [
        {
          "mimeType": "video/mp4",
          "url": "https://vimeo.com/508683403"
        }
      ]
    },
    {
      "type": "TextBlock",
      "text": "Dailymotion video",
      "wrap": true
    },
    {
      "type": "Media",
      "poster": "https://adaptivecards.microsoft.com/images/adaptivecards1.jpeg",
      "sources": [
        {
          "mimeType": "video/mp4",
          "url": "https://www.dailymotion.com/video/x8wi5ho"
        }
      ]
    }
  ]
}
Propriedade Descrição
type Deve ser Media para adicionar arquivos de mídia.
poster A URL de uma imagem exibida antes da reprodução da mídia. Dá suporte a URI de dados na versão 1.2+.
Se você omitir o pôster, o media elemento usará um pôster padrão (controlado pelo aplicativo host) ou tentará extrair automaticamente o pôster do serviço de vídeo de destino quando a URL de origem apontar para um vídeo do site host, como o YouTube. poster A URL tem suporte apenas para clientes móveis do Teams.
sources.url A URL para um arquivo de mídia. Dá suporte a URI de dados na versão 1.2+.
sources.mimeType Tipo MIME de mídia associada, como video/mp4. mimeType é um campo obrigatório para clientes da Web e da área de trabalho do Teams.

Para obter mais informações, consulte Cartões mediaAdaptáveis .

Limitações

Para clientes de área de trabalho do Teams, o Cartão Adaptável dá suporte à reprodução em linha e em tela inteira, enquanto para clientes móveis, a experiência é limitada a tela inteira e picture-in-picture (PiP), que permite assistir ao vídeo em janela flutuante ao abrir os outros aplicativos.

Exemplos de código

Nome do exemplo Descrição .NET Node.js
Elementos de mídia no Cartão Adaptável Este exemplo demonstra o uso de um bot para enviar vários tipos de card no Microsoft Teams, incluindo cartões Adaptive, Hero, Thumbnail e OAuth. Ele aborda instruções de configuração, implantação e instalação do aplicativo. View NA
Formatação de Bot Exemplo que demonstra formatação diferente suportada em cartões usando bot. View Exibir

Confira também

  • Last updated on