Bring Office 365 Video to Sites with Search
We’re getting back to our search roots with this blog post!
Recently, as part of a customer proof-of-concept, I configured the content by search web part in a SharePoint Online publishing site to consume and display content from Office 365 Video.
Office Video is a really cool video platform available in Office 365 that allows users to publish videos, organize them within channels and share them across an organization. To get the most out of that service, it is important for users to be able to consume videos from outside that portal. In July (2015), the product team started rolling out the ability to embed Office 365 Video outside of the portal. This means that we can use that content to provide richer experiences in other SharePoint (and beyond) applications, including intranet portals, team sites, etc.
Naturally, I immediately started thinking about how I could surface videos through search and then use the video embed to display them on a SharePoint site page. The content by search web part is a natural fit here because I can provide a dynamic query and also customize the display of the results.
It is worth noting that Office 365 Video has its own API but this does not provide a search capability.
Configure CBS Query
The first step was to define the query. For that, I had to inspect some of the Office Video items in search results so I did some targeted queries using the SharePoint Search Query Tool. In my environment, I discovered that SharePoint online was classifying these videos as contentclass: sts_listitem_851. I also discovered the pattern for the path to the various site collections that represent the channels in Office Video: https://tenantname.sharepoint.com/portals/channel-name
Ultimately, my query in the CBS looked like the following:
contentclass: sts_listitem_851 path:{\Site.Url\”"}/../../portals/Executive-Briefing
where “Executive-Briefing” was the name of my channel. I could have removed “/Executive-Briefing” to search across all videos across the service.
Configure Display Template Managed Properties
In addition to the standard properties I need to display, like title and description, I also wanted to grab some media-specific properties as well as a few properties that would allow me to dynamically build the embed link. Below is a mapping of logical property to the property name in search:
- Video Id: UniqueId
- Site Id (channel id): SiteId
- Thumbnail Url: PictureThumbnailUrl
- Video duration: MediaDuration
Build Video Elements of Display Template
With the right query and the right properties, I composed my display template so each video result had the title, thumbnail and video duration. Using the Foundations Responsive Framework, I created modal popups that actually played the video.
Because I didn’t want to make a call to the actual video API to get the embed code, I built the embed code dynamically:
var videoEmbedUrl = “portals/hub/_layouts/15/VideoEmbedHost.aspx?chId=” + SiteId+ “&vidId=” + UniqueId + “&width=640&height=360&autoPlay=false&showInfo=true”
Keep in mind, the format of the embed URL is not officially documented so it could change. Ideally, the Office Video team would include this as one of the properties returned in search.
Other Ideas…
- Consider combining the above search with Graph Query Language to leverage the power of the Office Graph to return the most relevant video to the specific user