There are two ways to include video into your surveys. You can (1) stream a video from a third-party video hosting service or (2) embed a video into the survey by uploading it into your Graphics folder and using HTML5 to reference the video. This page will explain the pros and cons of both alternatives.
Streaming Videos
Streaming videos from a third-party video hosting service is the easiest way to insert a video into your surveys. Most services, such as Vimeo or YouTube have an "embed" code that you can copy and paste into a survey. These videos can be uploaded as "private" videos, which means they are hidden from public view and can only be seen if someone has the link to the video. Here is an example of the embed code from a video from the Sawtooth Software YouTube channel:
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/Su2qIrTmv1c" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Notice that this particular embed code has additional parameters within it, such as the height and width of the video, whether it starts playing automatically, or if there are player control available, like pause, rewind, or replay. These parameters, as well as others, may be changed as needed. Instructions on how to do that will be provided by the video hosting service.
One of the nice things about streaming a video is after you upload a high resolution video to the service, they will automatically serve up a version of that video that has been optimized for the device and Internet connection speed of the respondent. So regardless of which browser the respondent is using, or whether they have a fast or slow Internet connection, they will receive a version of the video that is best for their device. Plus, the video starts playing immediately, rather than waiting for the video to download entirely (which occurs with the embedded video option).
Unfortunately, because this requires an active Internet connection, streamed videos may not be used in the Offline Surveys app.
Embedding Videos
Most modern browsers can interpret web-pages that are built with HTML 5 code. With HTML 5, you can use the <video> element to embed a video directly onto a web page. Prior to HTML 5, you have to use third-party plug-in such as Flash or Java applets, which had to be downloaded and installed by the user before they could access your content. But with HTML 5, you can use some simple code such as:
<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>
Notice that the code has three different video sources with different video extensions. The reason for that is not all browsers can display all types of video formats. This means you need to provide multiple versions of each video to accommodate the variety of different browsers. The three most popular video formats are:
- MP4 = MPEG 4 files with H264 video codec and AAC audio codec (Chrome, Firefox, IE, Edge, Safari)
- WebM = WebM files with VP8 video codec and Vorbis audio codec (Chrome, Firefox)
- Ogg = Ogg files with Theora video codec and Vorbis audio codec (Chrome, Firefox)
If you only have one format, you will want to 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/.
There are also new video formats and standards that are being developed, like the WebVTT (Web Video Text Tracks) and HEVC/H.265. If you want to use these formats, you need to make sure your respondents have browsers that can display them. https://caniuse.com/#search=video displays the browser versions which are compatible with HTML 5 video tags.
You should also keep in mind that because these videos are being stored in your graphics folder, that means it will take extra bandwidth the download the files. In other words, the video won't start playing until the video has been completely downloaded. You may want to warn the respondent that they will need to wait for the video to download before they can view it. Furthermore, you may want to tell them that if they have to pay for data, they may incur extra charges to download particularly large videos.
Embedding videos will also limit the number of respondents who can enter your survey at the same time. For example, a typical server can handle about 30 respondents hitting the submit button within the exact same second. But if the respondent has to download rich media content, such as audio or video files, this will dramatically reduce the about of available bandwidth and processors. In fact, this may mean you can only have a handful of respondents in the survey at the same time.
Finally, if you are running the Offline Surveys app, you must use this method since the streaming method is not available offline.
More information about the video element may be found here: https://www.w3schools.com/html/html5_video.asp.