Tuesday, June 18, 2013

JavaScript to Create Media player In SharePoint 2010

Steps to Create Media player In SharePoint 2010 using JavaScript:

1. Create new page in SharePoint site

2. Get <div> on newly created page

Example: <div id=”videoHolder”></div>

3. If page is inherited from master page, find “PlaceHolderAdditionalPageHead” and insert script tag with source as “_layouts/mediaplayer.js”

Example: <script type="text/javascript" src="_layouts/mediaplayer.js"></script>

4. Have one more script tag with following content:

<script type="text/javascript" >

_spBodyOnLoadFunctionNames.push("CreateMediaPlayer");

function CreateMediaPlayer()
{
    var videoUrl = “/Videos/MyVideo.wmv”; // video URL
    insertVideo(document.getElementById("videoHolder"),videoUrl);
}
function insertVideo(videoHolder,videoURL)
{
    mediaPlayer.createMediaPlayer(videoHolder,videoHolder.id, '400px','266px',
    {
         displayMode:'Inline',

         mediaTitle:’Help Video',
         mediaSource:videoURL,
         previewImageSource:'',
         autoPlay:true,
         loop:true,
         mediaFileExtensions:'wmv;wma;avi;mpg;mp3;',
         silverlightMediaExtensions:'wmv;wma;mp3;'
    });
}
</script>


5. Make sure the 
value of variable "videoUrl" is set correctly.

5. Save the page. That’s it!!!

6. Open the page and see the magic.

7 comments:

Unknown said...

Thanks - it works perfect.

Unknown said...

Jorgen, Thanks for your feedback.

Akhila said...

i gave like mediaSource: "https://youtu.be/vg91t03w5Zw"

but getting media cannot be loaded error. wat cud be the reason..can u pls help ?

Unknown said...

Try using direct video url like http://site/video.wmv

Akhila said...

we can use only our site link. external link is not possible ?

Prasad said...

Nice article. thanks
http://prasadaknair.blogspot.com

Dynamics 365, Power Platform & Azure said...

i am using the .mp4 videos to play from my share point list i had fallowed the same process as said above but im not getting player also in my page.