When a meeting is recorded in Microsoft Teams, the recording is stored in the person’s (who recorded) OneDrive and available for 120 days (default) in the meeting chat for playback. To keep the recordings longer the files must be moved to a common folder in a SharePoint teamsite which everyone in the team can access. Moving files to SharePoint opens better ways to improve the playback experience for users.
1. The modern page experience
Store the file in a folder in a SharePoint teamsite document library. Create a new page on the site and give it a title. Add the file and media web part and point the web part to the file you added before. Save and play the video. The video plays back using the Stream on SharePoint video player experience.
Add description and context: Add a vertical column to the page, add text, and people web parts to give a description and add context to the video.
Additionally, you can also add any documents and upcoming sessions related to the video on the page, as shown below.
2. The playlist
When you have more than a few playback files, store them in a folder in a SharePoint teamsite document library. Create a new page on the site and give it a title. Create a vertical section and add the “Document library” web part. Select the library and folder that hosts the files you uploaded.
To the main section of the page, add the file and media web part but do not point it to a file yet. When prompted, cancel it, click edit on the web part and then click the ellipses at the top right corner and click “connect to a source”. Select the document library web part on the page as its source. Save the page. Now when you select a file in the document library web part, the file and media web part plays the selected file, making it dynamic.
Additionally, you can also add the “List properties” web part to the page and connect it to the “Document library” web part on the page, as its source. You can include fields from the Document library that hold metadata related to the files stored in the library (prerequisite: these fields should already exist in the library. You can add them there and then perform this step). This can give additional information and context to the file that the user has chosen to play.
You can also tidy up the document library web part on the page by creating a new view for the library and formatting it using JSON. To get the example shown below you can copy paste the JSON code below when formatting the view of the library. And then on the page, change the view of the web part to the newly created view. If you would like to know how to format a view, follow this guide I made earlier.
Enjoying this blog? Find similar blogs here.
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
"hideSelection": false,
"hideListHeader": true,
"rowFormatter": {
"elmType": "div",
"style": {
"display": "flex",
"float": "left",
"margin": "5px",
"padding": "8px",
"width": "340px",
"min-height": "80px",
"background-color": "=if(@isSelected==true, '#e0e0e0', 'ms-bgColor-neutralLight')",
"justify-content": "space-between",
"border-radius": "10px",
"white-space": "normal",
"overflow-wrap": "break-word"
},
"attributes": {
"class": "sp-card-container ms-bgColor-neutralLighterAlt ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"float": "left",
"margin": "5px",
"padding": "2px",
"width": "240px",
"min-height": "90px",
"justify-content": "start",
"flex-direction": "row",
"border-radius": "5px",
"white-space": "normal",
"overflow-wrap": "break-word"
},
"children": [
{
"elmType": "div",
"style": {
"max-width": "50px",
"max-height": "50px",
"margin-right": "1px",
"white-space": "normal",
"overflow": "visible"
},
"children": [
{
"elmType": "img",
"style": {
"display": "block",
"max-width": "50px",
"height": "50px"
},
"attributes": {
"src": "@thumbnail.medium"
}
}
]
},
{
"elmType": "div",
"style": {
"display": "flex",
"float": "left",
"margin": "2px",
"padding": "5px",
"width": "1400px",
"min-height": "90px",
"justify-content": "start",
"flex-direction": "column",
"border-radius": "5px",
"white-space": "normal",
"overflow-wrap": "break-word"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-neutralLight ms-bgColor-neutralLight--hover ms-fontColor-themePrimary--hover"
},
"style": {
"font-weight": "400",
"font-size": "1em",
"overflow": "visible",
"white-space": "normal",
"padding": "4px",
"border-radius": "5px",
"margin-bottom": "4px"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"style": {
"text-align": "left",
"padding-right": "5px",
"margin-left": "5px",
"margin-right": "10px"
},
"children": [
{
"elmType": "div",
"style": {
"font-weight": "500",
"font-size": "1.2em",
"overflow": "visible",
"max-width": "260px",
"white-space": "normal",
"padding-bottom": "8px"
},
"txtContent": "[$Title]"
}
]
},
{
"elmType": "div",
"style": {
"display": "flex"
},
"children": [
{
"elmType": "p",
"attributes": {
"class": "sp-card-userEmptyText"
},
"txtContent": "=if(length([$Responsibles]) == 0, '–', '')"
},
{
"forEach": "personIterator in [$Responsibles]",
"elmType": "a",
"attributes": {
"class": "=if(loopIndex('personIterator') >= 5, 'sp-card-userContainer', 'sp-card-userContainer sp-card-keyboard-focusable')"
},
"style": {
"display": "=if(loopIndex('personIterator') >= 5, 'none', '')"
},
"children": [
{
"elmType": "img",
"defaultHoverField": "[$personIterator]",
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]",
"class": "sp-card-userThumbnail"
},
"style": {
"display": "=if(length([$Responsibles]) > 5 && loopIndex('personIterator') >= 4, 'none', '')",
"border-radius": "50%",
"padding": "-1px"
}
},
{
"elmType": "div",
"attributes": {
"class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary sp-card-userOthers"
},
"style": {
"display": "=if(length([$Responsibles]) > 5 && loopIndex('personIterator') == 4, '', 'none')",
"border-radius": "50%"
},
"customCardProps": {
"formatter": {
"elmType": "div",
"attributes": {
"class": "sp-card-personCallout"
},
"children": [
{
"forEach": "personIterator in [$Responsibles]",
"elmType": "div",
"attributes": {
"class": "sp-card-userContainer sp-card-userCustomCard"
},
"style": {
"display": "=if(loopIndex('personIterator') < 4, 'none', '')",
"border-radius": "50%"
},
"children": [
{
"elmType": "img",
"defaultHoverField": "[$personIterator]",
"attributes": {
"src": "=getUserImage([$personIterator.email], 'S')",
"title": "[$personIterator.title]",
"class": "sp-card-userThumbnail"
}
}
]
}
]
},
"openOnEvent": "hover"
},
"children": [
{
"elmType": "span",
"txtContent": "='+' + toString(length([$Responsibles]) - (4))"
}
]
}
]
}
]
}
]
}
]
}
]
}
}
3. The calendar
When meetings are recurrent and sessions are frequent, recordings can be shown over a calendar creating a timeline effect. In the document library where the files are stored, create a new view, and select the calendar and choose month format. Select the modified date as the start and end values, the “Title” field as the “title of items on calendar” and save.
Create a new page on the site and give it a title. In the main section of the page, add the Document library web part. Select the library and folder that hosts the files you uploaded, and select the calendar view you just created.
In the same section, above the library web part, add the file and media web part but do not point it to a file yet. When prompted, cancel it, click edit on the web part and then click the ellipses at the top right corner to connect to a source. Select the document library web part on the page as its source. Save the page. Now when you select a file in the document library web part, the file and media web part plays the selected file.
Additionally, on a vertical section on the page, you can also add a list properties web part to the page and also connect to the document library web part as its source. You can include fields from the document library that hold metadata related to the files stored in the library. This can give additional information and context to the file that the user has chosen to play.
You can add some flavor by color-coding the calendar entries. For example, here I have done that by adding a “MeetingType” field and categorizing the recording files. So, if the “MeetingType” is Team meeting then it gets the green color, if it is a training, it gets purple and so on. To achieve this, you must add the field to the calendar view through the library settings and then format the calendar view, edit rules, and add color rules.
SharePoint is more than just a place to store files, or a collaboration point to exchange files, it can be flexible to create engaging experiences for your users.
Hope you found this article useful.
About the Author
Power Platform Specialist, IT professional. Talks Microsoft 365, the Power Platform, AI, Virtual Reality, Augmented Reality, Photography.
Vijayaragavan, A., 2023, 3 ways SharePoint can improve meeting playback experience, Medium, Available at: https://medium.com/@anand.vadivelan/3-ways-sharepoint-can-improve-meeting-playback-experience-d31cd3b6b94b [Accessed on 3 May 2023]
