Advertisement
General

Stream Web Video, No Flash Knowledge Required

by

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.

Related Posts
  • Code
    Android SDK
    Create a Music Player on Android: User Controls0d63m preview image@2x
    We are building a simple music player app for Android in this series. So far, we have presented a list of the songs on the device and allowed the user to make selections from it, starting playback using the MediaPlayer class in a Service class. In this final part of the series, we will let the user control playback, including skipping to the next and previous tracks, fast-forwarding, rewinding, playing, pausing, and seeking to particular points in the track. We will also display a notification during playback so that the user can jump back to the music player after using other apps.Read More…
  • Code
    Android SDK
    Create a Music Player on Android: Song Playback0d63m preview image@2x
    In this series, we are creating a music player on Android using the MediaPlayer and MediaController classes. In the first part, we created the app and prepared the user interface for playback. We presented the list of songs on the user device and specified a method to execute when the user makes a selection. In this part of the series, we will implement a Service class to execute music playback continuously, even when the user is not directly interacting with the application.Read More…
  • Computer Skills
    Office
    How to Add Videos to Your PowerPoint PresentationsPowerpoint and video
    Videos are a tad harder to add to your PowerPoint presentations than it'd seem at first glance. In this detailed tutorial, you'll learn step-by-step how to add local and online videos to your presentations, and get them to play back the way you want.Read More…
  • Code
    Android SDK
    Create a Music Player on Android: Project Setup0d63m preview image@2x
    The Android platform provides resources for handling media playback, which your apps can use to create an interface between the user and their music files. In this tutorial series, we will create a basic music player application for Android. The app will present a list of songs on the user device, so that the user can select songs to play. The app will also present controls for interacting with playback and will continue playing when the user moves away from the app, with a notification displayed while playback elapses.Read More…
  • Design & Illustration
    Theory
    12 Ways to Get the Most From Behance0946 behance preview400
    I often talk to other creatives about the ways they share their work online. Most admit that they really enjoy this part of their job, but many feel like there just isn't enough time in the day to devote to the task. In my opinion, one of the most important things an artist can do with their time is to share their creations with others. Read More…
  • Computer Skills
    Media
    5 Ways to AirPlay From Your Mac to Your TelevisionAirplay icon 2x
    AirPlay is by far one of the most popular features of the Apple TV. On iOS devices, it allows the easy streaming of audio and video to an Apple TV so that you can enjoy watching a movie on your television with friends and family. On the Mac, however, it's not as simple. In this tutorial, we'll show you how to AirPlay almost any audio and video content from your Mac to your Apple TV.Read More…