Video is an integral part of our lives, and its use online is pervasive. At some point every web developer wants to add some video to their site. This tutorial will show you how to do just that–now let’s add some video to your site!
There are some very simple methods to embedding video into your web site, for example, you can use the following code:
<embed src=”sample.mov” width=”200″ height=”240″ controller=”true”>
This is all fine and good if your movie clip is about 10 seconds long and bandwidth and buffering times are not an issue.
If you’re finding that your video takes a long time to load on your site, then you can always use YouTube. It’s fast, free and easy. But the trade off is that you lose all control of your video. To use YouTube, simply create an account, upload your video, wait for it to process, then copy and paste the provided embed code into your site. The problem with this is that anyone and everyone can also copy and paste your video into their site. If your goal is to create a web site with exclusive video content, then YouTube is not the answer.
If you want to show exclusive and/or original video, you’re probably either creating the video yourself, or you’re getting it from another source, such as a PR firm.
If you’re not rolling your own video, and you’re getting it from another source, then most likely you’re going to need to resize the video. From personal experience, the video clips that I’ve received from PR firms are sized 1280 x 720. A video of that size will take up most visitors’ entire screen and you can’t show video controls or any portions of your own site. I struggled with this issue for a long time. I thought I had to open the video with movie maker software or do something complex to resize it. Then I discovered all I needed was a short snippet of code: scale, which can be set to “tofit” or “aspect” or a number. Aspect is you’re best option, because it keeps the original ratio of the video in perspective.
<embed src=”sample.mov” width=”600″ height=”400″ scale=”aspect” controller=”true”>
If you don’t use the scale code, and simply use width and height, then you will crop the video. Also, you will not see the controller for play, pause, volume, etc. Plus, you need to add an extra 16 pixels to the height of the video to see the controller. For example, if the video is sized 1280 x 720 and you set the width to 600 and the height to 400, then a significant portion of the video will be cropped and not seen by the visitor; you also don’t get the controls. Using scale removes the necessity of adding 16 pixels, it does not crop the video and you get the controls.
A 70MB video at this width and height will load fairly quickly with minimal buffering; even though there might be a slight wait involved, most visitors will sit there for several seconds if they truly want to see the video and they see the slider bar is increasing rapidly.
If you use a web host service, and you get a large spike in traffic because of the popularity of a given video, you might incur additional expenses due to significant amounts of resources being used. If you’re ramping up your site and want to join the big leagues, this will become an eventual reality.
Another potential issue, is that certain parts of your web page might not load, or become functional, until after the video is fully loaded. For example, I have a rotating series of images that did not load and display until after the video finished loading. Also, I could not use my “Share This” social networking buttons until after the video finished loading. These problems occurred in Firefox and Internet Explorer, but Chrome did not exhibit these issues. If you’re curious as to what my site looks like and the video that I’m referring to, you can see it here. The video shown there was provided by EA Sports’ PR firm.
For a professional web site, these types of loading problems are not acceptable. For an amateur site, however, these drawbacks could be viewed as a minor–and temporary–setback while you ramp up operations.
At this point you might be feeling a little stuck. You have this great, unique, exclusive video that you want to share with the world, but you want them to view it on your site and not a hosting site. At the same time, you’re not at the point where you have the servers and the bandwidth to support 15-minute long videos without your audience having to wait 10 minutes or more for the video to buffer. Plus, you don’t want your web host company to charge exorbitant amounts because your great video content clogged up the tubes.
Fortunately, there are answers to this problem. One solution comes in the form of Amazon Web Services. Signing up is free and the cost to use their services are counted in pennies per GB. You only pay for the services you use as you use them. There are no monthly fees or subscriptions.
Amazon Web Services does not provide a step-by-step tutorial. However, there are plenty of help files and information spread around the site. For the purposes of uploading video, you need to use Amazon CloudFront in conjunction with an Amazon S3 bucket.
From the Amazon CloudFront page:
To use Amazon CloudFront, you:
- Store the original versions of your files in an Amazon S3 bucket.
- Create a distribution to register that bucket with Amazon CloudFront through a simple API call.
- Use your distribution’s domain name in your web pages, media player, or application. When end users request an object using this domain name, they are automatically routed to the nearest edge location for high performance delivery of your content.
- Pay only for the data transfer and requests that you actually use.
We’ll tell you more about Amazon Web Services in the next article!
