You can read here my introduction about video streaming.
In order to embed rich media content into web pages and have our code compatible with different browsers we will use the SWFObject 2.2.
The SWFObject will render the right tags for the right browsers.
Here is a short, unobtrusive JS for showing your movie:
1: $(function() { 2: var videoBase = 'http://static-server/';
3:
4: $('.VideoTeaserArea').click(function() { 5: $(this).openLightBox("<div id='media'></div>"); 6: playMovie('intro-movie.swf'); 7: });
8:
9: function playMovie(videoFile) { 10: var videoUrl = videoBase + videoFile;
11: var att = { data: videoUrl, width: "640", height: "378", allowfullscreen:true}; 12: var params = { flashvars: "autostart=true"}; 13: var id = "media";
14: var myObject = swfobject.createSWF(att, params, id);
15: }
16: });
- line 2: Our movie directory, better place such content on static server or even CDNs.
- line 4: VideoTeaserArea is a class name that we spread all over our site - clicking on it will trigger the movie.
- line 5: openLightBox – on our site the movie will be opened in a light box.
- line 11: the videoUrl, will be seen in the configured size. allowfullscreen is false by default. read more here
- line 12: flashVars will be used here in order to have our movie start as our light-box will be opened.
- line 13: The placeholder we want to replace while loading the movie
- line 14: Add reference to the swfObject.js in order to have its instance(read bellow). The createSWF method is a low level API which enable combining with other Javascript libraries.
in order to have this code running we must add script tag:
<script type="text/javascript" src="swfobject.js"></script>
Now, after having embedding SWF to our site - Let’s understand how to make this work on IIS and Apache.