Teams Real Simple with Pictures: Let’s build a Stream Video Portal in Teams

Written: 05/06/2022 | Updated: N/A

Ok. So unlike yesterday I have a few hours at my disposal and I wanted to test seeing whether I could build a Stream video portal in Teams. These videos should be surfaceable – but not as a tab in some team which I am a part of. These would be ideally surfaced as a personal tab in the app rail where I can access my videos at any point in time right in the flow of my work. Now the reason I want this is because I am a trainer, and as a trainer I have assets for courses which I want to serve up using the Shared System Audio feature in Teams. With the arrival of chapters and transcript, I will hopefully create this great situation for myself where I can have videos for my courses, and then chop those videos up into chapters to easy access to show what I need. So yeah, whilst this could have good application within my own organisation I am actually doing this one for my own personal gain. The cool thing about this is that in using SharePoint as the base for the video portal, we could enrich that video portal with files and loads of other stuff. But here I am going to aim at a version 1.

Let’s go.

This blog will cover

  • Getting the content
  • Deploying and Preparing the SharePoint Site
  • Deploying into Microsoft Teams
  • Limitations and Going Further

NOTE: This blog will have abridged steps and will assume some familiarity with Microsoft 365 and the Teams, SharePoint and Stream services

Prerequisites

  • Global Administrator, or Teams and SharePoint Administrator (POLP) permissions
  • Teams, SharePoint and Stream Licence (Within Microsoft 365 Licence) for testing

GETTING THE CONTENT

Ok, let’s start at the beginning. I am going to create a video portal which has two different sections on two of my passions – non IT of course! These are Geography – since I did my degree in Geographical Science and was once a Geography Teacher for Secondary! And Philosophy.

1.) The first thing is getting all the video files together for the video portal and arrange them into a folder. This can be on the local machine or in OneDrive. We’ll add more later – but this is just to start. These are all .mp4 files, all 720p. I arrange them alphabetically and by subject. In other words the format should be [Subject – Title – Sub Title]. This will be important later on.

DEPLOYING AND PREPARING THE SHAREPOINT SITE

Now I have some content to seed my video portal, I am going to deploy the SharePoint Site which will be the foundation, and storage, of the video portal.

1.) Login with administrator credentials to https://login.microsoftonline.com

2.) From the left app rail, or via the waffle (top left) select SharePoint

3.) Select Create Site

4.) Select Communication Site

5.) Give the Site a Name (Here called Video Hub) which produces the URL of the site, a Description and a Language then select Finish

6.) The site is now deployed

7.) Now the first thing I am going to do is change the Theme. I want this to look like a Stream portal so I select Cog in the top right and then and then Change the Look

8.) I choose the Red Theme and then select Save

9.) I then select Edit in the top right and remove everything from the page – all web parts and then Republish the page. It should now be blank

10.) Now select New and then select Document Library

11.) Call the first document library the Subject on one of the groups of videos. Here Philosophy will be used. Then select Create

12.) Rinse and repeat for the second document library and the second group of videos – again call it the subject. Here Geography has been used. The end result is that I have created two document libraries based on the two different subjects of the videos

13.) Upload the videos to each document library based upon their subject

14.) Now we have 2 documents libraries in the same communication site seeded with content, return to Home and then select Edit

15.) Now we are editing the site. Edit the first section and name it as one of the subjects of the videos (Here Geography is used). I will set this as

  • A single column
  • Collapsible
  • Default Display is expanded

16.) Add a second section and repeat step 15 so both sections show

17.) In the first section (Geography) add a webpart and select Highlighted Content

18.) Now, we add the videos to the page in the Highlighted Content. Do the following

  • Select Filter
  • Source: A document library on this site
  • Document Library: Here Geography for the document library created
  • Document Type: Video
  • Sort By: Name
  • Layout: Grid
  • Show up to this many items at a time: 16

19.) Once done, rinse and repeat for the second section and then Republish

20.) Our video portal is underway. We can even rebrand it a little more in-line with the Stream brand

In terms of experience, click any video and it transitions to the video within the browser in the new Stream Player

DEPLOYING INTO MICROSOFT TEAMS

Ok so we have deployed our video portal. If we wanted to add more sections, or more videos then it would be easy to do so. So now we need to surface that in Teams. In Teams we could always easily add this as a tab, by simply going into a channel, adding that to a Team using the SharePoint or SharePoint Pages app and adding the URL of the SharePoint site we have just created.

But how do I add it as a personal tab?

1.) In Teams select More Options (…) from the left app rail and then search for and select Developer Portal

2.) Select App Studio

3.) Select Create a New App

4.) Add the details as follows within App Details

  • Short Name: Short Name for the App (Here will be called ‘VideoHub’
  • Full Name: Full Name for the App (Here will be called ‘VideoHub’
  • Identification: Select Generate and generate an ID for the app
  • Package Name: As required (Here will be called ‘package.videohub.app’)
  • Version: App Version (Here 1.0.0)
  • Short Description: Description of the App (Add as required)
  • Full Description: Description of the App (Add as required)
  • Developer Name: Name of App Developer (Here ‘Contoso’)
  • Website: Website of Developer (Here ‘www.microsoft365pro.co.uk’)
  • Partner Information: Optional
  • Privacy Statement: URL (Here ‘www.microsoft365pro.co.uk’)
  • Terms of Use: URL (Here ‘www.microsoft365pro.co.uk’)

The logos and branding for the app are optional. Follow the brand guidelines in that transparent png’s are recommended. As we are trying to approximate Stream I have added the Stream logo.

5.) Under Tabs select Add a Personal Tab

6.) Add the following

Name: VideoHub
Entity: Unique Entity of the Tab. Example 100001 used here

Content URL: The content URL is very important. In order for the SharePoint Site to render, it needs to be written as follows

https://yourtenantname.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/yoursite

For example, the one I am using for this demo is:

https://m365x843980.sharepoint.com/_layouts/15/teamslogon.aspx?SPFX=true&dest=/sites/VideoHub

Website URL: Leave Blank, unless you want to a click out to the browser in the top right of the tab. If so, then use the URL of the SharePoint Site

7.) Ensure the domain of the SharePoint site is added under Domains and Permissions. What is also important – otherwise it may not render in the Teams Desktop App, is to add the AAD App ID and the Single Sign On as follows

8.) Once done select Test and Distribute and then Download

9.) The app package downloads

10.) Go to the Teams Admin Centre and under Teams Apps select Manage Apps and then Upload

11.) Select Upload

12.) Select the app package and then open. The new app has been added. Check the Teams Admin Centre that the app appears in the app list

13.) Go back into the Teams Client and from the left hand app rail select Apps

14.) Select Built for your Org

15.) Select The App

16.) Select Add

17.) And there it is, in Teams Web and Desktop

18.) Clicking on a video in Teams Desktop or Web goes out to SharePoint and uses the new Stream Player

We have our portal, all videos play in the new Stream player

LIMITATIONS AND GOING FURTHER

Ok, so we have built our video portal, and it plays in the new Stream player. But what has been learnt by this?

  • The fundamentals are there. We can build a video portal that is easily accessible in Teams, that can be segregated into sections, that those sections can be based on separate document libraries ensuring segregation of content
  • This could be used in scenarios like training and demonstration (products etc.)

What could be improved?

  • The videos in the Highlight web part could play in Teams, not go out to a browser
  • If they play in Teams, they should play in the modern Stream Player
  • That we need a Watchlist webpart (to watch later)
  • That we need a search web part – this can be done in SharePoint, but would be good here to search at the site level

To note, that you can make videos play in Teams with the File Viewer web part, however the File Viewer does not help in terms of organizing the content. What I mean here is that file viewer could be used in multiple columns so every file plays in the Stream Player within Teams, however this would make it difficult, for example if you are organizing large numbers of your videos.

There is, of course, a lot more to discuss – but this was only ever looked at as a version 1. For example, the retention of the content, sensitivity labels, searching, managed properties, adding third party apps such as YouTube…but what I like with this is that I think in addition to the player, and the web app, we are also moving along with Portals too. Hopefully, we’ll see much more in the future.