Step #3 – How to Add Video Streaming to A Web Page

 

Streaming video is a sequence of “moving images” that are sent in compressed form over the Internet and displayed by the viewer as they arrive. With streaming video, a visitors of yours does not have to wait to download a large file before seeing the video or hearing the sound.

Instead, your video presentation is sent in a continuous stream and is played as it arrives. Your visitors only needs a player, which is a special program that uncompresses and sends video data to their monitor and audio data to speakers. A player can be either an integral part of a browser or downloaded from the software maker’s web site.

This short tutorial explain the different types of video streaming on the Internet: progressive and real-time.

Progressive streaming is the easiest way as it requires no streaming server. You can use your regular web site hosting server to upload your compressed video file. Quality is good and once you decide to play the video presentation online, the whole file begins to download to your hard drive. In this case, your visitors can’t jump ahead to other sections of the video.

In some cases, progressive files may require you to download the entire video before playing it. But in general, progressive streaming works best for videos under 3-5 minutes.

Real-time streaming requires a special streaming server and plays automatically. You don’t need to download the entire video before playing, and you can jump to any location in the video presentation. In this case, the presentation always resides on the server.

Real-time streaming is the best option (but more expensive!) for longer videos such as live conferences, detailated presentations, training videos, etc. It also offers good protection for your content as users can’t download it to their hard drives and redistribute your work. Unfortunately, for the moment, with real-time streaming the video quality isn’t as good.

Streaming video is like when you save files on your computer, but instead the video can be compressed and transmitted. You wouldn’t want to stream a video unless you want to make it available on the Internet.

When you download a video movie, the entire file is saved on your computer and then open and view. This method has the big disadvantage of having to wait for the whole file to download before any of it can be viewed. If the file is quite small this may not be too much of an inconvenience, but for large files and long presentations it can be very off-putting.

Delivering video files this way is known as HTTP streaming or HTTP delivery. For this reason it is easy to set up and use on almost any website, without requiring additional software or special hosting plans.

 

With this technology you can add unlimited streaming video to your web sites and emails without expensive equipment or technical know-how!

Instant Video Generator

It works great on dial-up modems or high-speed, and records with any webcam and microphone.

With InstantVideoGenerator you are witnessing the Net’s fastest, easiest, most economical way to create professional streaming video clips for web sites and email broadcasts!


 

The method you choose will depend on your video marketing strategies, but most people will go after progressive streaming. By far this is the easiest and cheapest way to get started. If necessary, you can upgrade to a streaming server later.

So you need a streaming system, a streaming architecture that can figure out what to do with all that data. Streaming architectures are made up of codecs. Codecs are basically mathematical formulas for handing your video information. They compress video data into something smaller. On the receiving end, they decompress that data into some form of displaying the video.

When captured on cameras (see video tools software as reference), a video movie is encoded, and when played back on your computer it is decoded. In this case, your codec works in “real-time” so that no special processing is required.

All computers do not include hardware codecs, but instead uses software codecs. Such a specialized software utilized the computer’s CPU to processes the data. A computer is capable of playing a movie without much trouble because most computers are fast enough, but also the video format is not too intensive.

Digital video codecs are the video codecs you probably use or will use in the nearest future. In general, they are lossy and sacrifice the quality for playability. These codecs gives a 5:1 compression rates, so a video presentation will finally have a heavy reduced size that can be streamed for Internet use, no matter if viewers have broadband or modem connections.

In a nutshell, you can reduce video sizes in three ways: reduce the data-rate (increase the compression), reduce the physical size (number of pixels), reduce the size of your audio file, or reduce the number of frames per second. Play with any combination of those numbers and you’ve got a smaller file for streaming video.

But more about codecs and compression you can read on the video tools software page.

Once you’ve save the movie in a common video format and use steaming media file formats, you can embed your video directly on a web page using the next special HTML tag codes.

 

Paste the following HTML to embed your WindowsMedia file:

<!– begin embedded WindowsMedia file… –>

<table border=’0′ cellpadding=’0′ style=’width: 90%’ align=”center”><tbody><tr><td>

<OBJECT id=’MediaPlayer’ width=”320″ height=”285″ classid=’CLSID:22d6f312-b0f6-11d0-94ab-0080c74c7e95′ codebase=’http://activex.microsoft.com/activex/controls/
mplayer/en/nsmp2inf.cab#Version=5,1,52,701′ standby=’Loading Microsoft Windows Media Player components…’ type=’application/x-oleobject’>

<PARAM name=’fileName’ VALUE=”http://servername/path/to/media.wmv”>

<PARAM name=’animationatStart’ VALUE=’true’>

<PARAM name=’transparentatStart’ VALUE=’false’>

<PARAM name=’autoStart’ VALUE=”false”>

<PARAM name=’showControls’ VALUE=”true”>

<PARAM name=’loop’ VALUE=”false”>

<EMBED type=’application/x-mplayer2′ pluginspage=’http://microsoft.com/windows/mediaplayer/en/download/’ id=’MediaPlayer’ name=’MediaPlayer’ displaysize=’4′ autosize=’-1′ bgcolor=’darkblue’ showcontrols=”true” showtracker=’-1′ showdisplay=’0′ showstatusbar=’-1′ videoborder3d=’-1′ width=”320″ height=”285″ src=”http://servername/path/to/media.wmv” autostart=”false” designtimesp=’5311′ loop=”false”>
</EMBED>
</OBJECT>
</td></tr></tbody></table>
<!– …end embedded WindowsMedia file –>

 

Paste the following HTML to embed your RealMedia file:

<!– begin embedded RealMedia file… –>

<table border=’0′ cellpadding=’0′ align=”center”><tbody><tr><td>

<!– begin video window… –>

<OBJECT id=’rvocx’ classid=’clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA’ width=”320″ height=”240″>

<PARAM name=’src’ VALUE=”http://servername/path/to/media.rmvb”>

<PARAM name=’autostart’ VALUE=”false”>

<PARAM name=’controls’ VALUE=’imagewindow’>

<PARAM name=’console’ VALUE=’video’>

<PARAM name=’loop’ VALUE=”false”>

<EMBED src=”http://servername/path/to/media.rmvb” width=”320″ height=”240″ loop=”false” type=’audio/x-pn-realaudio-plugin’ controls=’imagewindow’ console=’video’ autostart=”false”>
</EMBED></OBJECT>

<!– …end video window –>

</td></tr><tr><td>

<!– begin control panel… –>

<OBJECT id=’rvocx’ classid=’clsid:CFCDAA03-8BE4-11cf-B84B-0020AFBBCCFA’ width=”320″ height=’30’>

<PARAM name=’src’ VALUE=”http://servername/path/to/media.rmvb”>

<PARAM name=’autostart’ VALUE=”false”>

<PARAM name=’controls’ VALUE=’ControlPanel’>

<PARAM name=’console’ VALUE=’video’>

<EMBED src=”http://servername/path/to/media.rmvb” width=”320″ height=’30’ controls=’ControlPanel’ type=’audio/x-pn-realaudio-plugin’ console=’video’ autostart=”false”>

</EMBED></OBJECT>
</td></tr></tbody></table>
<!– …end embedded RealMedia file –>

 

Paste the following HTML to embed your QuickTime file:

<!– begin embedded QuickTime file… –>

<table border=’0′ cellpadding=’0′ align=”center”><tbody><tr><td>

<OBJECT classid=’clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B’ width=”320″ height=”255″ codebase=’http://www.apple.com/qtactivex/qtplugin.cab’>

<PARAM name=’src’ VALUE=”http://servername/path/to/media.mov”>

<PARAM name=’autoplay’ VALUE=”false”>

<PARAM name=’controller’ VALUE=”true”>

<PARAM name=’loop’ VALUE=”false”>

<EMBED src=”http://servername/path/to/media.mov” width=”320″ height=”255″ autoplay=”false” controller=”true” loop=”false” pluginspage=’http://www.apple.com/quicktime/download/’></EMBED>

</OBJECT>
</td></tr></tbody></table>
<!– …end embedded QuickTime file –>

 

 

Paste the following HTML to embed your Flash file:

<!– begin embedded Flash file… –>

<table border=’0′ cellpadding=’0′ align=”center”><tbody><tr><td>

<OBJECT classid=’clsid:D27CDB6E-AE6D-11cf-96B8-444553540000′ codebase=’http://download.macromedia.com/pub/shockwave/cabs/
flash/swflash.cab#version=6,0,0,0′ width=”320″ height=”240″>

<PARAM name=’movie’ VALUE=”http://servername/path/to/media.swf”>

<PARAM name=’quality’ VALUE=”high”>

<PARAM name=’bgcolor’ VALUE=’#FFFFFF’>

<PARAM name=’loop’ VALUE=”false”>

<EMBED src=”http://servername/path/to/media.swf” quality=’high’ bgcolor=’#FFFFFF’ width=”320″height=”240″ loop=”false” type=’application/x-shockwave-flash’ pluginspage=’http://www.macromedia.com/shockwave/
download/index.cgi?P1_Prod_Version=ShockwaveFlash’></EMBED>

</OBJECT>
</td></tr></tbody></table>
<!– …end embedded Flash file –>

 

 

Paste the following HTML to embed your MPEG-4 file (with Quicktime):

<!– begin embedded MPEG-4 file… –>

<table border=’0′ cellpadding=’0′ align=”center”><tbody><tr><td>

<OBJECT CLASSID=”clsid:02BF25D5-8C17-4B23-BC80-D3488ABDDC6B”

CODEBASE=”http://www.apple.com/qtactivex/qtplugin.cab” WIDTH=”320″ HEIGHT=”256″>

<PARAM NAME=”src” VALUE=”videofilename.mp4″>

<PARAM NAME=”autoplay” VALUE=”false”>

<EMBED SRC=”QTMimeType.pntg” TYPE=”image/x-macpaint” PLUGINSPAGE=”http://www.apple.com/quicktime/download” QTSRC=”videofilename.mp4″ WIDTH=”320″ HEIGHT=”256″ AUTOPLAY=”false”></EMBED>
</OBJECT>
</td></tr></tbody></table>
<!– …end embedded MPEG-4 file –>

 

 



« back to the video marketing tips main page

video marketing tips « Step #1 — video presentations

« Step #2 — video formats explained

» Step #4 — video tools software

» Step #5 — video marketing strategies