There is so much video content available now days that can be used as a source of content for your web site (Internet or Intranet).

This article shows you how to create a SharePoint Publishing Layout page that supports authoring a web page with the following features:

We start by creating a new Content Type in the publishing site from the Site Actions>All Site Settings>Site content types
 

It is important that the new content type is based on the "Page" parent content type and that you save the new content type into the "Page Layout Content Types" group so that you will be able to find it in SharePoint Designer when it comes time to create a Layout Page.

We now have a basic publishing page content type with the standard publishing fields...

Select "Add from existing site columns" to add the following content fields:

• Byline
• Page Content
• Page Image

The Page Image field will be used to store the image that will be displayed in place of the media player until the user clicks on it.

Now we need to create a new field to hold the media file link. We use a plain text field so that either a http or mms link. Select "Add from new site column" to add the Video field and make it a type of "Single line of text".

Now we move to SharePoint Designer to create a Page Layout template from the New Menu...

"URL Name" is just the name of the template file that will be saved in the _catalogs/masterpage library.
"Title" is the text that will displayed next to the Content Type name when a user creates a page based on the Video content type (there can be multiple templates available for a content type).

We now have a page layout based on the default master page...

The Page Fields and Content Fields can now be dragged into the PlaceHolderMain area and any HTML/CSS formatting applied.

I have based my Video page on the layout provided by the ArticleLeft.aspx template with the following changes:

• Change the TD for the PublishingPageImage field to support an onclick event that will replace the image with the media player object

<td width="480" valign="top" onclick="videoCreate()">
<div id="Player">
<PublishingWebControls:RichImageField id="ImageField" FieldName="PublishingPageImage" runat="server"/>
</div>
</td>

• Add the Video field to the Edit Mode Panel

<PublishingWebControls:editmodepanel runat="server" id="editmodepanel1">
<SharePointWebControls:TextField FieldName="Video" runat="server"></SharePointWebControls:TextField>

• Add the following javascript after the </PublishingWebControls:editmodepanel> tag which will create the media player object when the user clicks on the image.

<script type="text/javascript">
function wmpCreate(url) {
var str = "";
var agt = navigator.userAgent.toLowerCase();
var is_ie = (agt.indexOf("msie") != -1);
if (is_ie) {
// create the WMP for IE
str = '<object id="contentPlayer" classid="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6" width="480" height="320">';
} else {
// create it for FF.
str = '<object id="contentPlayer" type="application/x-ms-wmp" data="'+url+'" width="480" height="320">';
}
str += '<param name="url" value=""/>';
str += '<param name="uiMode" value="full">';
str += '<param name="autoStart" value="-1" />';
str += '<param name="stretchToFit" value="-1" />'; str += '<param name="windowlessVideo" value="0" />';
str += '<param name="enabled" value="-1" />';
str += '<param name="enableContextMenu" value="-1" />';
str += '<param name="fullScreen" value="0" />';
str += '</object>';
return str;
}
function videoCreate() {
var VideoSource = '<SharePointWebControls:FieldValue runat="server" id="MediaURLValue" FieldName="Video"/>';
document.getElementById('Player').innerHTML = wmpCreate(VideoSource);
var wmp = document.getElementById 'contentPlayer');
wmp.URL = VideoSource;
wmp.controls.play();
}

(I found this media player script somewhere on the internet and have lost the reference but credit to who ever created it)

The <SharePointWebControls:FieldValue...> allows us to use the content of a field without the html formatting that would otherwise be applied by SharePoint. We could use this method to get other page parameters such as video size etc.

Our page layout template should now look something like this...

Now we can save the page, check it in and publish it (this can be a tedious process during development so I often disable approval and require checkout on the Master Page library in a development environment).

Now we must enable the Vide Page content type in the Pages library.

We can now create a new Video page.

To create the preview image for the page layout, go to _catalogs/masterpage/Forms/AllItems.aspx and edit the properties of page layout where you can enter the path to the preview image. This image should be saved in the _catalogs/masterpage/en-us/preview images folder.

View a demo of this page here http://templates.wssdemo.com/sites/wcm/Pages/imm.aspx

This page layout will only be available in the site collection in which it has been created in. You can turn this into a SharePoint Feature so that it can be activated in any site collection without having to go through these steps for each site collection. A good article on how to this can be found here...
http://weblogs.asp.net/jimjackson/archive/2007/11/05/create-a-new-page-layout-in-sharepoint-2007-feature-based.aspx