Human-Debugger.net - Web

Video Streaming – installing on IIS and Apache

Shani Raba — Sat, 24 Jul 2010 22:01:30 GMT

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.

Video Streaming – SWFObject + JQuery

Shani Raba — Sat, 24 Jul 2010 21:28:23 GMT

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.

Video Streaming - introduction

Shani Raba — Sat, 24 Jul 2010 21:25:34 GMT

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:

Create a video file in a common streaming media format (in our case: Camtasia -> SWF, mp4)
Upload the files to your Web Server
Check whether this link is working from common browsers
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