Authoring a Web Page for Flash Linked Downloadable Streaming with Dreamweaver CS4

Posted by Derrick on February 11, 2010 under Video Streaming and Compression | 3 Comments to Read

Authoring a Web Page for Flash Linked Downloadable Streaming with Dreamweaver CS4 is the topic of this tutorial.  The Flash Linked .SWF and .FLV files we’ll be using in this tutorial were creating during encoding with Sorenson Squeeze 6. It will be helpful to first complete the Tutorial – Encoding Flash Linked Downloadable Streaming Videos with Squeeze 6.

So in this tutorial you’ll learn how to author a .FLV video file that has a .SWF player/skin surrounding it.  What’s nice about Squeeze is you can use it to create your .SWF and .FLV files but it also creates an .HTML page with coding that you can use to  Author your Web Page in Dreamweaver.

OK. Enough for the introductory items. Time to get started with the tutorial.

At the start-up screen in Dreamweaver in the center column click the Create New HTML button.  Before you do anything else click the Split screen button at the top of your web page.  This way you can see the Code view and the Design view.

In your new web page you’re going to first create a new table to help manage where your video is on the screen.   First, position your cursor in the Design view.  Then, click the Insert Pull-down Menu and select Table.  This will open a dialog to adjust your Table.  For this table you’re going to create a Table that has 2 Rows and 1 Column.  Type 2 in the Rows Text Box and Type 1 in the Columns Text Box.

Now you need to position the Table in the center of your Web Page.  First select the edge of you Table.  It should appear selected similar to the image above.

Once your Table is selected you can adjust the location.  From the Properties window click the Align Drop-down and choose Center to place your Table in the center of your Web Page.

Let me explain something.  This is example of how the folders are structured for the website for this tutorial.  Let’s look at two important folders, the html folder and the movies folder.  On your desktop create a folder called Tutorial_Website and inside the folder create a folder called html and a folder called movies.  On your website you’ll also create a folder called html and movies.  Essentially the same folder file structure you have on your website should be the same as what you have on your desktop.  Now let’s move on.

Prior to this tutorial we encoded our Flash Linked .SWF and .FLV files using Sorenson Squeeze 6.  To learn how to encode your Flash Linked Downloadable Streaming videos visit the Tutorial -  Encoding Flash Linked Downloadable Streaming Videos with Squeeze 6.

Now, Take your .FLV and .SWF files that were created in Sorenson Squeeze 6 and move them to your movies folder.  Also, once you move them in your movies folder upload the .SWF and .FLV file to your movies folder on your Web Server.  Your files are now where they need to be for the authoring process.

Next, save your .html Web Page by Navigating to the File Pull-down Menu and clicking Save button.

You need to save you .html Web Page in the html folder that you create earlier.  Name your file FlashLinkedTutorial.html and click the Save button.

It’s now time to author your video.  The reason you created the Table that way you did is so that you can place your video in the bottom Cell and add a Title in the Cell above.  Click in the bottom Cell of your Table.  You should see your cursor appear at the the beginning of the bottom Cell.

Next go to the Insert Pull-down Menu, Choose Media then SWF from the Sub-menu.

Navigate to your .SWF file, which should be located in your movies folder.  Notice as I select the .SWF file under the URL Text Box it displays ../movie/Car02_F8_flashlinked.swf.  This displays this way because the html and movies folders are parallel to each other. That is why it is important to first save your .html page before adding you .SWF file and it also why it’s important to put your .SWF and .FLV file in the movies folder first.  With your .SWF selected click the OK button.

The bottom Cell of the Table should display your .SWF file.  In the Top Table Cell type My Video Name.

With the Top Cell still selected, from the Properties window click the Horizontal Drop-down and choose Center.  Now your text will be centered.

Now it’s time to work with your HTML code in the Code View.  Notice that above for the path to the .SWF file it displays ../movies/Cars02_F8_flashlinked.swf.  This is good but we need to add the flashvars info for the path to the .FLV file.  Remember the .FLV is located in the same folder as the .SWF file.  The flashvars information will be added in both references of the Object Tags.

We can use the code in the .html Web Page generated in Squeeze 6 along with the .SWF and .FLV files. Open the .html Web Page in Dreamweaver.  My file is titled Cars02_F8_flashlinked.html.  When the page opens copy the flashvars code similar to above and choose Edit from the Pull-down Menu in Dreamweaver and select Copy.

Now paste the code in both references of the Object Code similar to above.  Once you paste the code make sure you add the proper path to your .FLV file.  Before your file name type ../movies/.    Next, Save your .html Web Page.

Finally upload your FlashLinkedTutorial.html to the html folder on your Web Server.

Now you can pull up the URL to your Flash Linked Downloadable Streaming video in your Web Browser.  The URL should be http://www.yourdomainname/html/FlashLinkedTutorial.html

This is what your Web Page should display when you pull it up.  You now have a Flash .FLV video surrounded by the .SWF Aluminum Player skin from Sorenson Squeeze 6.   The video should automatically play.  Congratulations on authoring your Flash Linked Downloadable Streaming video using Dreamweaver CS4.

Sorenson Media Honored as Top Online Video Company

Posted by Derrick on December 21, 2009 under Video Streaming and Compression | Be the First to Comment

Sorenson Media announced that it has been named among the top online video companies of 2009 by FierceOnlineVideo. Released annually, the “Fierce 15” recognizes companies that provide the “skeleton, muscle and flesh of the online video industry.”

In his article, Editor Jim O’Neill highlights Sorenson Media’s rich history of innovation in the online video industry as well as its profitability, a unique quality among competitors in its space. Sorenson Media’s tools and services have been used by the largest companies, including Apple, Adobe and YouTube, and Sorenson Squeeze remains the gold-standard video encoding application.

“Video encoding stalwart Sorenson Media has been around since, well, online video’s Dark Ages,” O’Neill writes, “and it’s done something few of its competitors have managed to do: it’s made money.”

Last month, Sorenson Media released Sorenson Squeeze 6, which provides users a number of new features that make the process of encoding and publishing video easier, including new review and approval capabilities and the ability to publish video directly to multiple sites, such as YouTube, Twitter and Sorenson Media’s own Sorenson 360 online video platform. In May 2009, the company launched Sorenson 360 to enable users to more affordably and easily publish the highest quality video content on the Internet through seamless integration with Sorenson Squeeze.

“Being named to the Fierce 15 is a considerable achievement for the company and caps an outstanding year for our team,” said Peter Csathy, president and CEO of Sorenson Media. “With our long-standing history in the online video space and an ongoing focus on innovation, Sorenson Media has differentiated itself in the market to truly affect the future of online video. We appreciate this recognition from FierceOnlineVideo, particularly because it is a trusted source of information for anyone who follows the online video industry.”

This recognition comes just a few weeks after Streaming Media magazine gave Sorenson Squeeze the Reader’s Choice Award for Best Encoding Software (under $1,000), and Sorenson 360 was a finalist in the Online Video Platform (Premium) category. Additionally, USA Today noted Sorenson Media’s staying power in a November 11 article stating, “Every time you see a video online, you probably have Sorenson Media to thank.”

Setting the File Output Location in Sorenson Squeeze

Posted by Derrick on November 6, 2009 under Video Streaming and Compression | Be the First to Comment

Setting the file output location in Sorenson Squeeze is done inside the Squeeze Preferences.  This is valuable when you want to have all of your encoding output to a specific location.  Here’s how to define the Default Output Location in Squeeze.

Navigate to the Squeeze pull-down menu and select Preferences.

By default Same as Source is selected.  To set another location for your output files

click the Radio button and the Browse button to navigate to the new destination.

Navigate to the folder that you want to save files to.  In my case I’ll select the Movies folder.  Next click the Choose button.

Now the Movies folder appears as my Default Output Location.  All files encoded will now go to this output destination.

Downloadable Streaming with Sorenson Squeeze and Dreamweaver

Posted by Derrick on October 19, 2009 under Video Streaming and Compression | Be the First to Comment

Downloadable Streaming with Sorenson Squeeze and Dreamweaver is very common.  Today we’ll show you how to encode a Real Media video with Sorenson Squeeze and then author that video in Dreamweaver with a RAM file.  RAM files are beneficial to use because you can hide the absolute path to the video file on your Server.  Let’s begin.

Open up Sorenson Squeeze and click the Import File button to bring your source files into Squeeze.

When you click the Import File button you’ll see a dialog window open up. Select you file and click the open button.  For this tutorial I’ll select the Step10DraggingaPreset.mov file and click the Open button.

Now you’ll can see you source file in Squeeze.  Notice that the Batch Tree display the file Step10DraggingaPreset.mov video ready for encoding in the Batch Tree.  You can also see a still frame of the video in the Squeeze Preview Window.

Let me take a moment to talk about the source and explain our approach for encoding this video.  The source is a 720 x 480 video with Animation for the video codec and IMA for the audio codec.  This is a video tutorial that has edited screen captures. Our delivery will be for downloadable streaming with Real Media.  OK, now let’s move forward with out tutorial.

Now, that we have our source ready for encoding we need to create our compression preset.

Navigate to the Audience presets.  Switch to Format view by adjusting the pull-down and  open up the Real Media presets (Real Media presets are only available for PC users).  Once you open the presets click the Lg setting.  Once selected click the Copy a Preset button which is the second button from the left.

When the Audio/Video Compression Settings dialog opens your preset will be labled Lg copy.

By highlighting your text in the Name text box you can change the name.  For this tutorial change the name of your preset to 1000k_DL.

Now it’s time to custom your Real Media downloadable streaming preset.   For the video codec we want to make sure RealVideo 10.  This is the latest codec for Real Media and it’ll give you the best quality. Since we’re doing downloadable streaming we want to use 2-Pass VBR for our compression method.  We definitely want to vary our bit rate to achieve the highest quality for our output.  For our the Video datarate you can type in 1000 kbps.  For Frame select 640 x 480 and select Maintain Aspect Ratio.  For the frame rate you can use 10 frames per second since this video is screen captures with very little motion.

For our Key Frame Every value we’ll use 300 frames.  This will produce a key frame at least every 300 frames.  A higher keyframe value or a longer period before new key frames is better with this type of content since many of the frames are similar.  Since our Frame Rate is 10 frames per second.  This Key Frame Every interval produces a key frame a least every 30 seconds.  If the codec feels that it needs to insert a key frame it will do it automatically.  You can need the Video Mode at Normal with the default Startup Latency of 4 Secs.

Moving on to the Audio settings you can select 64 kbps for the audio datarate leaving 16 for the Sample Size, 44.1 kHz for the Sample Rate with Stereo audio.

Once you’ve made all of the adjustments to your Audio/Video Compression Settings you can click the OK button.  Now you have a Real Media preset called 1000k_DL inside your Audiences.

Now that your setting is created you need to apply it to your video source.  Select the Real Media 1000k_DL setting and drag it over top of your source.

You can now see the compression setting applied to the video in the image above.  Once applied it appears below the source video.

Before we encode the video we need to create a filter preset for this encode.  Under the Filters select the Generic Web filter setting. Once selected click the Copy a Preset button.

You can now see the new copy of the Filter preset labled Generic Web Copy in the Name Text Box.

Select the text and rename the Filter preset Deinterlace_Blend.  This gives our filter a good description just in case we want to use it for other projects in the future.

In the filter preset there are checked boxes that a enabled which shows the values being used in this setting.  For your setting you should have the Deinterlace, Contrast, Brightness and Audio Volume filters checked.

Let’s adjust the Deinterlace filter first.  Generally, when performing encodes with screen captured tutorials content it’s better to Deinterlace by using a Blend where the 2 fields are blended together.  This works better than totally discarding one of your fields.

Adding a Contrast and Brightness boost is good for delivering web content so we’ll leave our Contrast value at 15

and you can leave your Brightness value at 10.

For the Audio Volume select Normalize from the pull-down and input a value of 90.  This will increase the lower audio levels to match the higher audio levels.  There’s also an option to do a volume adjust by selecting Adjust from the pull-down menu.

Once all of your adjustments are made click the OK button to save and close your filter.

To apply your filter select Deinterlace_Blend filter and drag onto your Real Media 1000k_DL preset that you have applied.

Notice the Deinterlace_Blend filter appears on the bottom of your applied preset.

To start encoding click the Squeeze It button.

When you video has finished encoding you will see Complete displayed in the Progress section of the Batch Tree.  By default the file will output to the same folder as your source file.

Once your Real Media file is encoded you can author it for your website.  When you are authoring web pages it’s important that you have a folder on your desktop that has the same folder structure as your website.  For example, if you have a folder called html, images and movies in the root directory of your website then you should have folder on your website with the same folder names similar to the image above.  In this example we have a folder for the website on the desktop called training_website.

Before you start authoring it’s best to movie your encoded Real Media video to its destination on the web. Navigate to the output location of your video file and copy it to the movies folder which should be inside the training_website folder that you are using for this tutorial.

Open Dreamweaver and select the Site that you want to access.  In my case I’m using Freeman for Classes.  Make sure you click the connect button to the far left right under you site.  Next, click on Expand button to expand your view.  You should be able to see your Remote Files and your Local Files.  Above is view on the Local Files. This are the files sitting on your desktop.  They are located on the right inside Dreamweaver in the Files view.

The Remote Files are located on the left.  Notice that there is a movies, images and html file in both locations.

If you open up the movies folder you can see your Real Media Downloadable Streaming video that you moved to the movies folder earlier.  Let’s upload it to your website.  Select the Real Media video and drag it to the movies folder on your Web Server.  This is where the Remote File are located.

When the file starts transferring or uploading to your website you’ll see a Background File Activity dialog appear.  This dialog provides you with a status on your upload.

Moving on, let’s author the Real Media video for the web.  First, let me talk about what we’re doing here in this step.  We’re going to create a web page with a link that when clicked will open up our Real Media downloadable streaming video.  However, we want to hide the location of where the file is stored on our server along with any IP address information.  To do this we’ll use a RAM file which is a text file with a .ram extension that holds the absolute path to the Real Media Download video.  This file will sit on our server in the same folder as our video file.

OK.  Open Notepad

and type in the following information highlighted in the image above.

Type in http://www.yourwebsite.com/movies/youvideoname.rmvb?title=”My Video”.  Make sure you put the URL to the Real Media video on your own website here.  This is where your video is located.  It you followed the tutorial correctly your Real Media download streaming video should be located in your movies folder.

Next, choose Save from the File Pull-down menu and call the file RM1000DL.ram.

Place the RM1000DL.ram file in your movies folder.  Next upload the 1000DL.RAM file you created to the Movies folder on your web server.

Once your Real Media RAM file is on-line you can create your web page.  In Dreamweaver select New from the File Pull-down menu.

When the Dialog Window opens choose HTML

and then choose Create.

Now Save your HTML page and call it RM1000DL.html.  Make sure you save the RM1000DL.html page in your html folder inside your training_website folder.

Next, move you cursor to the top of the page in the Design View similar to the image above.

Navigate to the Insert Pull-down menu and select Hyperlink to add a link to our RAM file.

Remember, our RAM file holds the absolute path to our Real Media Downloadable Streaming file.  When we create our link to the video we don’t have to reference the video, we can simply reference the RAM file.  When viewers click on the link if Real Media Player is installed the video will be automatically open in the player.

Let’s continue.  For Text type in My Real Media Video.  For Link you need to put the path to your RAM file.  This can be a relative path by typing in ../movies/RM1000DL.ram.  The reason why we can use this relative path is because the html folder is parallel to the movies folder in this tutorial.  It’s best to always use relative paths.  One benefit is that you can view all of your pages from your desktop.  A greater benefit is that it’ll make your website portable to another Web Server with a different Domain Name. Select _parent for the Target.

This is what you new link looks like.

We’re almost finished.  Save your file by selecting Save from the File Pull-down menu.

In the File View in Dreamweaver open the html folder and click on the RM1000DL.html web page.  Drag it to the html folder under Remote Files on the left of the File View.

If you see a dialog that asks you if you want to Put dependent files? you can click No.

Now that your new wep page is created and is on your website .  Type in the URL to your new page.   This should be http://www.yourwebsite.com/html.RM1000DL.html.  You should then see the your page appear.  Click on the link that displays My Real Media Video.

With Real Media Player installed you should see you video open up in the Real Media Player similar to the image shown here.  Congratulations on encodiing a Real Media Downloadable Streaming video in Squeeze and authoring it in Dreaweaver!

Video Podcasts Are One of the Quickest Ways to Get Content On-line

Posted by Derrick on October 9, 2009 under Video Streaming and Compression | Be the First to Comment

Video Podcasts are one of the quickest ways to get content on-line.  If you need to start putting videos on-line you should consider this approach.  Today is a new day for video editors.  Many video editors and professionals are now being tasked with getting streaming content on-line along with the continuation of other video production duties.  In order to simplify your workflow you should consider creating a Video Podcast.  You can go this route if downloadable streaming videos work for your delivery and if you can sell your organization on the benefit of having videos available for view in iTunes, on Video iPods and on iPhones.

Once your Video Podcast is set-up the process for updating new video content is easy.

If your are fortunate to have a version of Sorenson Squeeze 5 Pro around which supports compression presets for Video iPods, updating on-line content becomes a very quick and simple process.  Since you can use Squeeze’s automatic FTP feature there’s short list of what you’ll need to do to get your content on-line:

Here’s a short tutorial of the process for adding videos to your Video Podcast.

Step 1. Import your video into Sorenson Squeeze 5 Pro
Step 2. Apply one of the Video iPod presets
Step 3. Apply the appropriate filters for encoding

Step 4. Apply the Copy to FTP filter to your video source

Step 5. Double click the Copy to FTP filter to adjust the settings

Step 6. – Now that the Copy to FTP dialog is open you can adjust the settings.  Using this feature will automatically transfer a copy of your output file to your web server after encoding.  To use this feature you have to have an FTP account set-up for uploading videos to your web server.  Go ahead and fill out the required information which includes: User Name, Password, Host and Path to your videos.  Once your information has been typed in click the Test button and you should see a message that displays “Test was successful”

Step 7. – Once encoding is complete your video will be automatically uploaded to your web server.  Open up Blogger or the tool you’re using as the blog to your Video Podcast.   Add the URL for your video.  Look at the image above to see how to add your URL information.   Once you save and publish your blog page your video will be available via your Video Podcast.  Sometimes it might take a few minutes to appear.

It’s that simple.  Now you see why I say Video Podcasts are one of the quickest ways to get video content on-line.