Welcome to Infotx - Webmaster Guides and Resources.

Web hosting Audio and Video Streaming.

Audio and Video Streaming

How to stream Quicktime files. (.mov, .qt)

Most hosting accounts support QuickTime media files via HTTP streaming. Also known as pseudo-streaming, HTTP streaming provides virtually unlimited streaming of QuickTime audio and video files over HTTP.
Follow these simple instructions to add streaming QuickTime content to your website:

1. Create/Convert QuickTime Content

Create or convert existing audio or video content to a QuickTime file using QuickTime Pro, or a specialized audio or video editing application which includes the QuickTime CODEC, such as Adobe Premiere.

2. Prepare for Streaming

Make sure the movie is self-contained, otherwise your movie will contain references to media content from the original source.
Open your movie in QuickTime Pro Player and choose "Movie to QuickTime Movie" from the Export menu. Choose your streaming option from the "Use" menu -- 40 kbps will permit 56K analog modems to stream correctly; faster rates will cause pauses in playback at this download speed. Make sure you select an HTTP streaming option, and that "Fast Start" is selected. Select any additional options you require, choose a destination for the new file and click OK to save your QuickTime file.
Note: If "Fast Start" is not selected, your movie will not stream, thus requiring your visitors to download the complete file before playback commences. For advanced export options, visit the QuickTime Developer website.

3. Upload Your File & Build Your Links

Upload the QuickTime file to your website.
Create a link to the QuickTime .mov file from any image or text on your page. When a visitor clicks on this link, their QuickTime program will launch and begin downloading the file. Once a portion of the file has been downloaded, playback will commence while the remainder of the file is downloaded in the background.

Provide a Link for Your Visitors

You may wish to use the following image on your website to indicate that you are providing QuickTime content, and to allow your visitors to download the free player:

Alt text: Get QuickTime
Link: http://www.apple.com/quicktime/download/

Note: Please do not link to the above image. If you wish to display the image, download it to your own website.

Embedding Content in HTML Pages

QuickTime Pro can also create embedded content. Apple also provide plug-ins for popular multimedia applications, such as Adobe Premiere. For more information, please visit the QuickTime website.

Streaming a single MP3 file.

1. Upload your MP3 to your server

2. Open notepad. write the entire url of the mp3: ie: http://www.myserver.com/mp3s/mysong.mp3 (obviously the full real url of your mp3)

3. Do a 'save as' and call it something but add .m3u on the end of it. eg: mysong.m3u

4. Upload this .m3u file to your server too.

5. This acts as a pointer to your mp3 file and the m3u extension tells it to stream. So in your page you just link to the .m3u file. When people click your link it goes to the m3u which auto redirects and streams the MP3 you pointed it to, in the default player of the users operating system. In my case, realplayer.

The beauty of this is that as the URL is contained in the notepad document. No one else can see where the MP3s are to download from.

You can use the exact same technique to stream video and audio in realplayer. Your realplayer file is a .rm - so you create a notepad document with the extension .ram and it functions exactly the same. There is no need for embedding; just pops up in realplayer.

*Note: If you put a semicolon ';' after each entry, and put each entry on it's own line, your music program will add all tracks in the .m3u to your computers' playlist. (This is not true streaming, but can work if you need to play more than one song)

Choosing a video format.

If you're thinking about adding video to your Web page, you should take a minute to learn about the different formats and embedding techniques available. Though it may be more convenient for you to work in AVI or QuickTime (because one or the other is native to your machine), the easy choice isn't always the best.
Let's start with a brief and very incomplete history of desktop video. After the success of QuickDraw (the technology that allowed Macs to display and print graphics along with text), Apple developed QuickTime as a video file format and multimedia architecture to handle "time-based" media. Introduced in 1991, QuickTime became the industry standard for desktop video production, and has yet to be eclipsed by any rival technology.
AVI (short for audio/video interleaved) is the video file-type used by Video for Windows, which is the multimedia architecture developed for Windows 95. AVI is supposed to play back faster and smoother than other formats by interleaving the audio data with every video frame. QuickTime, on the other hand, handles audio and video interleaving in larger blocks (half-seconds or seconds).
Both QuickTime and AVI are cross-platform compatible, though they require special playback software on non-native machines. You can create and view QuickTime files on a PC by installing QuickTime for Windows; it will integrate with the system and appear as a file option in video-editing programs. To bring AVI compatability to a Mac, install the Video for Windows Apple Macintosh Utilities.
So which one is better for the Web? My vote goes with QuickTime. AVI is great for integrating video into Word documents and PowerPoint presentations created on a Windows machine, but QuickTime's superior compression makes it better suited for the Web. And in that environment, any increased playback speed is nominal.
Compress, compress, compress
To avoid cursing yourself (or having your audience do it for you), you'll want to keep the file size as small as possible. This can be accomplished in two basic ways: reducing the frame rate (number of video frames displayed per second), and compressing the finished file.
Fluid motion in film and video is an illusion our eyes and brains play on us; Hollywood-style films and television broadcasts display about 30 fps (frames per second) to achieve fluid-looking motion. But you can run desktop video around half as fast, and have it look OK. As you're editing, you should play with the frame rate and aim for about 15 to 8 fps. For basic editing, if you can afford it, I recommend using Premiere Pro for Mac or Windows.
Keep in mind that a good audio track can go a long way toward distracting people from a low frame rate. Jerky sound is much more jarring than a discontinuous picture, so you shouldn't skimp too much on the audio. However, mono 8-bit sound at 22.05Hz is decent for music, and more than adequate for voice.
Compression is the next step, and I'd recommend using On2 Video to cut your file down to size. Aim for a mid to low Quality setting and one of the frame rates described above.

How do I embed or use .avi, quicktime, or other file formats?

How do you place the clip?
You can place and access Web-based video in one of two ways: the anchor tag <a href> and the <embed> tag. Using <a href> is the same as placing any link within an HTML document, but here's a refresher on how it looks:

<a href="/video/golden.avi">goldenrod</a>

If you use this method, your users will either save the file to their desktops, launch a helper application, or load a new browser page, depending on how they've set their preferences and which browser they're using.
If you want your video to stream during download, or appear on the same page as the rest of your content, you'll want to embed the clip in a page, using <embed>. The <embed> tag is syntactically similar to the <img> tag, and uses many of the same elements. Remember, though, that the embed tag requires users to have the appropriate plug-in installed; if they don't, they won't see your work.
The HTML for an embedded video file goes something like this:

<embed src="/video/gore.mov" height=108 width=33% controller=false autoplay=true playeveryframe=false pluginspage="oops.html" loop=palindrome>

Elements specific to video include:

height=pixel/percent

Unless you need your movie to scale, set this in pixels, according to how big your movie is.

width=pixel/percent

Ditto.

autoplay=true/false

Answer with "true", and your movie streams in with the page. Answer with "false", and the user must click to play.

controller=true/false

This adds knobs that let your users control the movie. If you set this for "true", you'll want to add at least 15 pixels to the height of your movie. Otherwise the movie and the controller will be forced into the space required for the movie.

loop=true/false/palindrome

If you want the movie to play over and over, set this to "true". If you want it to play once and stop, set it to false. If you set it to "palindrome", it will play from beginning to end and then from end to beginning, continuously.

href=value

This just makes the movie link to something else.

pluginspage="oops.html"

This will take users who don't have the right plug-in to a page that tells them where to get it.
As with everything Web, there are no universal file formats or delivery standards for video, so, although I prefer QuickTime and the use of the <embed> tag, I'd recommend offering a few different options for surfers to choose from. That way even more people can enjoy your awesome video work.

How do I stream Real Audio and Video Files?

Adding Real Audio/Video Streaming

The HTTP protocol enables audio content providers to stream RealAudio and RealVideo from a Virtual Server. While this method is not the same as using an actual RealAudio server, it provides a reasonable method for providing RealAudio and RealVideo content.

Copy your encoded RealAudio or RealVideo files (.rm or .ra) to your web site via FTP. (Make sure to use BINARY/RAW mode)

In order for a Real Audio file to properly "stream" from your server you will need two files - one with a .ra or .rm extension (this is the actual Real Audio file which contains all the data) and a second file with a .ram extension. This file is referred to as a 'metafile' (which simply means that it points to another file). Explanations on what these files do is below:

The first file (the one with the .ram extension) is simply a pointer to the second file (the one with the .ra or .rm extension, which is the actual Real Audio file). This first file (the metafile) is the one that will be called from your web page and it is what allows the Real Audio Clips to "stream".

You will need to create the file with the .ram extension (the metafile) yourself. To do this, create the .ram file with the URL pointing to the .ra file:

(In this example the file, myrafile.ra, is located in /sound.)

The .ram file should contain: http://www.yourdomain.com/sound/myrafile.ra

Now calling the .ram file in a web browser would cause the Real Audio file to "stream". Ie:

http://www.yourdomain.com/sound/myrafile.ram

You can now include this as a link on your site for "streaming" Real Audio files.

Now, in your HTML document, reference the .ram file (metafile) in a hyperlink. For example:(This link would be on a web page in the /sounds directory)

<A HREF="myrafile.ram">Click here to listen!</A>

You may use either relative or complete paths to your .ram file. If you use complete paths, you must include both the hostname and the complete path. For example:

<A HREF="http://www.yourdomain.com/sound/myrafile.ram">

Now when a visitor to your website clicks on the link, the file will begin to play for them almost immediately!

For more information on how to create .ra and .rm files to use on your website, please see RealNetwork's Web Site.

Code samples can be found at http://www.realnetworks.com/resources/samples/index.html

I am having problems getting flash (FLV) files to work on the server. What should I know so that I can get this to work.

You may have to use the progressive download option. It is one of the availible options when you insert and display an FLV file in your HTML documents using the Flash Video component. You will also have to add a mime type either with the mime type icon or via the htaccess file, the htaccess file will have this code when complete "AddType video/x-flv .flv".

1. Progressive Download Video:
If you choose this video type, the video is downloaded to the user's hard drive, but starts playing the video before it finishes downloading. The video is downloaded from beginning to end, unless the user closes the connection before the download is complete. The user must have Flash Player 6 r65 (or greater) installed to see videos encoded with Sorensen Spark (included with Flash MX Professional 2004 and its standalone encoder). The user must have Flash Player 8 installed to see videos encoded with the On2 codec. For more information on which versions of Flash Player work with the different video codecs, search "on2 VP6 video codec"(with quotes) in Macromedia Flash 8 Help (F1).

Note: The FLV video included with the article source files uses the Sorenson Spark codec, and can be viewed with Flash Player 6 r65 or greater.

2. Streaming Video: If you choose this option, the video starts playing after a short buffer period, when a small amount of data downloads to the computer to ensure smooth playback. You must have Macromedia Flash Media Server available if you select this option. The user must have Flash Player 6 (or greater) installed to see your video, assuming it uses the Sorenson Spark codec. This option will not work with Hosting companies who do not have Flash Media Servers.

How do I embed a flash file in my webpage?

Flash Embedded in HTML
After creating a Flash movie you choose File > Save As from the top menu to save your movie. Save the file as "Somefilename.fla". To embed the Flash movie you just made into an HTML page, you should go back to your Flash program and do the following steps:
Step 1:
Choose File > Open. Open a Flash movie you have created.</p>
Step 2:
Choose File > Export Movie.
Step 3:
Name the file "somefilename.swf". Choose the location where the file is to be stored (in your Web folder). Click OK.
Step 4:
Open the HTML page where you want to insert your Flash movie. Insert this code:

<pre><object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed></object></pre>

*Note: This is the minimum code you need to embed a Flash movie in a browser. A broken icon will appear on the Web page if the user does not have the Flash plug-in installed.
*Note: In the code above there is both an <embed> tag and an <object> tag. This is because the <object> tag is recognized by Internet Explorer, and Netscape recognizes the <embed> tag and ignores the <object> tag.

Step 5:
Type in the address of the HTML file in your browser and look at your first Flash movie.

--------------------------------------------------------------------------

Let the Flash Program do the Work
The code above is the absolute minimum code to embed Flash movies in HTML pages. It is not recommended to use the minimum code. There should be a few more attributes added:

classid is an attribute to the <object> tag. It tells Internet Explorer to load the ActiveX plug-in if it is not installed.
pluginspage is an attribute to the <embed> tag. It displays a link to the Shockwave download page if Netscape does not have it

The Flash program can add these attributes for you:</p>
Step 1:
Choose File > Publish. Flash will now create the <object>, <param>, and <embed> tags for you. It will also create the classid and pluginspage attributes.
Step 2:
Open the HTML document that Flash created, view the HTML source and copy the code into your HTML page where you want your Flash movie.
Step 3:
Be sure that you have the "somefilename.swf" in your Web folder.
Step 4:
Type in the address of the HTML file in your browser and look at your first Flash movie.

Example html to embed a streaming movie in a browser using Windows Media Player, Cut and Paste the txt in the box to your editor. Modify the dimensions and filenames.