Tutorial: Adding Multimedia (Audio, Video, Documents)

Surveys have matured along with the content on the internet over the past few years. Video, audio, and documents are all necessary parts of surveys, and SurveyGizmo offers the flexibility of adding HTML and JavaScript code to your surveys, thus enabling a large array of methods for bringing this rich media content into your survey.

Adding Audio

The standard for audio files today is the compressed MP3 file, common for music, podcasts, and audio throughout the web. If the file is very small, you can also use the uncompressed .wav file format. In the next two sections, we will explore two methods: 1) Embedding the mp3 file directly into the page, requiring the respondent to have a plugin to play the file (Quicktime or RealPlayer being the most common), or 2) Embedding with a custom flash player, most commonly used throughout the web and the most compatible (MP3 only).
The following survey will demonstrate how to embed audio in your survey.

Direct Embed of MP3

The simplest method requires the user’s browser to do all the heavy lifting, but allows you to use both .mp3 and .wav files. Whether the respondent is presented with navigation to start, stop, or rewind the content will vary for each respondent. To add this to the survey, navigate to the specific page you wish to add the audio file and click Add Descriptive Text/Images. Select ‘Descriptive Text’ and paste in the following code, editing the portion highlighted below, “http://link/to/your.file” and replacing it with the link to your MP3 file. The file can be stored within your SurveyGizmo account’s Files & Templates section.

<embed src="http://link/to/your.file" autostart="false" />
 

The option highlighted below, ‘autostart=”false”‘ determines whether the MP3 will play immediately when the page loads. You can adjust this by changing the value to “true” if you wish for the file to play immediately.

<embed src="http://link/to/your.file" autostart="false" />
 

Flash Player Embedding

This method uses Adobe Flash to serve the MP3 file to your survey respondent, which is one of the most compatible formats for distributing content such as audio and video across the internet today. The two methods described below use players from Google and from Yahoo to provide the playback functionality. You can choose to use whichever you prefer, however there are some recommendations for when to use one or the other. Thanks to labnol.org for the tips.

Google Reader Player (each individual MP3 file) Demo
The first method is using the Flash Player by Google Reader. In your survey, insert the following code by clicking Add Descriptive Text/Images, selecting Descriptive Text, and pasting the following code into the provided box:

<embed type="application/x-shockwave-flash"
src="http://www.google.com/reader/ui/3247397568-audio-player.swf?audioUrl=MP3_FILE_URL"
width="400" height="27" allowscriptaccess="never" quality="best" bgcolor="#ffffff"
wmode="window" flashvars="playerMode=embedded" />
 

You will want to change the highlighted text, “MP3_File_URL” to the link to your MP3 file. If it was uploaded to SurveyGizmo, you can retrieve the link from the Files & Templates section of your SurveyGizmo account. This embed method creates a fantastic player that will be easily recognizable to your survey respondents. If you are including only a single file in your survey, this is the recommended method. If you needed to include multiple files, the Yahoo player may be an easier method.

Yahoo Player (converts links to MP3s) Demo
The Yahoo player uses a different method than all the previous audio embedding methods. In this scenario, you include a link to an MP3 file, and then add a single line of code to the HTML for your survey. Yahoo does the rest of the work, converting the links throughout your survey into a flash player. First and foremost, add the link to your MP3 file:

<a href="http://link/to/your.mp3">Name of your link that the user clicks</a>
 

You will want to edit the highlighted portion. “http://link/to/your.mp3″ with the link to your MP3 file. If you uploaded it to SurveyGizmo, this will be found in the Files & Templates section of your account. Do this throughout the survey wherever you want to include the MP3 files. Once that is completed, go under Edit Survey > Look & Feel > This Theme’s HTML Template and at the bottom of the box, add the following code exactly:

<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>

Yahoo will do the rest of the work, converting your links to embedded flash players!

Adding Video

Unlike audio, video comes in many more forms throughout the web. There is the Apple standard .mov file, the Windows .wmv file, and even operating system independent formats such as DivX. Of course, much like audio, the web has been populated by videos that have been converted to the flash format for maximum compatibility through sites such as Viddler.com and YouTube.com. This section will demonstrate four different methods for embedding video into a survey, including some helpful links to websites that will assist you in creating the embed code for the direct embed method. The following survey will demonstrate how to embed video in your survey.

Linking to files

When linking to a video file, it allows the respondent’s web browser to decide the best course of action: download the file, or display it within the page using an installed plugin for the browser. It opens the link in a new window. Include a link to a video file, and then add a single line of code to the HTML for your survey. First and foremost, add the link to your video file:

<a href="http://link/to/video.avi" target="_blank">Name of your link that the user clicks</a>
 

You will want to edit the highlighted portion. “http://link/to/video.avi” with the link to your video file. If you uploaded it to SurveyGizmo (less than an 8MB file), this will be found in the Files & Templates section of your account.

Direct embed of WMV, MOV, and DIVX files

Demo

Directly embedding a video requires much more complex HTML. It also requires more compatibility with the respondent’s web browser and installed plugins to work properly. However, there are online tools to assist you in creating the code to directly embed the following file types:

• SWF (Shockwave Flash file)
• WMV (Windows Media Video file) Alternate Site
• MOV (Quicktime Movie File) Alternate Site
• DIVX (DivX Video File)

The methods vary greatly depending on the file types, and the above scenarios include adjustments for video file size, automatic start of the video, and other custom settings for each format. This method is sometimes preferred when the video is of a private nature, and uploading it to public websites such as Viddler and YouTube (following section) would not be preferred.

FLV (Flash Video files) need to be converted to SWF files before embedding into a page

Embedding with YouTube or Viddler

Demo

The simplest method is embedding the video file by uploading it to a video sharing website such as Viddler.com and YouTube.com, and letting these sites convert the video to Flash Video and provide you with ‘embed code’ which you can paste directly into SurveyGizmo as descriptive text. The benefits of this method include: Compatibility, familiarity, simplicity, and speed.

You will need to create an account with the video hosting website, and use their tools to upload your WMV, MOV, AVI, and DIVX files. You must have rights to the video that you upload, just as you must have rights to the video and images used within your survey on SurveyGizmo. Once uploaded, you can view the video through their website, and under the term ‘Share’ or ‘Embed’, you will be provided with a small section of HTML code to place into your survey through ‘Add Descriptive Text’ on any page within your survey.

The following images note the areas on YouTube and Viddler where you will find the embed link/code:

If you would like to use the embedded flash option through Viddler, but want the video to remain private, you may want to check out there paid business offering: B2B Viddler.

Adding Documents

White papers, terms and conditions, rules and regulations, PowerPoint presentations, and book samples are all examples of documents that you may wish to include in your survey. The simplest method, used by 99% of SurveyGizmo customers is to upload the document to SurveyGizmo’s Files & Templates and then provide a link to the file within the survey. However, new online tools allow you to embed documents directly into a page in much of the same way that video is embedded throughout the web (and in the above examples): by first uploading it to their site and using a small chunk of HTML they provide, and placing it in your survey.

Linking to documents

Demo

The simplest method, which ensures that only survey respondents see the links to the documents, is to provide a link to the file uploaded into SurveyGizmo’s Files & Templates section. Once the file is uploaded, the link to the document can be found inside of a textbox at the bottom of each upload on the page. Copy this to your clipboard, and you will be linking to this file from within your survey.

Within the survey, either as part of the Question Title or a Descriptive Text, highlight a portion of text (possibly the name of the document) and click the icon on the toolbar for a hyperlink (chain link on a globe). Paste the link to the file into the URL area, select the TARGET tab, and choose ‘Open in New Window’. Finally, click OK, Save Changes, and the survey will now be updated with the link.

If the respondent clicks on the link, it will open in a new window. This is beneficial so they are never taken away from the survey, especially in cases of PDF files, which many browsers will open within the window rather than downloading to your computer.

Embedding with DocStoc

Demo

The fancier option is to embed the document into the survey directly, especially handy for situations where the user may not have the software to open the file you are providing, such as a PowerPoint file or the newest version of Word .docx and Excel .xlsx files. The second benefit is that DocStoc will track information about the user’s interaction with the embedded document, giving you more information about those files being accessed than a direct link would provide.

DocStoc support the following file types: doc, xls, ppt, pps, pdf, rtf, txt, docx, xlsx, ppts

Once you create an account on DocStoc, you can upload your documents and will be presented with many options in regards to naming, tagging, etc. Within the account, you will also have the option to embed the document. See the image below to see where this link is located. This will provide you with the code to paste into SurveyGizmo when creating a new descriptive text item in the survey (link in the top-right of every page).

A few more alternative sites for embedded documents: Scribd.com and SlideShare.net

If you have any questions, feel free to discuss this tutorial on our community forums!