If you’ve ever wanted to include streaming video in your designs, but didn’t want to bother with messy code solutions (or Flash), we’ve got two quick and easy solutions for you. Today, we’re going to take a peek at what each solution offers to web designers and how to use both of them in your own projects.

On the surface, streaming video through a web page isn’t something that a lot of web designers have at the top of their minds… This is understandable because just those two words ("Web" and "Video") imply a knowledge base that is best found elsewhere in the Envato universe…

…But what if I were to told you that adding streaming video to your pages is now easier than adding a jpg. Now that I have your attention… let’s dive into the good stuff:

Streaming Video: A History of Confusing Technology

Before I begin walking you through the step by step process, let’s first look at the history of “streaming web video” from the point of view of web designers:

Let’s pretend that you’re working on a project and you’re handling the basic front-end coding. In the past, adding streaming video to our designs has been a pretty complicated process – requiring you to know (and have a license to) Adobe Flash. Assuming you have Flash and know your way around it, you then have to get the video in the right format, import it to Flash, go through the archaic process of setting up the video, and then export it. Finally, you’d have to embed it properly in your website. Seasoned Flash veterans might be able to pull this off quickly, but for most people on the design side of things, it’s a headache.

Another possible solution would be to use a service like YouTube or Vimeo. This is fine for most people, but what about those of us who simply want to display video on the web without the branding or other extras that sites like YouTube and Vimeo add? Until recently, there really hasn’t been a simple solution for this.

Thanks to the promise of the HTML 5 Video smokescreen, I found myself trying out some of the new “streaming video solutions” recently. Of course, that was precisely when Google brought webM into its loving embrace and things got a lot more complicated than I bargained for. I essentially surrendered and stomped off with a "Let God sort it out" attitude. Clearly, the debate over streaming web video wasn’t resolved yet.

Is There an Easier Way of Doing This?

A few years back I wrote an article , The Rise of Flash Video, that eerily traces a similar debate that started when video actually hit the web and the Flash Video standard took hold. Again, the crux of the argument was, "There has got to be an easier way of doing this." Guess what? Now there is.

For the past couple of years, Adobe has been involved in the Open Source Media Framework. I have always found OSMF to be a bewildering array of technologies and techniques that, quite frankly, make my teeth ache. The technologies are seriously cool, very cutting edge and fun to poke around with – but they are aimed at developers… and if there is a way to overly complicate a simple solution, the hardcore coders of the world will find it. OSMF is no different. If you wander through the site, there is really not much in the way of simple, plug and play solutions for us humble designers to use.

It is only when you step back a couple of paces that the goal of the OSMF project becomes clear: "to provide high quality video playback experiences". That means really smooth video loading, really slick players and none of the extra stuff thrown up by Vimeo and YouTube. Where this whole thing gets really interesting for us is that now we can get in on the fun and you won’t have to learn anything new.

Alright, Let’s Dive In Now

In this tutorial I am going to show you two ways of accomplishing this. The first is "Drop Dead Simple" and the second raises the level to "Dead Simple". To get into the game all you need to do is to upload a video (one is enclosed with this tutorial for each solution) to a directory on a web site. Let’s get started:

Solution One: Use Flash Media Playback

Step 1: Upload Your Video to a Web Server

This part is pretty simple – just upload a video to your web server using an FTP program or something similar. For this demo we’ll be using the “Stockhorn.f4v” file. All you need to get here is the URL to your video. Keep is somewhere you can copy/paste for the next step.

Step 2: Point your browser to Flash Media Playback

Essentially this site offers an OSMF player for the masses. If you want to heave an mp4, flv or f4v file into your web page without knowing a lick of Flash, Actionscript or Flex, this is the place for you. What you need to do is to click the Configure Flash Media Playback button near the bottom of the page. This will open the Flash Media Playback Setup page.

Step 3: Enter the path to the source video along with a width and height for your video

You need to enter the absolute path to the video and the video’s file extension. The three formats used by Flash are flv,f4v and H.264.If you are unsure as to how these are created feel free to check out my Flash Video Basics series over at active.tutsplus. You also need to enter the width and height values of the video – the values for the enclosed video are 720 X 405. Once you have done that, click the Preview button in the Preview Player area and your video should start to play.

Step 4: Copy the Embed Code in the Preview Player and paste it into an HTML page.

If you are using Dreamweaver, open the page, select the <object> </object> tags and simply paste the code from the player into the Code view. If you test the page , you will see your video playing in the browser. At this point you only need to upload the html page to the diectory containing the video on your site.

Those are the steps and if you head over here you will see the video playing. The only thing I did differently was to include a poster frame. More on that in the next section.

Solution Two: Using Strobe Media Playback

As I said at the top, I am not going to go "all techie" here, but there is another way that is slightly more complicated than what I just showed that’s worth noting, called Strobe Media Playback.

Strobe Media Playback uses the same approach as Flash Media, but there is a ton more power under the hood. For example you can use multiple bitrates to detect connections and feed the proper vid based on the users connection speed. You can customize the controls, use it to play audio, display jpg’s and just about any media that will appear in a Flash SWF. In this example we are going to take the same "no code" approach as we did in the previous solution, but I am going to add a "twist". If you want to work along with me all of the files you will need are in the Strobe folder in this tutorial’s download.

Step 1: Upload Your Video to a Web Server

Same as before – just upload a video to your web server using an FTP program or something similar. For this part of the demo we’ll be using the “GeorgeSquare.mp4″ file. All you need to get here is the URL to your video. Keep is somewhere you can copy/paste for the next step.

Step 2: Download the Strobe Media Playback file

The version you want is Strobe Media Playback 1.5.1 release. With Strobe ,beta versions are called "Sprints" and the current Sprint includes support for such things as the new Stage Video feature of the Flash Player. When you unzip the file you have a couple of choices: place the folder at the root of your computer’s web server or upload it to the root of your web site. I created a directory named "smp" and uploaded all of the files to my web server.

Step 3: Create a Poster frame in Fireworks CS5 or Photoshop CS5

A poster frame is a great opportunity to do some branding with a video.If the first frame of the video is just going to sit there and resemble an image, why not put that image to work. In this case I simply opened a new Fireworks CS5 document that matched the dimensions of the video – 1280 by 720-, assembled the assets and saved it out as a flattened .jpg image to the same folder as the video.

Step 4: Open the setup.html document found in the for Flash Player 10.1 folder

This folder is located in the Strobe download. When it opens it will look rather familiar.The main difference between this document and the one you encountered with Flash Media Playback is the choices are far more extensive and the player is one you own …. not one located on Adobe’s site. When the page opens you will see that there are a lot of choices. The important ones, for the purposes of this tutorial are:

Embed parameters:

• source: This is the location of the Strobe Player in thew for Flash Player 10.1 folder on the server.
• width: 720. Use this width if you are using the video accompanying this tutorial. Otherwise enter the width value of your video.
• height: 405.

Flash vars:

• src: Enter the full path to the video on the server.
• poster: Enter the full path to the .jpg image used as a poster frame.
• controlBarAutoHide: false. This way the video controller is placed under the video and the poster frame.

If you want a more complete explanation of this page and the Flash Vars, my colleague Joseph Labreque, has posted a rather extensive technical overview of Strobe Media Playback at active.tutsplus.

Step 5: Click the Preview and Updates button

You should see your poster frame appear in the player. If you don’t want that big Play button over the poster frame set the playButtonOverlay property to False in the Flash vars area.

Step 6: Copy and paste the Preview Code into your web page and test in a browser.

When the file opens play the movie. The really neat thing is all of the controls are active – meaning that if you are using an HD mp4 file , your video will grow to fill the screen with little or no pixelization.

Finally! Welcome to the world of streaming Flash video without you neeeding to know anything about Flash. Click here to see this project on my site.

Conclusion

As I pointed out at the start of this piece I really don’t think Flash Video is going to disappear any time soon. Still, with the advent of a multi-screen environment, getting the same video to play on say a Droid, iPhone, Samsung Galaxy Tablet and your HD TV set is now possible. This obviously makes web designers a little nervous because… well … because embedding streaming video in the past has been rather technical. That’s not really the case anymore! As I pointed out in this piece, if you can copy and paste text into a web page, Adobe has a couple of solutions for you.

If you find this to be interesting and really want to dig into OSMF or Strobe you really should start with Joeseph Labreque’s series that kicked off at active. tutsplus, as he goes into a lot more detail about the technical stuff surrounding the streaming video debate.