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.

Salaudeen Rajack

Salaudeen Rajack is a SharePoint Architect with Two decades of SharePoint Experience. He loves sharing his knowledge and experiences with the SharePoint community, through his real-world articles!

7 thoughts on “Playing Videos in SharePoint using JWPlayer

  • June 4, 2013 at 10:25 PM

    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?

    Reply
    • June 5, 2013 at 5:40 AM

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

      Regards,
      Sal

      Reply
  • August 7, 2012 at 7:36 AM

    It only shows “Loading Video….”
    Any suggestion? Thanks

    Reply
    • August 7, 2012 at 10:38 AM

      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.

      Reply
  • March 21, 2012 at 11:55 PM

    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

    Reply
    • March 22, 2012 at 4:08 AM

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

      Reply

Leave a Reply