Zieglers

Just little about C#, .NET, SQL Server, SharePoint and SAP

How to play flash video in SharePoint?

Posted by zieglers on July 28, 2010

 
INTRO:
In this post, i’ll try to show you how you can embed and play flash videos in SharePoint pages.
 
For example, you might want to share with your colleagues a training video, an announcement video… etc. Usually these videos can be hosted in Mysites, Team Sites or Publishing sites.
 
Here one challange we face is that being an end-user, we have no luxury to deploy anything to SharePoint servers to achieve this task. We have to do this only within our site collection scope.
 
Sounds hard to do, however it’s possible, and actually it’s quite easy too.
 
Details:
[For this section, credit goes to this post]
Flash movie files are mostly in two formats: SWF files and FLV files. 
 
FLV files are simply a container movie file, and in order to present them to the user in a manner in which they will be able to control the playback of the movie you need to wrap them in an SWF playback control. Embedding flash video into a SharePoint site isn’t that much different than doing it in any other site. The only challenge is figuring out where and how the required files will be hosted and made accessible by the SharePoint site and its users.
 
Assuming you already have an FLV file, if not there are several converter applications available that will create FLV files out of common video formats.
 
The next step is to find an FLV player that will present the video on our site. There are several third party FLV players available, many for free although some require licensing for commercial use. I’ve listed some here:

Each player has their own way of embedding, in this example I will use JW player. They have a neat tool on their site that you can use to generate the code needed to embed your video.

The player does require several files to be hosted and made readable by the user who will have access to the videos. You can create a dedicated document library and upload the appropriate files included in the FLV players package and then use the absolute URL in your embed code to reference them.

NOTE: Be sure that the users who will be watching the video have read access on the document library the FLV player files are stored in.

You then create a content editor web part in which you want the video to appear in and place the embedding code in the source editor.

DEMO: Hosting flash video in MySites

In this demo, i’ll show how you can host your videos in your mysites.
In order to do so, as mentioned above, we need a dedicated document library to host flash player files and video files.
 
1. Create a document library called ‘Media’. Also create a folder called ‘Player‘ so we keep flash player files separate from video files in Media library.
 
 
2. Upload flash player files into Player folder. Those files are:
  • player.swf (Flash player wrapping the video)
  • preview.jpg (Preview image. Once you click on it, video will start playing)
  • swfobject.js (JavaScript file controlling player and video)
 
3. Upload your video FLV file in media library. In this demo, i use a sample video file named as video.flv.
 
 
4. So far we are hosting player files and video files. Now go to page you want to put your video and insert a Content Editor Web Part. (Site Actions > Edit Page > Add a Web Part > Miscellaneous > Content Editor Web Part)
 
This web part will be displaying flash player and video.
 
 
5. Now edit this web part and open source editor.
 
 
6. Then insert following code into source editor window.
 
<script type=’text/javascript’ src=’Media/Player/swfobject.js’></script>
<div id=’mediaspace’>This text will be replaced</div>
<script type=’text/javascript’>
  var so = new SWFObject(‘Media/Player/player.swf’,’ply’,’550′,’403′,’9′,’#000000′);
  so.addParam(‘allowfullscreen’,’true’);
  so.addParam(‘allowscriptaccess’,’always’);
  so.addParam(‘wmode’,’opaque’);
  so.addVariable(‘file’,’http://YourSPSiteCollectionUrlGoesHere/Media/video.flv’);
  so.addVariable(‘image’,http://YourSPSiteCollectionUrlGoesHere/Media/Player/preview.jpg’);
  so.write(‘mediaspace’);
</script>
 
 
Note: Don’t forget to replace url of image and file variables with your own ‘mysite’ web url.
 
7. That’s all. If you have done everything without a mistake, you should be seeing your flash video as follows.
 
 
You can download flash player and sample video files here.
 
Good Luck!
 
Zieglers
Advertisements

5 Responses to “How to play flash video in SharePoint?”

  1. preschool learning to write…

    […]How to play flash video in SharePoint? « Zieglers[…]…

  2. çocuk oyun…

    […]How to play flash video in SharePoint? « Zieglers[…]…

  3. video sharing bollywood movies videos live tv hot clips…

    […]How to play flash video in SharePoint? « Zieglers[…]…

  4. […] Could you use the Content Editor Web Part and HTML technique to play FLV files? Yes you can!  Zieglers posted an entry on the blog on how to play FLV files in SharePoint using the Content Editor Web Part, a JavaScript library and an SWF file that acts as the FLV player.  You can get the files and read the tutorial here: https://zieglers.wordpress.com/2010/07/28/how-to-play-flash-video-in-sharepoint/. […]

  5. (Mark SimonIDerek KaneIJohn WallaceIBrian Harrison)…

    […]How to play flash video in SharePoint? « Zieglers[…]…

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: