Friday, December 18, 2009

Using the Built-in Silverlight Media Player of SharePoint 2010


SharePoint 2010 has a simple but extensible Silverlight Media Player built in which we leveraged on the sharepoint2010.microsoft.com site for the Videos section.

2010 Media Player 

Here is the JavaScript code to use this media player :

<script type="text/javascript" src="/_layouts/mediaplayer.js"></script>
<script type="text/javascript">
_spBodyOnLoadFunctionNames.push('mediaPlayer.createOverlayPlayer');
mediaPlayer.attachToMediaLinks
(
(document.getElementById(
'<<DIV ID HERE>>')),
['wmv', 'avi', 'mp3']
);
</script>

Firstly we need to include the ‘mediaplayer.js’ file which essentially has all the API’s to work with the Silverlight media player and also does the integration with the HTML elements on the page.


Now in the background the media player script creates a transparent div on the page and than calls the ‘MediaPlayer.xap’ file which is under ‘14”hive/TEMPLATE/LAYOUTS/ClientBin’ to render the videos.To create this transparent div we need to call the ‘createOverlayPlayer’ method first. Since this function needs to called on the body’s onload event we have to add it to the _spBodyOnLoadFunctionNames array.


Now to integrate this with the HTML elements the mediaplayer library provides a function ‘attachToMediaLinks’ which essentially finds all the anchor tags within the given div and adds an onclick event handler for them which renders the above mention transparent div, which in-turn renders the silverlight media player.

28 comments:

Michael said...

I can't seem to get this to work. When I click the link it opens media player to so the video. However I was able to get it to render inline with an object tag but not in overlay mode. Any ideas?

Anonymous said...

where to create this javascript file and where to use it

Anonymous said...

Where to include that javascript file can you just brief it out

Jomit Vaghela said...

Michael : How exactly are you calling the media player control? Do you have any Content Query Webparts on the page ?

Anonymous : This javascript file is built-in and you can include it anywhere in the page layout using this tag
<script type="text/javascript" src="/_layouts/mediaplayer.js" />

Anonymous said...

we have to include the above code in media player.js file means didnt get completely i.e where to place that javascript code .

Anonymous said...

From where it will pick up the video

Anonymous said...

The process i followed.
opened the page in sharepoint designer 2010. copied the following code just below the silverlight media player webpart.

script type="text/javascript" src="/_layouts/mediaplayer.js"> /script> script type="text/javascript"> _spBodyOnLoadFunctionNames.push('mediaPlayer.createOverlayPlayer'); mediaPlayer.attachToMediaLinks ( (document.getElementById('
SilverlightObjectDiv_WebPartctl00_m_g_04e0301f_e78f_4334_8628_886a1066575b')), ['wmv', 'avi', 'mp3'] ); /script>

object type='application/x-silverlight-2' data='data:application/x-silverlight-2,' width='647' height='356'> param name='source' value=_layouts/clientbin/mediaplayer.xap'/> \param name='initParams' value='displayMode=Inline,mediaTitle=SharePoint2010,mediaSource=C:/Users/ANKIT SAXENA/Desktop/So32v64-6k.wmv ,autoPlay=true,mediaFileExtensions=wmv;wma;avi;mpg;mp3;,silverlightMediaExtensions=wmv;wma;mp3;'/> param name='windowless' value='true'/> param name='enableHtmlAccess' value='true'/> param name='minRuntimeVersion' value='2.0.31005.0'/> /object>


getting confused with div id. I have opened the homepage at runtime in notepad and copied div id from there. what other things need to be done

I am using sharepoint 2010 and silverlight v3

Anonymous said...

I am very confused not able to configure it ..Can you just brief it out how in more detailed way Thanks in advance

Jomit Vaghela said...

The div which we would provide to the media library would contain links to wmv files so it would fetch the videos from there.

It is very simple, you just need to add the javascript that I provided and specify the [[div id]] which would contain your hyperlinks.
Try it and let me know what errors you are facing

Jomit Vaghela said...

Ankit Saxena : We do not need a silverlight webpart for this. What this code does would do is, it would find all the anchor tags (hyperlinks) inside the div (from div id) that you provide and attach an onclick handler to it.
The onclick handler would in-turn call the silverlight media player and also create the overlay div for it.

Charles said...

Hi Jomit,
I am having the same issues that Michael had trying to get this to work. I've added the script tags as you mentioned, and it still just opens up Windows Media Player. Here is what I had in my content editor webpart:

Script tag that points to:
src="/_layouts/mediaplayer.js"

Script tag that calls:
_spBodyOnLoadFunctionNames.push('mediaPlayer.createOverlayPlayer');
mediaPlayer.attachToMediaLinks(
(document.getElementById('movie')),['wmv', 'avi', 'mp3']);

A div block with the id movie
with an anchor tag linked to my WMV file

I don't ever see it appending the onclick event to the anchor tag.

Am I doing something wrong, or am I just missing something?

Thanks,
Charles Ralston

Charles said...

Hi Jomit,
I am having the same issues that Michael had trying to get this to work. I've added the script tags as you mentioned, and it still just opens up Windows Media Player. Here is what I had in my content editor webpart:

Script tag that points to:
src="/_layouts/mediaplayer.js"

Script tag that calls:
_spBodyOnLoadFunctionNames.push('mediaPlayer.createOverlayPlayer');
mediaPlayer.attachToMediaLinks(
(document.getElementById('movie')),['wmv', 'avi', 'mp3']);

A div block with the id movie
with an anchor tag linked to my WMV file

I don't ever see it appending the onclick event to the anchor tag.

Am I doing something wrong, or am I just missing something?

Thanks,
Charles Ralston

Anonymous said...

Is there a way to get this to work in Firefox? When I click the link it just prompts to download the file. Works fine in IE though.

D-Cubed said...

Works like a charm, for me the order of the javascript was a problem and the OOTB push function, used jQuery document.ready instead

spiceboy said...

Hi:


Have you tried this on Internet Explorer 9:

I'm creating dynamic divs within an MVC2 app and inside a partial view there's an object that contains a SP 10 Media Player:
<div id="divMediaPlayerHost<%= postID%>">
<object height="250px" width="300px" data="data:application/x-silverlight-2," type="application/x-silverlight-2" id="slPlayer<%= postID%>" style="display: block">
<param value="/_layouts/clientbin/mediaplayer.xap" name="source" />
<param value="true" name="enableHtmlAccess" />
<param value="true" name="windowless" />
<param value="#80808080" name="background" />
<param value="mediaTitle=<%= Html.Encode(post.ResourceTitle)%>,mediaSource=<%= post.ResourceLink %>,previewImageSource=/Style Library/Media Player/VideoPreview.png" name="initParams" />



<a style="text-decoration: none;" href="http://go.microsoft.com/fwlink/?LinkID=124807">
<img style="border-style: none;" alt="Get Microsoft Silverlight" src="http://go.microsoft.com/fwlink/?LinkId=108181" /></a>
<a title="Open a media player on your client to play audio or video file." class="media-link"
href="<%= post.ResourceLink %>" id="lnkNoSilverlight"><span class="media-title">
<%= Html.Encode(post.ResourceTitle)%></span></a>



</object>
</div>


This object is inside another div that pop ups as a Jquery Dialog.
var divId = "#slPlayerContainer" + id.toString();
$(divId).dialog({
height: 400,
width: 600,
autoOpen: false,
modal: true,
close: function (event, ui)
{
ClosePlayer(id);
}
});


When I close the Dialog (or even if I put a dummy button to call the function to close the player)
var idPlayer = "divMediaPlayerHost" + id;
var idSlPlayer = "slPlayer" + id;
var obJectDiv = $("#" + idPlayer);
var objectPlayer = $("#" + idPlayer +" object");
var objectContent;
if (objectPlayer)
{
objectContent = $("#" + idPlayer +" object")[0].Content;

if (!objectContent)
{
}
else
{
var player = objectContent.MediaPlayer;
player.Stop();
}
}


The same page, with the same javascript and the same partial view works just fine over FireFox. Does anybody knows if this is a known issue of the player using IE?. Sorry about the spam, but this is the only page I found abouth the SP 2010 Media Player Reference.

Unknown said...

i have a video library. form this library i display allthe video on a page using webpart. now i am facing the problem that the div with same id gets created everytime and i am not able to play the video...
If anyone has faced this problem before let me know the solution

Unknown said...

I have a Libray of video which are beign displayed on a page. now the problem that i am facing is the div with same id gets generated every time with different URL's, please help me out

Anonymous said...

Kindly, can u post the all code with include body onload and div tags and hyperlink code. It seam very confusing.

Xopher said...

This is cool Thanks!
Here's what I did to get it working.
Drop a content editor web part on the page.
add the markup first the div with the links and then the javascript (had to change the chevrons to post):
|<|div id="CPVids"|>||<|a href="/PublishingImages/mediaexample.wmv"|>|vid 1|<|/a|>| |<|/div|>|
|<|script src="/_layouts/mediaplayer.js" type="text/javascript"|>||<|/script|>||<|script type="text/javascript"|>|
_spBodyOnLoadFunctionNames.push('mediaPlayer.createOverlayPlayer');
mediaPlayer.attachToMediaLinks((document.getElementById('CPVids')),['wmv', 'avi', 'mp3']);|<|/script|>|

Eric Kleeman said...

HD Media Center for SharePoint 2010 and SharePoint Online Office 365

HD Media Center is a pure Silverlight application that plugs directly into the SharePoint 2010 Silverlight Web Part. HD Media Center is a video delivery and organization solution targeting Office 365 but works equally well in On Premise deployments.


https://silvercontrols.com/products/93-hd-media-center-for-sharepoint.aspx

rami shareef said...

For those who not able to run the example, all you have to do is to place the javascript block after the div

Jenny said...

Tried, it work thank you

convert .avi to .mp4 mac said...

i have a video library. form this library i display allthe video on a page using webpart. now i am facing the problem that the div with same id gets created everytime and i am not able to play the video.

Sai Abhilash Manikonda said...

Great Post. Works like a charm. Thank you !

Sai Abhilash Manikonda said...

Great Post. Works like a charm. Thank you :)

videotool said...

Post is nicely written and it contains many good things for me. I am glad to find your impressive way of writing the post.

Steven Sanchez said...

Works great on list and library web parts, but I can't seem to get it to work on a search results web part. Has anyone had any luck with that?

Steven Sanchez said...

Works great on list and library web parts, but I can't get it to work on a search results web part. Has anyone had any luck with that?

AddIn