Skip Navigation
IT Connect
Connecting You to Information Technology at the UW

 

Creating and Posting Streaming Media

IT Connect > Web > Streaming > Creating and Posting

Introduction

Wading through the different technologies, terminologies, and types of media and streaming systems can be a confusing and complicated process. However, there is an easy way to publish your streaming content! The following is a set of instructions that should work for almost all types of media that will help you quickly and easily set up streaming media that will operate on virtually any browser with Adobe Flash support. All of the software and tools we use are either open source or free for use in educational websites, and work across many different operating systems.

This process has three steps:

  1. Encoding the Video
  2. Uploading the Video
  3. Publishing the Video

This process may be a little confusing at first, but you'll get the hang of it in no time. Let's begin!

Encoding the Video

  1. StepsActions
  2. First off, you need a "source" video. This is the file that you've edited, chopped, mashed, and otherwise tweaked into something you're ready to post to the web. Let's say that this video file is called squid_farming.avi, as you did a study on this particular subject last quarter and want to share the results with your peers. The .avi part tells you what kind of movie container it is. Since our converter program can deal with almost all types of content, we don't need to worry that your filename is something different than this.

  3. Chances are, squid_farming.avi is not in a format that our streaming servers recognizes as a format they are able to stream. You will want to download and install the program HandBrake. Handbrake is a free and open source program that runs on Windows, Mac OS, Ubuntu, Fedora, and other operating systems.

    Click here to access the Handbrake download page

  4. Install Handbrake and open it up once installed.
  5. The first thing you'll want to do is import your "source" file into Handbrake. Click on "Source" in the upper left hand corner, and then select "Video File." Navigate to your file, and click on "open." The interface may grey out at this point, but don't worry. It's just processing your file. Wait a few moments and it should be ready again.
  6. After Handbrake finishes processing, you'll get to make some decisions about how you want the file to be. First, you'll want to select the "Normal" preset listed under "Regular" on the right hand of Handbrake.
  7. After selecting the "Normal" preset, you will need to click on a couple of checkboxes. The first is "Web Optimized." This must be checked. Next to "Web Optimized" is "iPod 5G support." Go ahead and check this one too.
  8. Tweak any other settings as you see fit, and once you're ready, click on "Start" in the upper left hand corner. Depending on the length of your video file and the speed of your computer, this may take quite a long time.
  9. Eventually Handbrake will finish. That's it! Congratulations, your file is now encoded and ready for streaming. It should have the name squid_farming.mp4 now. If you have VLC or another program that can play .mp4 files, now would be an excellent chance to make sure the file works locally.

Uploading the Video

  1. StepsActions
  2. Now that your video is encoded, you'll need to place it in a spot where the public can access it. This location is called public_media, and you can access it with a few different methods.
  3. You can upload this file using a sFTP program. You can find instructions on the following site:
    Moving Files to your Streaming Directory

    You can also mount your public_media folder right on your computer's desktop using the CIFS protocol.
    Publishing to your public_media folder using CIFS
  4. You can find your file at:
    http://stream.uw.edu/yournetid/squid_farming.mp4
    Be sure to replace "yournetid" with your actual NetID.

Publishing the Video

So far we've encoded your video, and uploaded it to your website. Now the final step is to set up a browser-based viewer so people can easily watch.

  1. StepsActions
  2. First, you will need to download the JW Player files to your NetID's public_html folder. Log into homer.u.washington.edu using a secure terminal program. Then enter in these commands:
    cd ~/public_html
    wget http://www.longtailvideo.com/jw/upload/mediaplayer.zip
    And then unzip it:
    unzip mediaplayer.zip
    You will now want to rename it:
    mv mediaplayer5.7 mediaplayer
    Replace "mediaplayer5.7" with the actual extracted location of the folder.

    This will place JW Player in a folder called "mediaplayer" in your public_html folder.
  3. Now you will place the actual HTML for displaying the video. You can copy/paste the following HTML and modify the fields in bold to match your own settings:

    <object type="application/x-shockwave-flash" data="http://staff.washington.edu/nikky/mediaplayer/player.swf" width="640" height="360">
    <param name="movie" value="http://staff.washington.edu/nikky/mediaplayer/player.swf" />
    <param name="allowFullScreen" value="true" />
    <param name="wmode" value="transparent" />
    <param name="flashVars" value="autostart=true&controlbar=over&file=http://stream.uw.edu/webtest/handbrake.mp4" />
    </object>
    <p>
    <strong>Download video:</strong> <a href="http://stream.uw.edu/webtest/handbrake.mp4">MP4 format</a>
    </p>
  4. That should be it. Visit your website and check out your video. Send an e-mail to help@uw.edu if you have any questions.