My blog is moving to our 1stQuad Website and this blog-post has been republished here.
While the standard SharePoint RichText/HTML field doesn’t allow the editor to add any custom code that shows objects such as for playing movies embedded in the content, there are many different approaches documented on the web how to achieve it by creating own webparts, using the Content Editor WebPart, adjusting the RichText-Editor, third party controls etc. I will add another approach that might be worth considering for some of you.
The scenario was the following: Content editors should be allowed to add movies of any given media type in a “standard way” in the standard SharePoint RichText/HTML editor. Every page will have a picture (for movies this is the preview-picture where the user/reader can click and will then see the movie) and a title, followed by the (text-)content. The editor should (by using the standard means) be able to set the URL of the preview image and the url of the movie, no matter which media type it is.
In order to allow this, I have prepared a “Reusable Content” HTML-Element called “Movie Block” that looks like this:
| <DIV style=”BORDER-BOTTOM: 1px solid; BORDER-LEFT: 1px solid; WIDTH: 100%; BORDER-TOP: 1px solid; BORDER-RIGHT: 1px solid” class=sc_movie> <DIV style=”WIDTH: 150px; FLOAT: left”><A class=sc_movieDisplayLink title=”" jQuery1246712582404=”2″><IMG style=”BORDER-BOTTOM: 0px solid; BORDER-LEFT: 0px solid; BORDER-TOP: 0px solid; BORDER-RIGHT: 0px solid” border=0 alt=”Click here to start the movie.”></A></DIV> <DIV style=”WIDTH: auto; DISPLAY: block; FLOAT: left”>Enter description here</DIV> <DIV style=”CLEAR: both” class=sc_moviePlayer></DIV></DIV> |
Now an editor can open a new publishing page with a RichText/HTML-Field and add the Reusable Content into it:
After adding the text-content, he should first set the preview image (i assume that it is in the Site Collection Images in my example). He simply clicks on the image and then on the “Image”-Button in the toolbar to choose the image:
The result will look like this:
Now he must point to the movie. This is achieved by simply clicking again on the image and then press the “Open a new window to edit Hyperlink”-Button:
Hint: have a look at this page to see how the URLs must be built to make the movies auto.start.
After publishing the page, it will look like this:
Clicking on the image will do the following:
By clicking on the “Close”-Link, the dynamic MovieViewer disappears.
Now how is this done? We are using a little bit of JQuery here. The JQuery Library is included in the MasterPage like this:
<SharePoint:ScriptLink language=”javascript” name=”jquery-1.3.2.js” Defer=”true” localizable=”false” runat=”server”/>
As you can see, I’ve deployed it directly in the “Layouts” folder in the 12-hive. For the JQuery script that actually executes our functionality, I’ve created another .js file which i’ve added as well to the MasterPage:
<SharePoint:ScriptLink language=”javascript” name=”sc_movies.js” Defer=”true” localizable=”false” runat=”server”/>
Now the content of this file looks like that:
| /* This javascript file contains different methods for playing a movie */// This Hashtable is used to store references to the link that has opened the movie player (see var moviesPlaying = {};// Attach to the click event of all links that should open the movie player $(document).ready(function() { $(“.sc_movieDisplayLink”).click(function() { var $movieLinkTarget = $(this).attr(“href”); // Parse the Link Target if ($isMovie) { // Make a copy of the original href // Create a new GUID to identify the link that caused the movie playing later // Fill the movie player on-the-fly var $moviePreviewImage = $(this).parents(“.sc_movie”).children(“.sc_movieDisplay”); // Hides the movie player // Returns a new GUID // Helper function to create a GUID |
As you can see, the script is pretty much straight forward and uses JQuery to find the necessary elements in the RichText. It is able to show the following types of movies:
- SWF
- WMF
- YouTube Movies
But by adding more extensions you can add any format you want.
Hope you like this approach how to embed movies in SharePoint pages in a “editor-suitable” way. No SharePoint components are tangled, only a small JavaScript does it all
.






