Adding video preview to web pages
Are you using a video sharing service like YouTube or Google video to show videos on your web page or blog? Using a video sharing service saves you money on bandwidth and you might also get added visitors from the video sharing. This is all good but there are a lot of things that is bad about adding the video code to your web page or blog directly unless you use video previews.
Do not use YouTube code on your front page
Your page will load slower
The first problem with using the linking code you get from the video sharing site is that it will cause your web page to load slower. The browser has to load and start the video player plug-in, the plug-in will download a part of the video file to show a first frame. How long this will take does depend on you’re a users internet connection and how fast computer they have but we are talking about several seconds.
The preview will be blurry and generally look bad
When you upload a video to a video sharing site it is converted and compressed even more. The result is that the video you see on the sharing site is of lower quality than the video you have on your computer. What users see in the slow to load video preview window is often one single blurry video frame. Not good for either the look of your page or the interest of your visitors.
Visitors will not ‘get’ the content
The third problem with just adding the video sharing code to your site is that you can not select which video-frame to show. You tube selects the middle frame from the video and other services uses the first frame. The selected frame is most of the time not very interesting and it displays only one image which does not give a good overview.
It wastes screen estate
Screen space is a valuable asset, videos preview windows takes up a lot of extra space with navigation buttons and frames. Using a picture instead will save you screen estate that can be used better.
It might not even show
The preview will not show for users that do not have the plug-in installed. Just about every video sharing site today requires the Flash plug-in and most people do have it installed. But it is a matter of fact that not everyone has it. Some users have plug-ins turned off altogether, some visitors connects using a device where the player is not available, some visitors thinks Flash is not for serious use and some companies simply does not allow Flash on their computers because of security issues.
Regardless of the cause, not all people have the required plug-in.
And even worse
Even if you ignore this advice, at least never ever place more than one video per page. Each instance of the flash plug-in will eat memory and each instance will slow down your computer and each instance will make the page even slower to load.
What you need to do
The solution to all these issues is very simple. Instead of hosting the video on your page host an image that shows the video when users click on it.
Play the video in a new window or use javascript to change the page and add the video when the user clicks the image.
The page will load faster
No video needs to be loaded unless the video is actually started. The plug-in will not even be loaded for users that are not interested and no part of the video file will be accessed.
Easier to add web tracking
Since the user now takes an action to start the video you can quite easy track it the same way you track other links. You can realty drill down and see which videos people are most interested in and which are not popular. Web analytics is a whole chapter of its own but hosting videos in this way makes it a lot easier.
The preview window will look great
When you use a normal image for the video preview nothing need to be blurry. You can capture high quality video frames and even change them in Photoshop to be even higher quality.
Visitors will get the content
You select which frame from the video is displayed as a preview. You can use one or several frames. You can make it more interesting driving more visitors.
No wasted screen estate
Playback controls do not need to take space unless the video is played. It might be good idea to add graphics to make the image look like a video but you can overlay that on top of the image. It is also much easier to get the image to match the visual style of your web page.
All visitors will see the preview
Since your preview is now a single image virtually every visitor to your site will see it. All browsers support showing images, no requirement on plug-ins. For visitors that click the video and do not have the plug-in you can direct them to download the plug-in or even better present them with a story board of the whole video in image form.
If you and using an image as a preview will make you page look good for these visitors as well.
How to make a video preview
Use Fast video indexer to capture video frames from the movie file. You will capture frames from the original video file and that will give you better video quality than the compressed and possibly resized YouTube video. If you have the original uncompressed video, for example if you are making screen recordings use that video file to take the screenshots. Always aim to use the highest possible resolution with the least amount of compression possible.
©Copyright 2007,2008 - Fredrik Lönn, all rigths reserved