Sawtooth Software: The Survey Software of Choice

How to Embed Audio or Video Clips in a Survey

How do I embed audio or video clips into an SSI Web 8 survey?

Change Default Doctype

Prior to 2012, web browsers have not been able to serve up audio and video clips without some "helper" apps like Flash or JavaScript. Fortunately, with the current standard, HTML5, most browsers are finally able to handle audio and video natively.

In order to take advantage of this feature, you need to change a setting in your SSI Web software to make your survey render using HTML5 rather than the older HTML4. The following screenshot was generated in SSI Web 8.3.2. Under the Survey Settings > Advanced tab you will need to select and use a Custom HTML doctype. Click the checkmark and enter in <!doctype html> as shown on the following screen:

Audio

Here is an example of how to embed an audio clip into a survey using the HTML5 <audio> element. It is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari browsers.

The code below may be used in any question or level. Notice that there are two audio file formats, .mp3 and .ogg. Not all browsers can interpret all audio file formats. For example, .mp3 files can be used in Internet Explorer, Chrome, and Safari while .ogg files can be used in Chrome, Firefox, and Opera. If you only have one format, convert it to the other format so there will be a greater chance of it working in other browsers. There are many free online audio converters available, such as http://media.io.

<audio controls='controls'>
 <source src='[%GraphicsPath()%]audio.mp3' type='audio/mpeg'>
 <source src='[%GraphicsPath()%]audio.mp3' type='audio/mpg'>
 <source src='[%GraphicsPath()%]audio.ogg' type='audio/ogg'>
 <embed height='50' width='100' src='[%GraphicsPath()%]audio.mp3'>
 Sorry, this browser cannot listen to the embedded audio file.
</audio>

Video

Here is an example of how to embed a video clip into a survey using the HTML5 <video> element. It is supported in Internet Explorer 9+, Firefox, Opera, Chrome, and Safari browsers.

Currently, there are three supported video formats for the <video> element:

  • MP4 = MPEG 4 files with H264 video codec and AAC audio codec (IE, Chrome, Safari)
  • WebM = WebM files with VP8 video codec and Vorbis audio codec (Chrome, Firefox, Opera)
  • Ogg = Ogg files with Theora video codec and Vorbis audio codec (Chrome, Firefox, Opera)

If you only have one format, convert it to the other formats so there will be a greater chance of it working in other browsers. There are many free online video converters available, such as http://www.online-convert.com/.

The code below may be used in any question or level.

<video width="320" height="240" controls>
  <source src="[%GraphicsPath()%]video.mp4" type="video/mp4">
  <source src="[%GraphicsPath()%]video.webm" type="video/webm">
  <source src="[%GraphicsPath()%]video.ogg" type="video/ogg">
  Sorry, this browser cannot display the embedded video file.
</video> 

More Information

Please see the following links for more information about the HTML5 audio and video elements. There's a lot more you can do, including changing the way the controllers work.

If you would like to see an SSI Web 8.3.2 survey that uses both audio and video clips, click here to download the project files and clips.

Sawtooth Software

6:30 AM to 5:30 PM Mountain Time
(GMT-6; GMT-7 Autumn/Winter)
Monday through Friday

Phone: +1 801 477 4700
Fax: +1 801 434 5493
Email: support@sawtoothsoftware.com

We are open!

SKIM Software

9:00 AM to 5:30 PM Central European
(GMT+2; GMT+1 Autumn/Winter)
Monday through Friday

Phone: +31 10 282 3500
Fax: +31 10 282 3560
Email: software@skimgroup.com
Online: www.skimgroup.com

Lighthouse Studio

Lighthouse Studio is our flagship software for producing and analyzing online and offline surveys. It contains modules for general interviewing, choice-based conjoint, adaptive choice-based conjoint, adaptive choice analysis, choice-value analysis, and maxdiff exercises.

Try Lighthouse Studio

  Buy Lighthouse Studio