Using video in an eCommerce solution can increase your conversion rates by a whopping 40%. To do this you need to follow some simple guidelines. Mark Harpur, our Regional Sales Engineering Director, has been on the front lines gathering the following thoughts to help you succeed.
Mark writes:
As we see more and more retailers using online video to showcase their products, it is becoming important to optimize video load times. Since product videos can be as short as few seconds, you don’t want your viewers to wait as long for the player/video to load as they spend watching the video. Here at Brightcove we make every effort to get player size to a minimum and video loads as fast as possible, our last release included a number of features to make our players even faster. Though there is always more you can do, so here are a few quick tips you can use to increase the apparent loading times of videos.
- Use progressive download(PD) over streaming.
Since streaming is a more complicated technology, it can often take longer for the stream to be initiated than it would for a progressive download file. If you notice that there is still a slight delay when the user clicks to view the video and the video starting to play, you can ‘initiate’ the video by causing it to download before the user clicks to view it. To do this you can use the Brightcove Player APIs to watch for the player load and then quickly start and pause the video, e.g.
var video; function onTemplateLoaded(pPlayer) { player = bcPlayer.getPlayer(pPlayer); exp = player.getModule(APIModules.EXPERIENCE); video = player.getModule(APIModules.VIDEO_PLAYER); exp.addEventListener(BCExperienceEvent.CONTENT_LOAD, onContentLoad); video.addEventListener(BCMediaEvent.COMPLETE, onMediaComplete); } function onContentLoad(){ video.play(); video.pause(); }
When using the code above to initiate the video it is important to remember that you will consume more bandwidth than if you had your account set to streaming or did not initiate the video like this. This is because the entire video is downloaded regardless of if the user views it or not. Additionally, since the video will start regardless of if the user views it or not this will also cause your reports to increment accordingly.
- Hide the video
By hiding the video player, it can load and you can initiate the functions in step 2 before the user has even clicked to view the video. By doing this the video will appear to load almost instantly. This can be implemented quite seamlessly when the product has additional information such as images in addition to video, the images can be loaded first and then when the user clicks the video button/tab the div with the preloaded player and video is displayed. In addition you can set the video to auto play when the player is displayed. Below is some sample code to do this:
//this function is called when the user clicks on the link to load the player. function showplayer() { var bcdiv = document.getElementById("bcplayer_loaded"); bcdiv.style.height='300px'; bcdiv.style.width='400px'; bcdiv.style.visibility= 'visible'; video.pause(false); } <div style="visibility: hidden; height: 0px; width: 0px;" id="bcplayer_loaded"><br /><br /> <!-- Start of Brightcove Player --> ****Your Brightcove player code goes here**** <!-- End of Brightcove Player --> <!-- This script is called to tell the player not to wait for the rest of the page. If you are having problems with ie 6 then remove this. You can read more about it here http://support.brightcove.com/en/docs/controlling-when-players-load --> <script type="text/javascript" >brightcove.createExperiences();</script> </div> <div id="bcplayer_loading"> <!-- this code calls the show player function which will then display the hidden div with the player loaded. --> <a onclick="showplayer();">Click here for player</a> </div>
Note that you cannot use a div set to display:none for this as any content within it will not load until it is set to a visible display type. Problem with a hidden div is that is still uses up space on the page, thus the div needs to be set to 0px x 0px and resized in the showplayer function.
- Auto Replay
Since product videos are generally short clips, it makes sense to repeat them, giving the appearance of a longer clip and giving the viewer a better idea of the product. Auto replay can easily be achieved with the script below:
function onMediaComplete(e) { video.loadVideo(video.getCurrentVideo().id); }
Using progressive download has another benefit here as since the video has already been cached on the client side, no more bandwidth* will be consumed when the video is replayed like this.
- Light Player
As with most things on the web, simpler = smaller. The same is true for Brightcove players. Since your customers will not need much interaction with the video, e.g. they won’t need to scrub through it, you can use a simple player. Depending on your Brightcove edition you have two options. If you are a Pro or Enterprise customer and have access to BEML, you can create what we call a custom chromelss player which looks like:
The BEML for this player is below: <Runtime> <Layout style="background-color:#If you are an express customer, you can still create a light player using our standard chromeless template and setting it to a minimal theme, this will look something like:000000"> <VideoDisplay id="videoPlayer"/> </Layout> </Runtime>
Remember to turn off all the functionality you don’t need in the player settings. Things such as related videos and menu overlays all add weight to the players.
Complete Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/ xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Document</title> <script type="text/javascript" src="http://admin.brightcove. com/js/APIModules_all.js"></ script> <script src="trace.js" type="text/javascript"></ script> <script type="text/javascript"> var video; function onTemplateLoaded(pPlayer) { player = bcPlayer.getPlayer(pPlayer); exp = player.getModule(APIModules. EXPERIENCE); video = player.getModule(APIModules. VIDEO_PLAYER); //exp.addEventListener( BCExperienceEvent.TEMPLATE_ READY, onTemplateReady); exp.addEventListener( BCExperienceEvent.CONTENT_ LOAD, onContentLoad); video.addEventListener( BCMediaEvent.COMPLETE, onMediaComplete); } function onContentLoad(){ video.play(); video.pause(); } function onMediaComplete(e) { video.loadVideo(video. getCurrentVideo().id); } function showplayer() { var bcdiv = document.getElementById(" bcplayer_loaded"); bcdiv.style.height='300px'; bcdiv.style.width='400px'; bcdiv.style.visibility= 'visible'; video.pause(false); } </script> </head> <body> <div id="bcplayer_loaded" style="visibility:hidden; height:0px; width:0px;" > <!-- Start of Brightcove Player --> <div style="display:none"> </div> <!-- By use of this code snippet, I agree to the Brightcove Publisher T and C found at http://corp.brightcove.com/ legal/terms_publisher.cfm. --> <script language="JavaScript" type="text/javascript" src="http://admin.brightcove. com/js/BrightcoveExperiences. js"></script> <object id="[your Experience ID]" class="BrightcoveExperience"> <param name="bgcolor" value="#FFFFFF" /> <param name="width" value="400" /> <param name="height" value="300" /> <param name="playerID" value="[PlayerID]" /> <param name="publisherID" value="[PublisherID]"/> <param name="isSlim" value="true" /> <param name="@videoPlayer" value="[VideoID]" /> </object> <!-- End of Brightcove Player --> <script type="text/javascript"> brightcove.createExperiences() ;</script> </div> <div id="bcplayer_loading" > <a onclick="showplayer();">Click here for player</a> </div> </body> </html>