S3 Amazon: How to embed video in your site

By Rudolf Boogerman |
34 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, S3 Amazon/CloudFront, Video Channels/Networks | Site search | Write comment
This article has 34 comments.

MiracleTutorials.com is powered by S3Media Stream™

S3Media Stream™ empowers you to quickly and easily setup video and audio on your site. Whether you’re a novice or an advanced media professional, S3Media Stream helps you display video and audio with options beyond your imagination.
It’s so simple, yet so powerful, thanks to the easy-to-use Wizards combined with S3 Amazon and CloudFront. And not to forget, you can monetize your media in a variety of ways!

You think streaming video is not for you? Check out the benefits of S3Media Stream for WordPress® at wp21century.com. Streaming video & audio was never so affordable and convenient.

34 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.

34 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. You need a Flash player in order for that to work. The videos have to be FLV, MP4 or MOV. Regular embedding like shown above will not work.
The most used and versatile player around (it has been 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.
eve Says:
October 27th, 2010 at 2:17 pm

so if i copy this code and embed it to my blog on wordpress am I done or do i need to downoad the flv player plugin. still dont get it?
Rudolf Boogerman Says:
October 27th, 2010 at 3:26 pm

As long as you stick to mov, MP3 or swf, you do not need a player. You can indeed copy this code, adapt the red parts and put it in your blog in HTML mode.

However, this article is written for non-cms users. Since you work with WordPress, it might be easier to work with a plugin because you have more choices, like MP4 and FLV and almost guaranteed everyone can play your media.
If you don’t want to do that, and embed the code yourself, you need to enclose the embedding code with <code></code> tags or it won’t work in most cases. Again, a plugin will make life much easier, though. Here is a list of useful plugins: http://wordpress.org/extend/plugins/search.php?q=video&sort=
Hope this helps?
howard Says:
November 8th, 2010 at 6:13 pm

hey, i’ve tried the code but after i uploaded my html file to my server the videodoesn’t show. why’s that?

i have already double checked the amazon’s server is in the correct setting

http://paidtoshopguide.com/video/ptsvid.htm
Rudolf Boogerman Says:
November 8th, 2010 at 8:59 pm

Hi Howard,

Your link is incorrect. http://s3.amazonaws.com/ptsvid/pts.mov
should be http://ptsvid.s3.amazonaws.com/pts.mov
When you click on this link, you will see it works.

Hope this helps?
howard Says:
November 9th, 2010 at 4:34 pm

hmm weird..
both links worked for me,
but i still made the changes according to your advise… still not working??
http://paidtoshopguide.com/video/ptsvid1.html

do you use EzS3? why and why not?

thanks
Rudolf Boogerman Says:
November 9th, 2010 at 6:31 pm

There is an error on the server when I click on the movie link in the source code. It is often a give-away for problems when you try to play such a link in your browser. This is the message I’ve got: The server encountered an internal error or misconfiguration and was unable to complete your request.
Did you create a CNAME for the bucket ptsvid? If so, replace the ptsvid.s3.amazonaws.com part with that CNAME.

I do not use EzS3 because I developed my own plugins for Joomla and WordPress which do basically the same as this application except that you pay a one time fee instead of a monthly fee of $20.
For other site types, I simply use JW player from Longtailvideo and add the embedding code myself.
Now, that is a personal approach. I have no objection against EzS3, so if you want to use it, go ahead, try it out for a month and perhaps let us know how it went.
Ron Winckler Says:
December 1st, 2010 at 1:48 am

Hi Ralph,

Great stuff here, however, I want to embed a weekly radio program I host on Maui. I have the video embed thing down but need to accomplish separate embedding for the radio prog. I am using Drupal, programs are stored on Amazon S3 in Mpg4a format. So far, I have been successful –in bruising my forehead– as I bang it against the wall when attempting the embedding of the program. I would gladly pay for assistance, donate to a charity, sell you my wife for a night, lend you my Ferrari for a day, anything to get this to work. Anyway, thanks for any help, paid or otherwise.
Rudolf Boogerman Says:
December 1st, 2010 at 9:23 am

Hi Ron,

No need to spend money, there is a simple answer to this: What you best do is to download a Drupal plugin that handles audio and video for you. Here is the URL: http://drupal.org/project/jwplayermodule.
It doesn’t say anything about audio, but I know for a fact that JW player supports audio, specifically M4a or Mpg4a as you call it. Just follow the installation instructions and how to use it and you will be fine.

An additional advantage of using a plugin is that you can set a poster image for every audio, which makes it more attractive. Here is an example of such an approach: http://www.womencorp.org/andrew-patricio-interview/ It orks with JW player too.
I hope this is helpful? Let me know if you need further assistance.
Ron Winckler Says:
December 1st, 2010 at 12:54 pm

Thanks, I will play around with the JWplayer. You’re a good man.
Ron Winckler Says:
December 2nd, 2010 at 7:26 pm

Hi Rudolf,

I am slogging through the myriad options for my radio program site using jwplayer. Have perused the many pages on Drupal and have found little that helps.
As is usually the case, I am missing the bits and pieces that allow me to post my programs stored on Amazon S3 and served through Amazon Cloud. Simply put, I want to create individual nodes (Drupal) with a simple audio player displayed.
I hate to burden others with my lack of knowledge and will gladly pay for guidance. The video embed you provide gets me -almost- there.
I’m really not sure which modules other then jwplayer should be used, nor am i sure of the exact – syntax. Almost everything on this subject is tilted toward video and the differences, though subtle i’m sure, are not apparent. Usually, I over-think these issues and suspect this is the case.
Rudolf Boogerman Says:
December 4th, 2010 at 6:07 am

Hi Ron,
I have no experience with Drupal myself. I have installed a test version to see how it works and will report back to you soon, probably tomorrow.

In the meantime, I need to know two things from you:
1. Is your bucket that contains the test audio set to a streaming distribution or is it just a download distribution?
2. Is the audio itself set to private (see ACL settings) or public?
Ron Winckler Says:
December 4th, 2010 at 4:20 pm

Hi Rudolf,

1.The bucket is set to streaming.
2.The audio is set to public (using Firefox S3 tool). “Everyone” and “Authenticated” can ‘Read’ with no other permissions except for the Owner (myself).

THANK YOU!!!
Rudolf Boogerman Says:
December 5th, 2010 at 7:16 pm

That should be OK unless there is something wrong with the encoding of the file. For streaming, your audio must be encoded with AAC 16bit, 4.1Mhz.

I couldn’t get the module to work in Drupal yet, but I’m working on it.
Ron Winckler Says:
December 6th, 2010 at 5:54 pm

Thanks Rudolf, I’ll check the encoding. Drupal, while exceptionally flexible certainly requires a lot of tweaking. Is there a way to donate to your site to compensate you for your effort?
Rudolf Boogerman Says:
December 16th, 2010 at 1:36 pm

Is there anyone who can help Ron out on Drupal? I really do not understand how it works and I have no time to study the manuals.
Let me know and I put the the two of you together.
Sorry about that , Ron. I’m fine with WordPress and Joomla, but Drupal is an enigma to me.
Ron Winckler Says:
December 19th, 2010 at 4:15 pm

Hi Rudolph,

I certainly understand. After using Drupal for almost a year, I’ve found that each introduction of a new piece, effective audio presentation in this case, also introduces
I am reconsidering this content delivery platform as this is not what
Rudolf Boogerman Says:
December 20th, 2010 at 3:54 pm

What you could do is send me a link to a page that contains an audio(even if it doesn’t work) so that I can look at the source code. it often reveals problems.
Lothar Says:
January 18th, 2011 at 8:01 am

I´m not using wordpress or joomla, but another CMS-System. Is it possible to use CrossFTP for Mac to create a useful codec to put into the site?
I think HTML-codec will work.

Your site is wonderfull und I love it so much to get informations because I´m a newbee
Lothar Says:
January 18th, 2011 at 11:24 am

Does the tip with masking the amazone url only work with a subdomain or is it possible to use a normal domain with a subsite like: testuser.com/videotraining?
Rudolf Boogerman Says:
January 18th, 2011 at 11:28 am

Hi Lothar,

CrossFTP does not create code for you, but you can use it do copy and paste the URLs to your video and put that in the embedding code.
In fact, you can use the code above in your html site and just replace the red parts.

With CrossFTP, you can upload files, create new buckets, change names etc…
It works more or less like cloudBerry S3 Explorer, a S3 app for Windows.

Is this what you meant?
Lothar Says:
January 19th, 2011 at 2:39 am

hi Rudolf,
I took the codec from this site, but the video doesn´t run. May be it belongs to the fact it is in mp4. So I have to change the formate. It runs verywell with Quicktime.

Please give me a short message, also to toppic 22.

Thank you very much.
Rudolf Boogerman Says:
January 19th, 2011 at 8:36 am

Yes, for MP4 you need a player, like JW player for instance (see recommended products).
But that requires another type of code.
Or use HTML5 code but that is another story because it only works on a limited amount of browsers. I will write about that quite soon.

Topic 22: No, it has to be a subdomain because it is a CNAME.
phil Says:
March 3rd, 2011 at 6:52 pm

I tried it on another of my websites that is just like this and video didn’t appear.
I was told there is a product called EZS3
that works and there is a charge for it.
Thanks though, best of luck
Jamie Says:
April 7th, 2011 at 7:08 pm

Works great! Thanks!
Uwe Says:
September 16th, 2011 at 12:15 pm

hi Rudolf
thanks for this great tutorial.

I am still in the dark a bit about S3 and bandwidth relations.

If I host my videos on S3 and deliver from there via the embedded player, is my own server bandwidth still racking up the full streaming data as well?

Or is the only thing that gets loaded each time the player gets called the small few KB snippet of player code?

thanks
Rudolf Boogerman Says:
September 16th, 2011 at 1:09 pm

Hi Uwe,
No, your own server only carries the weight of the player itself, without the video of audio. Since that player is lightweight, it will have no consequence for the performance of your server. It is only 103Kb and it will be cached, so if you have 10 videos on your page, it does not add up.
Uwe Says:
September 17th, 2011 at 12:08 am

awesome, thanks for the swift reply Rudolf

much appreciated
Uwe
Tom Colvin Says:
September 24th, 2011 at 2:26 am

Rudolf, I’ve been pouring through your fabulous site and others you’ve led me to via links for several days now. I’ve learned a lot.

I host a 2-hour, weekly streaming TV show on http://www.urfaceradio.com. UR Faceradio is an experimental effort by a radio station in Manila, Philippines. Each week I receive a copy of the show in either .mp4, .m4v or .f4v format. I plan to store only the most recent shows on S3. I will probably use CloudBerry to upload and manage the files.

I plan to make the most recent 4 shows available on my WP blog for on-demand streaming [no downloading]. With JW Player for WP, I plan to segment each 2-hour show into chapters.

QUESTION: Does it make sense to upload a 2-hour video via DSL connection? Or will the upload just take way too long. And is it really possible to stream the show to an audience of several hundred people without breaking my meager bank account? I’m having real trouble finding advice how to calculate these figures.

ANOTHER QUESTION: I’m searching for a WP Theme that will preserve all of the post content built up over the past 14 months, but will put my new video up top. The premium themes I’ve found give virtually no detail about the video player they use, and no one is responding for my request for info. And they are too expensive to buy just to try out. Any advice about how to track down the right theme for my needs?

THANKS AGAIN for all the info on your site. I feel like I’m taking a graduate crash course.
Rudolf Boogerman Says:
November 2nd, 2011 at 8:00 pm

Sorry Tom, somehow I missed your question.
You can upload a two hour video if you use streaming via rtmp, no problem, but I tend to divide them in smaller chunks because 2 hours is very long to watch on the internet..
As for the cost: Assuming your video is about 500mb, that means that if 200 people watch this. the bandwidth use will be 100GB x2 because you will be using CloudFront. That makes it equal to 200GB.
200GB x $0.140 = $28.00 roughly. Now, this presumes they all play it until the end. If someone breaks off in the middle, the rest of the video is not charged.

I have no idea what theme to use to be honest. I use regular themes mostly. You can install JW player in the root of your domain (in a separate folder)and work from there.
John Says:
November 24th, 2011 at 8:21 am

Hi!

The info here is fantastic – but how do I go about streaming my S3 videos (AVI and MP3, MP4) video content through my wordpress site without converting the files to some other format or purchasing some license (at this point. Just need to get the project up and running first and see that it works)?

I’ve tried numerous suggestions, and nothing is working. The best I’ve been able to do is display a videoscreen on my WP page but the video won’t play. The videos will download from S3 (which is not what I want as I want to protect the content) but I can’t get it to actually play.

If I can find the right way of getting it all going, it will simply be fantastic. I’ve been struggling with this for weeks.
Rudolf Boogerman Says:
November 26th, 2011 at 7:48 am

John, if you want to protect content, you need to buy buy a video player like S3Media Stream which is specialized to work with S3 Amazon and streaming.
But if you simply want to show public streaming video, you can have a look at this article: http://www.miracletutorials.com/embed-streaming-video-audio-with-html5-fallback/
It explains how to install a free video player and play a streaming video.

However, there is a danger in using public videos as explained in this article: http://www.miracletutorials.com/s3-amazon-public-content-in-danger-of-being-hacked/
The ideal is to set all rich content to private and use expiring URLs, which you can generate with an application like CloudBerry S3 Explorer if you do not want to spend money at first. You could set the expiring to a month for instance.
I hope this is useful?

Miracle Tutorials

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

Topics

What's New?

Tags/Keywords