Hi there, Mihai Coman here. I’m a new Program Manager on the SharePoint Designer team.
Over the last couple of weeks you’ve gotten a better idea of some of the new capabilities of SharePoint Designer. There’s a ton of new features and UI components to play with, from Content Type workflows to XLV to summary pages . But if you’re like me, you’re probably itching to get your hands dirty and see how everything fits together. What better way to scratch that itch than with a practical project?
So why would you want to be able to include videos in your blog posts? Perhaps you found a great music video online that you want to share with your readers. Or perhaps you want your readers to see you playing an acoustic version of that same song. Better yet, perhaps you want your readers to play the two videos side by side so they can see that you’ve hit the notes dead on. You’ll obviously need a place to upload videos and a way to specify what video(s) you want and where you want them to play in each blog entry. Here’s how it might work:
It’s very simple. First, you click the new “Upload a Video” button in the Blog Tools pane on the upper right side of the main page (see above screenshot). After uploading your videos, you click “Manage Videos,” copy the addresses of the newly uploaded videos and include them anywhere in your blog post using the tag <BLOGVIDEO: video URL> . When you publish your entry, the videos show up in the right places throughout your entry.
Let’s get started!
Setting up the Asset Library
First things first. Our solution builds on top of SharePoint’s built-in Blog template so we’ll need to start with that. Create a new sub-site using the Blog template and name it whatever you want. I named mine “Mihai’s Video Blog.” I assume you won’t need instructions for this part – if you do, use the experience as a chance to get acquainted with SharePoint’s new browser interface.
Now we’re going to need a place to store the videos that we use. A new kind of document library called an Asset Library is going to provide that storage. Open up your site in SPD, click on Lists and Libraries in the Navigation pane, and from the Document Library button in the Ribbon, choose Asset Library (Figure 1). Name your new library “Videos.”
In the summary window for the Videos library, remove the Audio, Image, and Folder content types by highlighting each and pressing the “Delete” key (Figure 2). Now, in the same window, click “Edit List Columns.” Delete most of the fields listed so that you’re left with a listing similar to that of Figure 3.
The All-Important createMediaPlayer Method
Now for an aside. If you learn anything from today’s blog entry, I hope it’s this. This method of the Media Web Part does the bulk of the heavy lifting in the remainder of our project.
If ever you want to insert a Media Player into any section of a SharePoint page, you simply include this script anywhere on the page with the appropriate videoHolder and videoURL parameters. VideoHolder should be a reference to the page element that will hold the player (any div, for instance), and videoURL should be an absolute or relative URL to a video.
- Dynamically set what file the Media Player loads (based perhaps on page parameters and content)
- Automatically create additional media player web parts like, say, one for every place where you want to include a video in your blog post.
We’ll need to have both of these abilities for our video blog. Keep reading to see how we do it.
Back to work. Our storage solution is set but we’ll need some way of displaying uploaded videos in our blog entries. We’ll also need a quick way of uploading videos so that we’re not forced to navigate to SharePoint’s “All Site Content” section every time.
In Code View, scroll to the very bottom of the page and insert the following lines of code right above the final </html> statement. Figure 5 shows you exactly where. Then hit Save and click “yes” when you are prompted whether you want to modify the page from the site definition. All this means is that SharePoint will store the Master Page somewhere else under the hood.
That’s it! You’re actually done. When you browse to your blog now, you should be able to click the new “Upload Video” link in the Blog Tools pane to upload each video you want. After they’re uploaded, you’ll click “Manage Videos,” copy the appropriate URLs and paste them anywhere in your blog entries by using the <BLOGVIDEO: Video URL Here> tag. Your new blog entries will show up with the appropriate videos in place of these tags.
How Does It Work?
You didn’t think I would just leave you wondering how it all worked, did you? Of course not. Before wrapping up, I’ll explain how the insertVideos function inside videoBlog.js does its magic. Below is some code from videoBlog.js and an explanation.
I admit, it’s a little more intimidating. But don’t worry, it’s easy to understand. I’ve split the code into three sections in the screenshot above, each of which is explained below.
2. getHolderCode’s job in this process is to increment the vidIndex global variable (thus setting X in “videoHolderX” to a unique value) and to associate this index value with the parsed URL of the video by storing the two in the global variables vidIndices and vidURLs. You’ll notice on line 23 that the argument “matched” is passed in. Each time getHolderCode is called, this argument holds a match of the form <BLOGVIDEO: some URL>. The next two lines parse the match again to get the URL within, accounting for the fact that SharePoint saves working URLs as links, making it necessary for us to also find strings of the form <BLOGVIDEO:<A href=”someURL”… >…>. Each line makes use of the RegExp object’s lastParen property, which extracts the last sub-expression in parentheses from the match (in our case, the URL we need). The next few lines save the extracted videoURL and the associated ID, and return the “incremented” replacing text.
3. Once every <BLOGVIDEO> tag on the page has been replaced with a <div id=’videoHolderX’> element and the changes have been saved to the page (line 12), the function loops through every video, passing its URL and a reference to the matching video holder div to a function that further passes them to the createMediaPlayer method (which I covered at the beginning of this entry).
And that’s how you convert your regular old blog into a video blog. I won’t get into how I modified the Blog Tool links, tweaks for non-IE browsers, or more efficient (but messier) parsing methods. Feel free to discuss these or ask specific questions. For the time being, enjoy your video blog and, until next time, have fun playing with SharePoint Designer!