Media elements in Adaptive Card
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:
Add your media files to OneDrive or SharePoint.
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.
Note
Adaptive Card does't support media file links or URL that are copied directly from the address bar.
Open an existing Adaptive Card or create a new Adaptive Card using Teams Developer Portal or Adaptive Card Designer.
From the left pane, under Elements, select Media and add it to your Adaptive Card.
Under Custom card structure title, select Media. The ELEMENT PROPERTIES window appears.
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.
Note
Poster URL is supported only for mobile clients.
Select Save and then select Send me this card.
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.
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
Platform Docs