-
Upcoming
Live Online Workshops- SharePoint Charts and Graphs: Part 01 (Google and Yahoo APIs)
- SharePoint Charts and Graphs: Part 02 (Sparklines)
- SharePoint Charts and Graphs: Part 03 (Gantt Charts)
- Create a Master Calendar in SharePoint
- jQuery Animations in SharePoint
- SharePoint WSS Dashboards: No Code Required
- Become Your Company's SharePoint SuperStar!
-
Ongoing Series
-
Authors
-
SharePoint Resources
- Bits of SharePoint
- Codeless Solutions for SharePoint
- Get the Point
- Innovation Matters
- Laura Rogers
- Path to SharePoint
- Paul Galvin
- SharePoint 911
- SharePoint Blank
- SharePoint Blogs at SharePointU
- SharePoint Forums at SharePointU
- SharePoint Screencasts
- SharePoint Use Cases
- Social Media Talk Tweets
- The Sanity Point
- The Weekly Newsletter
| Weekly Newsletter Signup |
Nov
4
Create a SharePoint Multi-Media Resource Center – Part 02
I’m going to continue from yesterday’s overview for creating a Multi-Media Resource Center in SharePoint with a drilldown of how I created a customized list to handle the display of external video content. The problem we are trying to resolve is how to manage access to external video content that is not stored in SharePoint.
Create the “Click to Play” Button and Dynamically Link it to a Video
The customized list for the external videos contains a set of columns, one of which is the “Click to View Column”. This is a calculated column that takes the “title” field and concatenates it with a call to LyteBox to create a dynamically generated hyperlink. The link then acts as a wrapper around the “Play” button. When a user clicks on the “Play” button, LyteBox fires off and displays the video in an opaque screen over the original list window.
If we were to use the calculated column as it is designed, this is what would be displayed in the “Click to Play” column:
What is needed is some kind of way to transform the text displayed as HTML, into real HTML that can be rendered in the browser. That’s where Christophe Humbert’s HTMLCalColumn CEWP comes in. By dropping the HTMLCalColumn web part on the page, it renders all of the text as displayable HTML.
Christophe’s web part is a small javascript that looks for specific markers within a calculated column and encodes the content as HTML. He has an extensive series of examples on his site, along with downloadable code.
That will activate the Play button, but as it stands, the video screen will refresh the browser and display the video. The End User would have to know to click the browser Back button in order to get back to the video library display in SharePoint. A better way is to use LyteBox to open an opaque window on top of the original list or library. When the viewing of the video is complete, the End User closes the LyteBox window to display the original list of available videos.
Display Content in LyteBox
LyteBox is a free javascript library that can be used to open transparent/opaque chromeless windows on top of existing content. In my SharePoint environment, I have setup a library at the top of the site collection to hold the LyteBox resources and made the library Read Only for all users within the site collection. Any page within the site collection has access to the library.
On each page that requires the use of LyteBox, I embed a Content Editor Web Part that places a call to the LyteBox library. When a link is wrapped in the call to LyteBox, the script is fired off and the opaque window opens, displaying content being pointed to. In our case, the content is an HTML page with a video embedded in it. The Content Editor Web Part holding the call to LyteBox is set to “Hidden” so that it is never displayed on the page.
Conclusion
The call to an external video resource can be made transparent to the End User by use of LyteBox. The user accesses the video listings in SharePoint and by clicking on a dynamically generated link, views a video in an overlay window.
Tomorrow, we’ll take a look at how to create a local library in SharePoint that displays screencasts that are created by in-house staff for training purposes.
Live Online Workshop: Create a SharePoint Multi-Media Resource Center
If you like what see here, I will be presenting a live online workshop this Friday where I’ll give you all the the techniques, resources and web parts needed to get this solution up and running in your SharePoint environement. I look forward to seeing you there.
Mark
Articles in this series
- Create a SharePoint Multi-Media Resource Center – Part 04 (Free Screencast)
- Create a SharePoint Multi-Media Resource Center – Part 03
- Create a SharePoint Multi-Media Resource Center - Part 02
- Create a SharePoint Multi-Media Resource Center - Part 01
[...] I did a high level overview of the solution and a walkthrough of how to create a custom list to access external videos for display in LyteBox. Today I’ll walk through how to configure a document library so that it can be used as a [...]