Integrate Your Office 365 Video Portal with SharePoint Online

One of the cool features of Office 365 is the Video Portal. Using the Video Portal you can create different channels, upload your videos (almost any format) and Office 365 will process those videos and allow you to stream them without forcing your users to download them or wait forever for them to start playing. Whether you want to store training videos, messages from your CEO, marketing materials, or bootleg movies the Office 365 Video Portal makes it easy for users to view your videos.

The problem is that if you are in SharePoint and want to view a video in your video portal, you either need to send the user to the video portal (which does not carry over your SharePoint branding or navigation) or embed the video in your SharePoint site (which is a manual process and must be done for every video in the portal).

There’s got to be a better way!

Let’s face it, it’s not the greatest user experience to leave SharePoint to view a video and it’s not feasible to embed videos in SharePoint if you have videos that will be added/changed regularly. What is an organization to do?

REST to the rescue

Luckily, the Video Portal has an easy to use REST interface AND it’s actually documented pretty well (yes… seriously). What’s more, it works within the context of the user currently logged in to the SharePoint Online site so there’s no Client ID’s or Azure AD stuff to mess with.

Video REST API Interface

Here’s the REST queries I used for the functionality in the script in this  post:

• Get the URL of the tenant’s video portal:  GET {RootSite}/_api/VideoService.Discover
• Get a list of the channels a user can view: GET {VideoPortalURL}/_api/VideoService/Channels
• Get a list of videos for a chennel: GET {VideoPortalURL}/_api/VideoService/Channels(‘{channelId}’)/Videos

It turns out using this Video Portal REST API and some jQuery goodness we can give the users a really nice experience in SharePoint Online to where they never have to go to the video portal. Throw in a couple free third party libraries (Masonry and Flip.js) and the video portal comes to life in SharePoint.

Enough already, what’s this script you speak of?

So, there’s quite a bit going on with this script, and I’m not going to walk you through all of it. II  will break down the flow for you though so you can understand what the script does.

When the script executes it locates your tenant’s Video Portal and finds all the channels for your Video Portal that the current user can view.  These channels are displayed to the user. When the user clicks on the name of the channel, the script gets information about all the videos in that specified channel and displays thumbnails of all those videos using the Masonry library. It also uses the flip.js library so that when a user moves their mouse over a thumbnail, the thumbnail will flip around and give more details about the video.  There is also a “filter” search box where a user can type in the name of the video they are looking for and the thumbnails are filtered. Finally, when a user clicks on the thumbnail, a dialog pops up and plays the video.

All of this happens from within a page in your SharePoint environment.  Below are all the script references you’ll need:

<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//www.markrackley.net/scripts/PAITGroup.VideoPortal.js"></script>
<script type="text/javascript" src="//markrackley.net/scripts/masonry.pkgd.min.js" ></script>
<script src="//cdn.rawgit.com/nnattawat/flip/master/dist/jquery.flip.min.js"></script>
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.min.css">
<link rel="stylesheet" href="//appsforoffice.microsoft.com/fabric/1.0/fabric.components.min.css">
<link rel="stylesheet" href="//www.markrackley.net/scripts/PAITGroup.VideoPortal.css">

How can I learn to write scripts like this?

If you are interested in learning HOW to write scripts to create this sort of functionality on your own, you can attend one of my upcoming workshops on client side development in SharePoint:

Can we see the script in action?

Why sure, thanks for asking. Below is a video showing you the Video Portal Script in action and how you can implement it in your SharePoint environment:

I’ve also customized this solution to have the videos play above the thumbnails without having a dialog box, and to play videos in a rotator. You can do things like auto-play the newest video or the video with the most views. There’s just a lot of little tweaks that can be made to this to change how it looks and acts.

Interested in Customizations?

This solution, and other solutions offered on this site are provided “as-is” and without warranties. Do you have any questions about this solution? Is this solution almost what you need, but not quite? Would you like some sort of support around one of PAIT Group’s solutions?   Reach out at [email protected] and we’d be happy to discuss how we can customize this or one of our other solutions to meet your exact needs or to support one of our solutions.

Families in Germany who are facing divers health problem, such persons can buy drugs from the Web without prescription. With the market flooded with divers web-sites selling sundry medicaments, purchasing medicines from th WEB is no longer a trouble for common man. Certain medications are used to treat infections caused by dental abscesses. Of course it isn’t all. If you’re concerned about erectile health problem, you probably know about Xenical and Hoodia. Probably each adult knows about Garcinia. (Read more PhentermineXenical). The symptoms of sexual soundness problems in men include improbability to have an erection sufficient for sexual functioning. Certain medications may add to sex drive difficulties, so its substantial to cooperate with your health care professional so that the prescription can be tailored to your needs. Preparatory to capture Levitra or other cure, speak to your pharmacist if you have any allergies. Talk to your health care purveyor for more details. Preparatory to ordering this remedy, tell your physician if you are allergic to anything.