Monday, February 13, 2012

Playing Videos in SharePoint using JWPlayer

Requirement:  To play a .MOV video file in SharePoint site.

Solution: Used the JWPlayer in SharePoint. Here are the detailed steps.

Step 1: 
Download the JWPlayer files from http://www.longtailvideo.com/jw/upload/mediaplayer-viral.zip
Extract and open the jwplayer.js file, Search for  /jwplayer/player.swf and then replace this with the location where you are going to upload the files.
E.g. change it to:

https://SharePoint.yourcompany.com/sites/Marketing/brandcenter/Player/player.swf

Step 2:
Create a Document Library and upload the files along with your video file and modified preview.png.
jw player sharepoint

Step 3:
Create a HTM file with the name of "Jwplayer.htm", paste the below code in it, change the File locations accordingly,  and then upload it to the document library you created earlier.
<html>
<head>
<title></title>
</head>
<body>
 <!-- START OF THE PLAYER EMBEDDING TO COPY-PASTE -->
 <div id="mediaplayer">Loading video...</div>
 
 <script type="text/javascript" src="https://SharePoint.com/sites/Marketing/brandcenter/Player/jwplayer.js"></script>
 <script type="text/javascript">
  jwplayer("mediaplayer").setup({
   flashplayer: "https://SharePoint.com/sites/Marketing/brandcenter/Player/player.swf",
   file: "https://SharePoint.com/sites/Marketing/brandcenter/Player/bp.mov",
   image: "https://SharePoint.com/sites/Marketing/brandcenter/Player/preview.png"
  });
 </script>
 <!-- END OF THE PLAYER EMBEDDING -->

</body>
</html>


Step 5: Now add a content editor web part, Edit the CEWP and point it to the HTM file created. Or Place this code:
<iframe name="Iframe" src="https://SharePoint.com/sites/Marketing/brandcenter/Player/Jwplayer.htm" scrolling="no" FRAMEBORDER="0" style="width:100%; border:0;  height:100%; overflow:hidden;">
</iframe>
See it in action!
jwplayer for sharepoint 2010

Look at this post for web based players: http://www.instantshift.com/2010/05/14/21-free-video-players-for-your-website-and-blogs/

we can use the EMBED tag as well!
<div>
<embed src="https:/SharePoint.com/marketing/brandcenter/player/bp.mov" autoplay="true" loop="true" width="400"      height="200">
 </embed>
</div>
The Problem here is: you must have a browser plug-in installed to play the video ( Such as Quick time) also it will prompt for username/password when using Secured sites.



You might also like:
SharePoint Usage Reports
Usage reports, collaboration and audit for SharePoint.
Document SharePoint Farm
Automatically generate SharePoint documentation.
*Sponsored


Check out these SharePoint products:

7 comments :

  1. I performed the steps mentioned above but my Content Editor says
    "Cannot retrieve the URL specified in the Content Link property. For more assistance, contact your site administrator."
    any suggestions

    ReplyDelete
    Replies
    1. Check these two possibilities:
      1. Resource Links(such as video, javascript) are mistyped - Try absolute URL.
      2. Permission issue.

      Delete
  2. It only shows "Loading Video...."
    Any suggestion? Thanks

    ReplyDelete
    Replies
    1. Try opening the HTML file you created in Browser first. If that HTML still shows "Loading Video" you may have to check any mistyped URLs, Javascript Link, Video Links.

      Delete
  3. I've tried the above and can get the video to play directly from the jwplayer.htm file, but when embedding it either in a CEWP or a Page Viewer Web Part, it always tries to download jwplayer.htm instead of showing it. Am I doing something wrong?

    ReplyDelete
    Replies
    1. Fowler, You have to either set the browser file handling or MIME type. Follow this article: http://www.sharepointdiary.com/2011/04/open-pdf-document-browser-sharepoint2010.html

      Regards,
      Sal

      Delete

Please Login and comment to get your questions answered!

You might also like:

Related Posts Plugin for WordPress, Blogger...