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 https://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.
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!
Look at this post for web based players: https://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.
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?
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
It only shows “Loading Video….”
Any suggestion? Thanks
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.
Works great!
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
Check these two possibilities:
1. Resource Links(such as video, javascript) are mistyped – Try absolute URL.
2. Permission issue.