Introduction
In previous post we have discussed approach on how to embed video into SharePoint from YouTube. Custom List Video Links were used for storing embedded video properties and Computed Field for rendering Video player.
This time we will extend our solution with the following capabilities:
- Support for different video providers listed in oEmbed
- Preview view for displaying video arranged in list
- Alternative mode for posting the embed code for video into SharePoint
Support for different video providers
In addition to embed code using iframe, another options also available now. Some providers listed in oEmbed specification use object element for embedding code.
Table 1. Support for Video Providers listed in oEmbed specification
| Provider Name | Embedded Mode |
|---|---|
| YouTube | IFrame, Object(YouTube) |
| Viddler | – |
| Qik | Object(Qik) |
| Revision3 | IFrame |
| Hulu | IFrame |
| Vimeo | IFrame |
| CollegeHumor | Object(CollegeHumor) |
| Jest | Object(Jest) |
| CircuitLab | – |
Alternative mode for posting embedded code
Additionally to existing mode for embedding video code, the approach described below allows to paste the embed code as it was generated by Provider. Let’s take a look at the common usage scenario:
- Generate and copy the embed code on the Provider website
- Select Embed Code from New Item for Video Links List
- In New Form for Video Links List paste the embed code and fill in comments if needed as shown below
For displaying video player the same (see previous post for details) Computed Field EmbeddedVideoOnForm field is used
Preview view for displaying video
In addition to default view (video player items with details), Preview view is intended to display items arranged by columns as shown below
Implementation
To paste the embed code we define Embed Code Content Type
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
| <?xml version="1.0" encoding="utf-8"?> | |
| <Elements xmlns="http://schemas.microsoft.com/sharepoint/"> | |
| <!– Parent ContentType: Link (0x0105) –> | |
| <ContentType ID="0x010503" | |
| Name="Embed Code" | |
| Group="$Resources:List_Content_Types" | |
| Description="Embed Code Content Type" | |
| Inherits="FALSE" | |
| Version="0"> | |
| <FieldRefs> | |
| <FieldRef ID="{c29e077d-f466-4d8e-8bbe-72b66c5f205c}" Name="URL" Required="FALSE" Hidden="TRUE"/> | |
| <FieldRef ID="{9F79BBE2-19A3-4341-96F6-BFDC024DEAB3}" Name="EmbedCode" Required="TRUE" /> | |
| </FieldRefs> | |
| </ContentType> | |
| </Elements> |
where field EmbedCode for storing the embed code is used
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
| <Field ID="{9F79BBE2-19A3-4341-96F6-BFDC024DEAB3}" | |
| Name="EmbedCode" | |
| SourceID="http://schemas.microsoft.com/sharepoint/v3" | |
| StaticName="EmbedCode" | |
| Group="Media Columns" | |
| Type="Note" | |
| DisplayName="Embed Code" | |
| Hidden="FALSE" | |
| Sortable="FALSE"> | |
| </Field> |
As was noted earlier, for displaying video player the same (see previous post for details) Computed Field EmbeddedVideoOnForm field is used, below is presented complete XSLT style sheet for rendering of a field on a List View
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" | |
| xmlns:d="http://schemas.microsoft.com/sharepoint/dsp" | |
| version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" | |
| xmlns:ddwrt="http://schemas.microsoft.com/WebParts/v2/DataView/runtime" | |
| xmlns:asp="http://schemas.microsoft.com/ASPNET/20" | |
| xmlns:__designer="http://schemas.microsoft.com/WebParts/v2/DataView/designer" | |
| xmlns:xsl="http://www.w3.org/1999/XSL/Transform" | |
| xmlns:msxsl="urn:schemas-microsoft-com:xslt" | |
| xmlns:SharePoint="Microsoft.SharePoint.WebControls" | |
| xmlns:ddwrt2="urn:frontpage:internal"> | |
| <xsl:template name ="RenderEmbeddedPlayer" match ="FieldRef[@Name='EmbeddedVideoOnForm']" mode="Computed_body" > | |
| <xsl:param name="thisNode" select="."/> | |
| <xsl:variable name="width"> | |
| <xsl:call-template name="ensureVideoPlayerSize"> | |
| <xsl:with-param name="videoSize" select="$thisNode/@VideoWidth"/> | |
| <xsl:with-param name="defaultSize" select="560"/> | |
| </xsl:call-template> | |
| </xsl:variable> | |
| <xsl:variable name="height"> | |
| <xsl:call-template name="ensureVideoPlayerSize"> | |
| <xsl:with-param name="videoSize" select="$thisNode/@VideoHeight"/> | |
| <xsl:with-param name="defaultSize" select="315"/> | |
| </xsl:call-template> | |
| </xsl:variable> | |
| <xsl:variable name="frameborder"> | |
| <xsl:value-of select="$thisNode/@FrameBorder"/> | |
| </xsl:variable> | |
| <xsl:variable name="src"> | |
| <xsl:value-of select="$thisNode/@URL"/> | |
| </xsl:variable> | |
| <xsl:choose> | |
| <xsl:when test="$thisNode/@EmbeddingMode ='IFrame'"> | |
| <iframe width="{$width}" height="{$height}" src="{$src}" frameborder="{$frameborder}" allowfullscreen=""></iframe> | |
| </xsl:when> | |
| <xsl:when test="$thisNode/@EmbeddingMode ='Object(YouTube)'"> | |
| <object width="{$width}" height="{$height}"> | |
| <param name="movie" value="{$src}"></param> | |
| <param name="allowFullScreen" value="true"></param> | |
| <param name="allowscriptaccess" value="always"></param> | |
| <embed src="{$src}" type="application/x-shockwave-flash" width="{$width}" height="{$height}" allowscriptaccess="always" allowfullscreen="true"></embed> | |
| </object> | |
| </xsl:when> | |
| <xsl:when test="$thisNode/@EmbeddingMode ='Object(Qik)'"> | |
| <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,115,0" width="{$width}" height="{$height}" align="middle"> | |
| <param name="allowScriptAccess" value="sameDomain" /> | |
| <param name="allowFullScreen" value="true" /> | |
| <param name="movie" value="{$src}" /> | |
| <param name="quality" value="high" /> | |
| <param name="bgcolor" value="#000000" /> | |
| <param name="FlashVars" value="streamID=9d0242b2912a444e84a31c2ca3249268&autoplay=false" /> | |
| <embed src="{$src}" quality="high" bgcolor="#000000" width="{$width}" height="{$height}" name="qikPlayer" align="middle" allowScriptAccess="sameDomain" allowFullScreen="true" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" FlashVars="streamID=9d0242b2912a444e84a31c2ca3249268&autoplay=false"></embed> | |
| </object> | |
| </xsl:when> | |
| <xsl:when test="$thisNode/@EmbeddingMode ='Object(CollegeHumor)'"> | |
| <object type="application/x-shockwave-flash" data="{$src}" width="{$width}" height="{$height}"> | |
| <param name="allowfullscreen" value="true"/> | |
| <param name="wmode" value="transparent"/> | |
| <param name="allowScriptAccess" value="always"/> | |
| <param name="movie" quality="best" value="{$src}"/> | |
| <embed src="{$src}" type="application/x-shockwave-flash" wmode="transparent" width="{$width}" height="{$height}" allowScriptAccess="always"></embed> | |
| </object> | |
| </xsl:when> | |
| <xsl:when test="$thisNode/@EmbeddingMode ='Object(Jest)'"> | |
| <object type="application/x-shockwave-flash" data="{$src}" width="{$width}" height="{$height}"> | |
| <param name="allowfullscreen" value="true"/> | |
| <param name="wmode" value="transparent"/> | |
| <param name="allowScriptAccess" value="always"/> | |
| <param name="movie" quality="best" value="{$src}"/> | |
| <embed src="{$src}" type="application/x-shockwave-flash" wmode="transparent" width="{$width}" height="{$height}" allowScriptAccess="always"></embed> | |
| </object> | |
| </xsl:when> | |
| <xsl:otherwise> | |
| <xsl:call-template name="renderEmbeddedCodeAsHtml"> | |
| <xsl:with-param name="embedId" select="$thisNode/@ID" /> | |
| <xsl:with-param name="embeddedCode" select="$thisNode/@EmbedCode" /> | |
| </xsl:call-template> | |
| </xsl:otherwise> | |
| </xsl:choose> | |
| </xsl:template> | |
| <xsl:template match ="FieldRef[@Name='EmbedCode']" ddwrt:dvt_mode="body" mode="Note_body"> | |
| <xsl:param name="thisNode" select="."/> | |
| <div class="videolink-embedcode"> | |
| <xsl:value-of select="$thisNode/@EmbedCode" disable-output-escaping="yes" /> | |
| </div> | |
| </xsl:template> | |
| <xsl:template name="ensureVideoPlayerSize"> | |
| <xsl:param name="videoSize"/> | |
| <xsl:param name="defaultSize"/> | |
| <xsl:choose> | |
| <xsl:when test="$videoSize > 0"> | |
| <xsl:value-of select="$videoSize"/> | |
| </xsl:when> | |
| <xsl:otherwise> | |
| <xsl:value-of select="$defaultSize"/> | |
| </xsl:otherwise> | |
| </xsl:choose> | |
| </xsl:template> | |
| <xsl:template name="renderEmbeddedCodeAsHtml"> | |
| <xsl:param name="embedId"/> | |
| <xsl:param name="embeddedCode"/> | |
| <xsl:variable name="embeddedCodeUrl"> | |
| <xsl:value-of select="substring-before(substring-after($embeddedCode,'>'),'</a>')"/> | |
| </xsl:variable> | |
| <xsl:variable name="embeddedCodeFixed"> | |
| <xsl:value-of select="substring-before($embeddedCode,'<a')"/> | |
| <xsl:value-of select="$embeddedCodeUrl" /> | |
| <xsl:value-of select="substring-after($embeddedCode,'</a>')"/> | |
| </xsl:variable> | |
| <xsl:variable name="embeddedCodeHtml"> | |
| <xsl:value-of select="$embeddedCodeFixed" disable-output-escaping="yes" /> | |
| </xsl:variable> | |
| <div id="embeddedPlayerContainer{$embedId}"> | |
| </div> | |
| <!–<xsl:value-of select="$embeddedCodeHtml" />–> | |
| <script type="text/javascript"> | |
| var playerHost = 'embeddedPlayerContainer<xsl:value-of select="$embedId" />'; | |
| var player = '<xsl:value-of select="$embeddedCodeFixed" />'; | |
| <![CDATA[ | |
| player = player.replace(/"/g, "'").replace(/</g, "<").replace(/>/g, ">"); | |
| document.getElementById(playerHost).innerHTML = player; | |
| ]]> | |
| </script> | |
| </xsl:template> | |
| </xsl:stylesheet> |
References
- Video Links project on GitHub
- oEmbed format specification
YASP Blog 
Pingback: Embedding and Sharing Video in SharePoint. Part Three: Aggregating Video Feeds and utilizing API | vgrem's Blog
Hi Vadim,
Your solution is fantasctic. It works very well for me. Thank you very much.
However, I need to embed videos in sharepoint online! As you may know it is not possible ot deply farm solutions in sharepoint online (only sandboxed solutions are supported). I was trying to create a sandboxed solution and use your code inside but I was not successful.
Do you have sandboxed version of you solution?
Thank you again.
Hi Milad,
I’m glad to know that 🙂
Regarding sandboxed solution, unfortunately i don’t have it.
But I will verify that it works as sandbox solution and let you know then.
Vadim
Hi Vadim,
Do you have a compiled solution available for download? I’d love to try but don’t have the right version of Visual Studio handy..
Cheers
James
Pingback: Embedding Video to a SharePoint Library | Yet Another SharePoint Blog
Hi Vadim,
I’d love to try this out but don’t have Visual Studio handy – do you have a compiled solution available to download? (I promise I won’t bug you for support 🙂 )
This would probably be a far more popular and useful project if you got rid of the horrible XSLT and server-side processing. Convert to a JSTemplate or a simple Site Page with a little JavaScript on it and it should work Online or anywhere else.