Posted by Derrick on December 1, 2009 under Video Streaming and Compression | 
Authoring Flash Videos with Dreamweaver and the Web Stunning Player is something that many will start to do. Many have heard of the JW Player for authoring Flash content but the Web Stunning Player is another player available. In this tutorial you’ll learn how to install the Web Stunning Player as a Dreamweaver Extension and use it to author a Flash Real-time Streaming video.
Let’s get started. First go the Web Stunning website and download the Web Stunning FLV Player.
Once you download the player double-click the .zip file and install the Web Stunning Video Player Extension for Dreamweaver.
When you finish installing the Extension click the OK button.
With the Web Stunning Extension running you can see it displayed in the Extension Manager. Notice that the Web Stunning Player is supported on Dreamweaver 8. It also works with newer versions as well. Now we’re ready to start authoring our Flash Real-time Streaming video.
To get started we first need to create a new .html web page. In Dreamweaver go the the File Pull-down menu and select New.
At the dialog window choose HTML
and click the create button.
With your page open click Save from the File pull-down menu and save your file as WebStunningFlash.html. You can save your web page to where you save your .html pages.
Once you name your file choose your destination click the Save button.
Now let’s insert a table to help keep the video where we want. Select the Insert Pull-down menu and choose Table.
In the Rows text box type in 2 and in the Columns text box type in 1.
Next, click the OK button
Select the newly created table and in the Properties Inspector under Align choose Center from the Drop-down menu.
Notice that there are two rows for the table with only one column. In the first row let’s give our video a name. Type in Web Stunning Flash Real-time Streaming for the name. This will appear above the video. Now, to insert the streaming video you’ll need to select inside the second row. This space is where your video will appear.
From Dreamweaver, select the Insert Pull-down menu, then choose Media and from the Sub-menu click the Web Stunning Video Player.
Now you can see the Web Stunning Player options available.
First let’s look at the Playlist Tab. For this tutorial you can remove all the options outside of what is mentioned here. Remember we are authoring a Flash Real-time Streaming video which is a video that is sitting on a Flash Streaming Server.
For this exercise we’ll use a video titled bunny_532L_RT_HD12fpsS.flv that is located in the content folder of our Wowza Server. We are using the Fastplay application for On-demand streaming.
For the next step specify the name of your Flash .flv file. For my video I’m using bunny_532L_RT_HD12fpsS.flv. Under Element Title type your video name.
Under Type of Main Video Select the RTMP Stream (rtmp://Server_Path/Stream_Name) option. For Main Video type in RTMP for the protocol, the IP Address to the Server, the application name and the name of your file. In my case I’ll input the following:
rtmp://ServerIPAddress/fastplay/bunny_532K_RT_HD12fpsS.flv
You should see your video that you’re authoring displayed in the Preview. Select Save to retain your information. Now switch to the Player Tab.
On the Player Tab go down to Playback and click Auto Play. Save your settings and click the Insert/Update button on the right hand column.
Once you choose Insert/Update your Flash video populates the 2nd row of you table in Dreamweaver. Save your .html web page by choosing Save from the File Pull-down menu. Now upload your .html web page to your website. When the Dialog appears for Put dependent files? choose Yes. This will make sure any associated files get to your web server.
Once you upload your .html web page refresh the server and type in the URL to your web page in a Web Browser. Your video should appear and play automatically. Here’s what my video looks like using the Web Stunning Flash Player.
Posted by Derrick on October 19, 2009 under Video Streaming and Compression |
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!
Tags: .ram, 2-pass VBR, Authoring, Compression, deinterlace, Downloadable, dreamweaver, encoding, key frame every, page, preset, Real Media, Real Media Player, setting, Sorenson, Squeeze, streaming, web
