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.
Steps:
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 myvideo.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>
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
No comments:
Post a Comment