Creating a video portal in SharePoint with JSON formatted document library

Often times we store videos in SharePoint and use the file viewer or the highlighted content web parts to display videos on the homepage of the site. With Microsoft Stream also moving towards SharePoint for storing meeting recordings, the use of videos in SharePoint site pages could increase. Recently I worked on an event page in SharePoint and thought it would be useful to have a video portal created for the event to store and display event session recordings.

In this post are the details of the document library and how to display that in the SharePoint site page.

Document library

The document library exists at the same level as the default shared documents library on the site.

Video files are uploaded to the document library

Additional columns can be created in the library, these additional columns provide rich information that can be displayed in the video portal. Rich metadata such as title, description, people, tools/topics covered, social sharing options like yammer, share and like buttons can compliment the video portal experience.

When video files are uploaded and the metadata fields are filled in with the information, the default “All Documents” view can look like this.

The default view or a new view can be created with all the columns included. The view can be formatted using JSON to get the card view in a gallery style layout. Each card has the video title, a description, tools covered using icons from Flicon.io, people featuring in the video with hover cards opening their office profile and a timestamp to indicate when the video was published. The “Watch” button opens the video in a new browser tab, the learning button opens the item in a learning application like a Learning Management system so user can add to their profile, the Yammer button opens the connected thread in Yammer for conversations, the share button opens the default share option within SharePoint/OneDrive so user can send the item through email or copy link, the thumbs-up button registers user likes in the “User” person column using the recently released setValue function in List formatting.

To achieve this formatting, the view needs to be formatted using JSON.

The complete JSON is provided below.

The final step is then to embed this view in the SharePoint site page using the Document library web part.

And choosing the library to be embedded. “Session recordings” is the name of my library.

Editing the web part to set the correct view, hiding the command bar and “See all” buttons.

The final result can look like this. Optionally a support list to filter down videos by topic or category can be added to enhance the experience.

Hope you found this useful. I would be interested to hear your thoughts and if you would use this and how you might enhance this.