Edit

Media elements in Adaptive Card

  • Article

Media elements in Adaptive Card provides enhanced media experience and increases engagement with the Adaptive Card. You can add media files such as audio or video clips to your Adaptive Card.

Adaptive Card plays the video or audio clips by accessing the media files available in OneDrive or SharePoint. You can view the media files within the Adaptive Card in Teams.

The following screenshot shows you the media elements in your Adaptive Card:

Note

For desktop clients, Adaptive cards support inline and full screen playback, whereas for mobile clients, the experience is limited to full screen and picture-in-picture (PiP) (which allows you to watch video in floating window when you open the other apps).

Add media elements to your Adaptive Card

You can add media files to an existing or new Adaptive Card using Teams Developer Portal or Adaptive Card Designer. To add media files to your Adaptive Card, follow the steps:

  1. Add your media files to OneDrive or SharePoint.

  2. Create a sharing link or URL for a DriveItem. You can also get a link or URL using the Share, Copy link, or Copy link at current time options from OneDrive or SharePoint.

    Screenshot shows you from where you can take a link.

    Note

    Adaptive Card does't support media file links or URL that are copied directly from the address bar.

  3. Open an existing Adaptive Card or create a new Adaptive Card using Teams Developer Portal or Adaptive Card Designer.

  4. From the left pane, under Elements, select Media and add it to your Adaptive Card.

    Screenshot shows you the Adaptive Card with media elements.

  5. Under Custom card structure title, select Media. The ELEMENT PROPERTIES window appears.

  6. In ELEMENT PROPERTIES section, update the following fields:

    • Under Sources section, enter your media file URL in the URL.
    • Under Media section, enter image URL in the Poster URL. For more information, see Adaptive Cards media.

    Screenshot shows you the Adaptive Card schema with media elements.

    Note

    Poster URL is supported only for mobile clients.

  7. Select Save and then select Send me this card.

    Screenshot shows you how to save your Adaptive card and send it to your Teams

    Your Adaptive Card with media file is successfully saved and sent to your Teams chat. Now, you can play your media file in your Adaptive Card.

    Screenshot shows you the adaptive card with media files in Teams chat.

Example

The following code shows an example of an Adaptive Card with media elements:

{
  "$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": "Media",
      "poster": "https://adaptivecards.io/content/poster-video.png",
      "sources": [
    {
          "mimeType": "video/mp4",
          "url": "https://adaptivecardsblob.blob.core.windows.net/assets/AdaptiveCardsOverviewVideo.mp4"
    }
      ]
    }
  ]
}

Limitations

  • Adaptive Card supports only the media files uploaded in SharePoint or OneDrive.
  • Ensure that the users have access to the media files available in the SharePoint or OneDrive.

Code samples

Sample name Description .NET
Media elements in Adaptive Card This sample shows how user can send Adaptive Cards with media files. View

See also