S3 Amazon: How to embed video in your site

By Rudolf Boogerman |
3 comments... Click to Contribute.

Embed video from S3 amazon You want to embed video or audio from S3 Amazon into your site? This article tells you how to deal with the code involved to get your videos and audios up and running. You can use this code in practically any cms or regular website. Now, for content management systems like Joomla, Wordpress or Drupal, there are plugins that take care of the code for you, but for all systems and sites that are not mainstream, you need to write the stuff yourself.
However, without an embedded video player, you cannot just play any type of media. Like FLV needs a Flash player in order to work, so you have to stick to traditional formats, like SWF, WMV, MOV, AVI, MP3, MP4 where MOV(QuickTime) , MP3(Audio) and SWF(Flash) are the safest bet because not everyone has the appropriate plugins on board to play the other formats.

Don’t panic! You only need to look at a couple of things

Below is the raw code of a video called myvideo.flv with a width of 500pixels by 305 pixels. Doesn’t look encouraging and that is how it is supposed to be Just kidding, it’s a lot easier then it appears to be:

A real mess, huh? But in the code snippet below you will see what is important to you. All the rest is just copy and paste. So, if you now select and copy the code above (CTRL+C for PC - Command+C for Mac) and paste that in a text editor where you can add color to the text, for instance WordPad(Windows) or Text editor(Mac), and safe that file as embedding-code.rtf or embed-code.doc, then half of the work is already done. Now, let’s look at the red parts in the following code:

The red part is all you need to change. In your text file, color those parts in red as well and save again. Now you have a snippet of code you can re-use again and again with a clear indication what is important to change.

Next thing, save a copy of that file and now we are going to change those parts one by one.
width=”500” means the video player is 500 pixels wide, therefore the player will display exactly 500pixels wide. If your video is 720pixels wide and 380 pixels high, you change it like this:

You need to repeat that in the last line as well. Reason is that some browser ignore the <object>-method and others ignore the <embed>-method. By placing them both in the code, you assure that most people can view or listen to your media. Let’s look at that code again:

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”720” height=”380“ title=”My video”>
<param name=”movie” value=”myfolder/myvideo.mov” />
<param name=”quality” value=”high” />
<embed src=”myfolder/myvideo.mov” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”720” height=”380“></embed>
</object>

What now? To embed video, we need to know where it comes from. That is, we have to give the exact location and name of the file. If it is a file on your own web space, you can get away with a relative path to the movie, like I show here:
<param name=”movie” value=”myfolder/myvideo.mov” />
Although this can work out fine, it won’t do in our case because we need the S3 Amazon link to the file. Luckily, your S3 application, be it CloudBerry Explorer, Cyberduck, S3 Firefox Organizer, Transmit, S3 Browser,… they all give you the option to click on the link in your bucket and get the url. The way to do that differs per application, though. It would lead too far to cover them all, so I’m going to focus on 4 of them:

Getting the url of your media in S3 Amazon

There are several options for the urls and you can use any type in your embedding code (including CNAME types), but make sure the appropriate permissions are set. Permissions for expiring urls must be set to Private, while for normal links you can set it to Public. In most applications, permissions are default set to Private. I’m not going to delve deeper into this, because the video tutorials in previous articles already covered that part:

S3 Browser: Open the bucket where your movie or audio is located and right click on the file. In the popup menu, select Generate Web urls. There are several options for the urls and I urge you to experiment with each setting. Copy the url.

CloudBerry Explorer: Open the bucket where your movie or audio is located and right click on the file. In the popup menu, select Web Url. Same thing here, various options, including CNAME (to mask the s3.amazonaws.com url and replace it with a subdomain read further below). Leave the CNAME field alone unless it is setup for you.

Firefox S3 Organizer: Open the bucket where your movie or audio is located and right click on the file. In the popup menu, select Copy URL to clipboard. While in the same menu, Get Presigned Urls means to get a link with an expiry date/time.

Transmit: Open the bucket where your movie or audio is located and right click on the file. In the popup menu, select Copy Path. The path is automatically copied. You have no options to change the type of url.

Adding the copied url to the embedding code

Let’s look at the adapted code so far again:

Select the part in that says myfolder/myvideo.mov and paste the copied url over it with CTRL+V or Command+V(Mac). Repeat that in the line with the <embed>-tag. Your code should now look something like this:

<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0″ width=”720” height=”380“ title=”My video”>
<param name=”movie” value=”http://mybucket.s3.amazonaws.com/s3browser/myvideo.mov” />
<param name=”quality” value=”high” />
<embed src=”http://mybucket.s3.amazonaws.com/s3browser/myvideo.mov” quality=”high” pluginspage=”http://www.macromedia.com/go/getflashplayer” type=”application/x-shockwave-flash” width=”720” height=”380“></embed>
</object>

If you now copy and paste that code into your html page or in the html mode of your cms editor, you should get a video, if all is well. If the video doesn’t show, the permission is probably not set as it should. Go back into your app. and check the permissions for that particular file.

Tweaking the behavior of the movie

Depending on the type of video, you can set additional parameters(attributes). Extra parameters need to be placed in the <object> and <embed> tag. Look at the code above again and notice that in the <object> tag there is this code:
<param name=”quality” value=”high” /> while in the <embed> tag you have quality=”high”
As you can see, both have quality as an attribute but it is written differently. It is not difficult to get this right once you have done it a couple of times.
OK, we now can add the following attribute: autoplay, like this:

There are quite few extra parameters and quite a few are default true, meaning, they are enabled. For instance, the attrubute controller is default set to true, so if you do not want to show the play button and progress bar, you could set: <param name=”controller” value=”false” /> and for embedding: controller=”false“.
With QuickTime movies you can even set the end time of the movie, like: endtime=”3:30:22.5″.However, you have to realize that many parameters depend on the type of media file. What is good for QuickTime is often no good for SWF or WMV. Therefore, it is always a good idea to google the terms “embed parameters + file type” to find a list of these attributes. For instance, here is the list for QuickTime.

When you have an understanding how embedding works, it becomes easier to understand how video player plugins operate and, in its turn, makes it easier to work with them. Most plugins are quite easy to handle but some have advanced features, and those are discussed in the next article! But before we close off here, I want to explain something about masking the url:

Masking the S3 Amazon URL

The urls from S3 Amazon(sometimes called S3 AWS), are long and rather ugly. There is a way to mask this, either to make it look nicer or to brand your own domain by using the CNAME url. This is how it works:

You create bucket which we now call for experimen’ts sake support.raboo.com. Yes, buckets can have dots in them.
And we upload a file called myvideo.mov.
The resulting url will be: http://support.raboo.com.s3.amazonaws.com/myvideo.mov
On your web server, do it yourself or ask the host provider to create a subdomain for you. In this case support. If your main domain would be raboo.com, this would be how you get there: http://support.raboo.com
Once you have that subdomain and the bucket, you can use it as a mask, thus http://support.raboo.com.s3.amazonaws.com/myvideo.mov can be referenced to as http://support.raboo.com/myvideo.mov

The advantage is that nobody knows where the video or audio really comes from and secondly, it looks better. Although during the download, you might see some activity in the statusbar below that indicated S3 is involved in this, so as a reason to hide that you use S3 Amazon this method is a bit pointless. You can see this activity very good when you load a Vimeo movie for instance. Pay attention to what happens in the status bar (below in your browser)

Topics: Blog stuff, Free utilities, Products, Video Channels/Networks, Video and audio techniques, Video tutorials | Site search | Write comment
This article has 3 comments.

If you have any questions or suggestions, you can leave a comment on this article below. Comments are subject to an approval process before they are published. By posting a comment, you agree with the terms of use.

3 Responses to “S3 Amazon: How to embed video in your site”

Flash CMS Website Says:
February 8th, 2010 at 5:43 am

Thanks for this profound tutorial.
Now it’s clear how to video player plug-ins operate.
Paul Says:
February 25th, 2010 at 10:51 pm

What about the RTMP streaming, how do you make that work?
Rudolf Boogerman Says:
February 26th, 2010 at 9:15 am

Good question, Paul. I do not use RTMP streaming myself but I do know that you need a Flash player in order for that to work. Tthe videos have to be FLV, which is Flash Video. Regular embedding like shown above will not work.
The most used and versatile player around (it is used by YouTube as well) is JW Player 5 from http://www.longtailvideo.com/
Players like that come with a range of settings which are comparable with embedding code, but have extra parameters. For the “filename” this becomes:

<param name=”movie” value=”streamer=rtmp://localhost/anyfolder/&file=yourmovie.flv” />

If you have a Wordpress blog or any other cms, you can install a Flash player plugin and then for the name of the file, you fill in: streamer=rtmp://localhost/anyfolder/&file=yourmovie.flv

That should do the trick.

Miracle Tutorials

"Video tutorials and articles on podcasting, videocasting, video channels and content management"

Topics

What's New?

Tags/Keywords

Search this site