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',
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,
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.
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.