Introduction
Previous two posts were devoted to discussion of how to integrate video from YouTube and another Video Providers into SharePoint. In the first post we have discussed how to store embedded video properties and render YouTube player using Computed Field. In the second one we have discussed how to store embed code itself as it was generated by Provider.
This time we will discuss at how you can aggregate video from RSS/Atom Feeds and provide some information about using API for retrieving video content from Video Providers.
Aggregating from Video Providers RSS/Atom Feeds using YouTube
When you retrieve a video feed or list of search results, YouTube returns an Atom feed. Below is presented description of how to display videos from YouTube Feed, in our case we will display results from YouTube channel only.
For retrieving video content and displaying results YouTube Viewer web part will be used here. In fact, it is just RSSAggregator web part, but with custom XSLT style sheet for processing YouTube feed, for details see implementation section.
So, let’s see how to add video from YouTube feed on page:
- Add YouTube Viewer web part which located under category Media Extensions on page
- Specify FeedUrl for YouTube channel, for example to display video feed from Critical Path Training specify value as shown on picture
- Result page with YouTube web part configured is shown below
Utilizing Video Providers API
Another option to retrieve YouTube content is to use .NET or JavaScript client libraries directly in SharePoint.
The table below represents summary information about API for commonly used Video Providers listed in oEmbed.
Table 1. API support for Video Providers.
Provider Name | API | Description |
---|---|---|
YouTube | Data API, Google Data client libraries for use the YouTube Data API (Java, .NET, PHP, Python, Objective-C, JavaScript) | |
Viddler | Viddler API | |
Qik | Qik API, client for JavaScript | |
Vimeo | Vimeo APIs |
And for displaying it we need some logic to be implemented, for example by creating custom web part. Implementation details for this functionality are omitted here.
Implementation
For aggregating and rendering YouTube Feeds RSSAggregator web part is used as was noted earlier with custom XSLT style sheet for processing YouTube Video Feeds.
To render YouTube feeds we provide custom XSLT style sheet by specifying XslLink property
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<property name="XslLink" type="string">/_layouts/XSL/YouTubeVideoFeed.xsl</property> |
and the following XSLT style sheet
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<xsl:stylesheet xmlns:x="http://www.w3.org/2001/XMLSchema" | |
version="1.0" exclude-result-prefixes="xsl ddwrt msxsl rssaggwrt" | |
xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" | |
xmlns:rssaggwrt="http://schemas.microsoft.com/WebParts/v3/rssagg/runtime" | |
xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt" | |
xmlns:rssFeed="urn:schemas-microsoft-com:sharepoint:RSSAggregatorWebPart" | |
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" | |
xmlns:rss1="http://purl.org/rss/1.0/" xmlns:atom="http://www.w3.org/2005/Atom" | |
xmlns:itunes="http://www.itunes.com/dtds/podcast-1.0.dtd" | |
xmlns:atom2="http://purl.org/atom/ns#" xmlns:ddwrt2="urn:frontpage:internal" | |
xmlns:media="http://search.yahoo.com/mrss/" | |
xmlns:yt="http://gdata.youtube.com/schemas/2007"> | |
<xsl:param name="rss_FeedLimit">3</xsl:param> | |
<xsl:param name="rss_ExpandFeed">false</xsl:param> | |
<xsl:param name="rss_LCID">1033</xsl:param> | |
<xsl:param name="rss_WebPartID">RSS_Viewer_WebPart</xsl:param> | |
<xsl:param name="rss_alignValue">left</xsl:param> | |
<xsl:param name="rss_IsDesignMode">True</xsl:param> | |
<xsl:template match="atom:feed"> | |
<link rel="stylesheet" Type="text/css" href="/_layouts/MediaExtensions/VideoLinks.css"/> | |
<xsl:call-template name="ATOMYouTubeTemplate"/> | |
</xsl:template> | |
<xsl:template name="ATOMYouTubeTemplate" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"> | |
<xsl:variable name="Rows" select="atom:entry"/> | |
<xsl:variable name="RowCount" select="count($Rows)"/> | |
<div class="channel-browse" > | |
<div class="channels-browse-gutter-padding" > | |
<ul class="channels-browse-content-grid context-data-container "> | |
<xsl:call-template name="ATOMYouTubeTemplate.body"> | |
<xsl:with-param name="Rows" select="$Rows"/> | |
<xsl:with-param name="RowCount" select="count($Rows)"/> | |
</xsl:call-template> | |
</ul> | |
</div> | |
</div> | |
</xsl:template> | |
<xsl:template name="ATOMYouTubeTemplate.body" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"> | |
<xsl:param name="Rows"/> | |
<xsl:param name="RowCount"/> | |
<xsl:for-each select="$Rows"> | |
<xsl:variable name="CurPosition" select="position()" /> | |
<xsl:variable name="RssFeedLink" select="$rss_WebPartID" /> | |
<xsl:variable name="CurrentElement" select="concat($RssFeedLink,$CurPosition)" /> | |
<xsl:if test="($CurPosition <= $rss_FeedLimit)"> | |
<li class="channels-content-item"> | |
<xsl:call-template name="ATOMYouTubeTemplate.contentitem"> | |
<xsl:with-param name="CurrentElement" select="$CurrentElement"/> | |
</xsl:call-template> | |
</li> | |
</xsl:if> | |
</xsl:for-each> | |
</xsl:template> | |
<xsl:template name="ATOMYouTubeTemplate.contentitem" xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" xmlns:xsl="http://www.w3.org/1999/XSL/Transform" xmlns:msxsl="urn:schemas-microsoft-com:xslt"> | |
<xsl:param name="CurrentElement"/> | |
<span class="context-data-item"> | |
<a onclick="javascript:window.open(this.href, 'YouTube', 'height=600,width=800,resizable');return false;" href="{ddwrt:EnsureAllowedProtocol(string(atom:link/@href))}" class="ux-thumb-wrap" > | |
<span class="video-thumb"> | |
<span class="yt-thumb-clip"> | |
<span class="yt-thumb-clip-inner"> | |
<xsl:variable name="ThumbnailUrl" select="media:group/media:thumbnail[@width='120']/@url"> | |
</xsl:variable> | |
<img src="{$ThumbnailUrl}" alt="Thumbnail" width="194" /> | |
<span class="vertical-align"></span> | |
</span> | |
</span> | |
</span> | |
<span class="video-time"> | |
<xsl:value-of select="media:group/yt:duration/@seconds" /> sec | |
</span> | |
</a> | |
<!–<a href="{ddwrt:EnsureAllowedProtocol(string(atom:link/@href))}" title="{string(atom:title)}" class="content-item-title spf-link" dir="ltr">–> | |
<a onclick="javascript:window.open(this.href, 'YouTube', 'height=600,width=800,resizable');return false;" href="{ddwrt:EnsureAllowedProtocol(string(atom:link/@href))}" title="{string(atom:title)}" class="content-item-title spf-link" dir="ltr"> | |
<xsl:call-template name="GetSafeHtml"> | |
<xsl:with-param name="Html" select="substring(atom:title, 1, 28)"/> | |
</xsl:call-template>… | |
</a> | |
<span class="content-item-detail"> | |
<span class="content-item-view-count"> | |
<xsl:value-of select="yt:statistics/@viewCount" /> views | |
</span> | |
<span class="metadata-separator">|</span> | |
<span class="content-item-time-created"> | |
<xsl:value-of select="ddwrt:FormatDate(atom:published, 2057, 3)"/> | |
</span> | |
</span> | |
</span> | |
</xsl:template> | |
<xsl:template name="GetSafeHtml"> | |
<xsl:param name="Html"/> | |
<xsl:choose> | |
<xsl:when test="$rss_IsDesignMode = 'True'"> | |
<xsl:value-of select="$Html"/> | |
</xsl:when> | |
<xsl:otherwise> | |
<xsl:value-of select="rssaggwrt:MakeSafe($Html)"/> | |
</xsl:otherwise> | |
</xsl:choose> | |
</xsl:template> | |
</xsl:stylesheet> |
References
- Video Links project that contains YouTube Viewer web part is hosted on GitHub
- oEmbed format specification
- Embedding and Sharing Video in SharePoint
- Embedding and Sharing Video in SharePoint. Part Two: Posting embedded code, support for different Video Providers, Preview view