Raba - Defend your code RSS 2.0
# Saturday, July 24, 2010

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.

Saturday, July 24, 2010 10:28:23 PM (GMT Daylight Time, UTC+01:00)  #    Comments [0] - Trackback
Web |  Ajax |  Javascript

Archive
<February 2012>
SunMonTueWedThuFriSat
2930311234
567891011
12131415161718
19202122232425
26272829123
45678910
Disclaimer

Disclaimer
The opinions expressed herein are my own personal opinions and do not represent my employer's view in any way.

© Copyright 2012
Shani Raba
Sign In
Statistics
Total Posts: 145
This Year: 0
This Month: 0
This Week: 0
Comments: 97
Cool Stuff
Add to Technorati Favorites
Themes
Pick a theme:
All Content © 2012, Shani Raba
DasBlog theme 'Business' created by Christoph De Baene (delarou)