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

After we understand what video stream is all about and we wrote our first piece of SWFObject in Javascript. let’s try to have this working on our servers, of course that such things tend to fail. But let’s understand why…

First thing we need to understand is whether such failures occur due to my code, file format or server configuration.
let’s have a simple check trying to access the file directly using our browser.

IIS7:

configure your IIS to serve the following files: swf and mp4 using Static Content

<add name="FlashFiles" path="*.swf" verb="*" modules="StaticFileModule" scriptProcessor="" resourceType="File" requireAccess="Script" />
<add name="VideoFiles" path="*.mp4" verb="*" modules="StaticFileModule" scriptProcessor="" resourceType="File" requireAccess="Script" />


Setting handler(s) won’t be good enough, requesting the server again will return “404.3 – mime type missing”.
Don’t worry Adding new  mime type to IIS 7 - is easy:

<configuration>
    <system.webServer>
        <staticContent>
            <mimeMap fileExtension=".mp4" mimeType="video/mp4" />
        </staticContent>
    </system.webServer>
</configuration> 

Apache:

While installing the static content on our static servers (apache) – we’ve found out that requesting the files from firefox return with “no content length” and “incorrect mime type”
adding the correct mime type to the /etc/mime.type

video/mp4     mp4

Check the Request\Response we’ve found out that our servers are still returning compressed response , googling it find out that Firefox cann’t handle gzipped video stream,
compression was selectively disabled by adding the following line to /etc/httpd/conf.d/static.d/static.conf:

SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png|mp4)$ no-gzip dont-vary

Apache solution provided by Tomer G.

Saturday, July 24, 2010 11:01:30 PM (GMT Daylight Time, UTC+01:00)  #    Comments [0] - Trackback
IIS7 | Software Development | Web

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

So our mission is to have our website play a short intro movie.

 

Wiki Definition

Progressive download is a term used to describe the transfer of digital media files from a server to a client, typically using the HTTP protocol when initiated from a computer. The consumer may begin playback of the media before the download is complete. The key difference between streaming media and progressive download is in how the digital media data is received and stored by the end user device that is accessing the digital media.”

 

Actually the “progressive download” feature implemented in most media players allows them to begin playing the file as soon as enough data received.

 

File formats: SWF VS. FLV

  • Both are Adobe formats.
  • FLV is a video container, intended to contain only audio\video
  • SWF can contain animations, games, applications and videos
  • SWF uses a lossless compression and is limited to a certain number of frames. Due to it is not compressed some files can be too big for use in the internet.
  • Large websites like Google, Amazon are using the FLV file formats

After this short explanation, we are ready to start:

  1. Create a video file in a common streaming media format (in our case: Camtasia -> SWF, mp4)
  2. Upload the files to your Web Server
  3. Check whether this link is working from common browsers
  4. Link from you Web Pages (HTML tags or JS)

In the next posts we will talk about steps 3 and 4.

For now you can keep reading about step 1 - here

Saturday, July 24, 2010 10:25:34 PM (GMT Daylight Time, UTC+01:00)  #    Comments [0] - Trackback
Software Development | Web

Archive
<December 2014>
SunMonTueWedThuFriSat
30123456
78910111213
14151617181920
21222324252627
28293031123
45678910
Disclaimer

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

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