====== Media Files in Questionnaires (Audio, Video, Documents) ======

Online questionnaires distinguish themselves from printed questionnaires, according to the methodological literature, because, among other things, they can incorporate audiovisual material. Few research projects currently make the effort to produce media content, but if you would like to include a document (such as a PDF), an audio file or a video in your questionnaire, this chapter will help you do so.

**Important:** Most media files (images, music, sounds, videos, and texts) are subject to the copyright. That means, you __must not__ publish (e.g., upload) or modify these files without a written consent by the copyright owners. This as well applies to materials, that can be consumed free of charge (e.g., YouTube videos) and to materials modified by you (e.g., cutted videos). In case of a copyright infringement you risk an expensive cease-and-desist order (costs a few hundret or some thousand Euros) and deletion of the uploaded files during data collection.

**Note:** Pictures in internet-appropriate formats (see [[images|Images]]) can be uploaded in the standard way at www.soscisurvey.de. Due to frequently lacking awareness of copyright violations, the server administrator must first approve uploaded media files.

**Important:** If your questionnaire makes use of media files, inform your participants of this fact as early as possible. E.g., you could point it out in the questionnaire invitation or next to the questionnaire link, so participants won’t begin the questionnaire in an inappropriate environment, such as an open-space office or the subway, and then have to abort at the video. As a control, you can also include a short video or audio file on the first or second questionnaire page, so participants will prepare their headphones or speakers early.


===== Uploading media files =====

While questions and tests are saved directly to a database, [[images|images]] and media files must first be uploaded as separate files to a host server (Images and Media Files in the menu). There are two things to keep in mind when doing so:

  - The files must be saved in an appropriate format. There are countless document formats (e.g. PDF, DOC, DOCX, ODT, TXT, RTF for text documents alone), but only very few are suitable for use in online questionnaires. Aside from the file size, a crucial factor is that all participants must be able to open the document – particularly with proprietary formats (e.g. Word DOC, Windows AVI, etc.), this is often not the case. 
  - By uploading, you are publishing the file on the internet, universally accessible to everyone. This is only permitted if you hold usage rights for the contents. This starts with text copyrights, extends to composition and performance in a piece of music, and extends well beyond the image rights for pictures and videos. If any persons are represented in the material, confidentiality rights must be respected as well. In short: Any time outside material (even as background music or only in excerpts) or representations of persons are used, written permission is required. Otherwise, a written reprimand may be issued. This can cost between several hundreds and multiple thousands or Euros.

**Note:** Capitalisation is critical in internet content. Uploading the file “Document.pdf” and then linking the file “document.pdf” will lead to errors. 


===== Linking documents =====

Most text and image contents in a questionnaire are formatted as text elements with HTML and directly embedded. However, longer documents (such as multiple-page instructions) may need to be linked as a downloadable file.  A widely-used file format is PDF.

PDF files can be created with Adobe Acrobat (if purchased) or with the freeware [[http://www.openoffice.org/de/|OpenOffice Writer]] or [[http://freepdfxp.de/|FreePDF]]. 

Once a file is uploaded to the host server, it can be linked for download with the HTML tag ''<a>''. Often (not always!) browsers will open PDF files in a new window rather than downloading them. The addition of ''target'' ensures that this occurs in a new browser window or tab.

<code html>
<a href="document.pdf" target="_blank">Download file</a>
</code>

**Note:** Whether the PDF file is opened in the browser or downloaded depends on the browser, or rather, the participant’s settings, and can’t be controlled by the researcher.


===== Incorporating audio files =====

There are several file formats that are suitable for use online. Usually, mp3 is used because this is the format compatible with the most browsers.

**Note:** The solutions below will play the audio file on one specific questionnaire page. When clicking to the next page, it stops. If you need to bypass this restriction, please read [[:en:create:frameset]].


==== Simple embedding of an mp3 ====

If an audio file is saved in mp3 format and uploaded to the host server, it can simply be dragged into the questionnaire like a text element (**Compose Questionnaire**). With the display settings {{:button.settings.png?nolink|Einstellungen}}, you may configure the audio element to start playing automatically.


====Embedding of an mp3 using HTML5====

Since the HTML5 tag ''<audio>'' has become quite common now, it is well suited for embedding audio files. Only very outdated browsers (e.g. Internet Explorer older than version 9) do not support this tag.

In order to make sure the audio file is played in all contemporary browsers, it should be present in mp3 __and__ ogg format. However, mp3 alone already provides a decent coverage. There is a number of free tools available for conversion into compressed file formats, such as the Open Source Audio Editor [[http://sourceforge.net/projects/audacity/|Audacity]] when used together with LAME.

To embed a file, create a new [[en:create:texts|Text element]] in **Text Elements and Labels** with //Formatting// “HTML code”, and add the following content:

<code html>
<audio id="audio_with_controls" preload="auto" autoplay controls controlsList="​nodownload"​>
controls controlsList="​nodownload"​>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  Your browser is not able to play this audio file 
</audio>
</code>

The file name(s) are entered in the ''<source>'' tags, while the options ''controls'' and ''autoplay'' enable controls and automatic playback. For more options, see [[http://www.w3schools.com/html/html5_audio.asp|w3schools: Audio]].

CSS formatting can be used to either adjust player size or to hide the player entirely. Please keep in mind that some browsers might ignore the autoplay setting, e.g. on mobile devices with limited data usage).

<code html>
<audio id="audio02" controls ​ ​controlsList="​nodownload" ​style="​width:​ 200px; height: 80px">​
  <source src="audio.mp3" type="audio/mpeg" />
</audio>
</code>

<code html>
<audio id="audio03" controls ​controlsList="​nodownload" ​style="​position:​ absolute; left: -9999px; top: -9999px">​
  <source src="audio.mp3" type="audio/mpeg" />
</audio>
</code>

**Note:** Most mobile devices (smartphones, some tablets) and sometimes the desktop version of Safari block the autoplay function to play a media file (audio or video) automatically. In this case, you should provide a JavaScript that displays the control elements after a short time if the media file does not start. For example:

<code html>
<audio id="audio04" preload controlsList="nodownload" autoplay>
  <source src="someAudio.mp3">
</audio>
<script type="text/javascript">
<!--
window.addEventListener("load", function() {
  window.setTimeout(function() {
    var audio = document.getElementById("audio04");
    if (audio.paused) {
      audio.setAttribute("controls", "yes");
    }
  }, 250);
});
// -->
</script>
</code>

JavaScript can be used to further refine the control of the audio file. For example, you can use the JavaScript event ''ended'' to automatically forward to the next page after the audio file has been played.

<code html>
<audio id="audio05" preload controlsList="nodownload" autoplay>
  <source src="someAudio.mp3">
</audio>
<script type="text/javascript">
<!--
window.addEventListener("load", function() {
  window.setTimeout(function() {
    // Identify audio element by ID
    var audio = document.getElementById("audio05");
    // Show controls if the video does not start automatically
    if (audio.paused) {
      audio.setAttribute("controls", "yes");
    }
    // Automatically continues to the next page after playback
    audio.addEventListener("ended", SoSciTools.submitPage);
  }, 250);
});
// -->
</script>
</code>


===== Embedding videos =====

**Important:** Those who have not looked into copyright laws often think public and free-access videos (such as those on YouTube) may be used in questionnaires without further consideration. This is __incorrect__. Copyright laws apply to such videos as well! 

==== The special case of YouTube videos ====

Users who upload videos to YouTube (and similar platforms) transfer a whole series of usage rights to the platform. This can be very useful in survey studies because YouTube offers the possibility of embedding videos directly into external websites (such as your online questionnaire). 

To do this, open the video on YouTube, click on the //Share// button, then //Embed//. MArk the option for "enhanced data protection" -- otherwise the video might be blocked in firefox or other browsers. Copy the HTML code offered by YouTube into a text module (click **Add text** in a section of your choice) and drag this text into the questionnaire (**Composing Questionnaire**). Under certain circumstances the ''%%http://%%'' must be replaced by ''%%https://%%'' (see note below).

<code html>
<iframe width="420" height="315" src="https://www.youtube.com/embed/WtR2m20C2YM" frameborder="0" allowfullscreen></iframe>
</code>

With this HTML code, a (mostly invisible) YouTube website is opened within the questionnaire and the YouTube player is loaded. The user does not have to upload the file, nor deal with copyright laws. In exchange, YouTube is permitted to blend their own advertisements into the video.

**Warning:** If YouTube is integrated into the questionnaire, then the call may transmit personal data to YouTube. This may require consent from the respondent. Please clarify this issue in advance (!) with the data protection officer at your university, institution or company.

**Warning:** YouTube allows itself in its own terms of use to include advertising in videos. The advertising spots shown previously to the video by youtube will vary for every respondent. Therefore, directly embedding the YouTube video may cause severe methodological trouble. The only solution to this case is to get the (written) consent of the copyright owner, to upload the video to the survey project, and to embed this file.

**Note:** Browser will access www.soscisurvey.de via secured (encrypted) HTTPS protocol. Some browsers deny including content from non-encrypted sources via iframe. When including external content, make sure, this content is available via HTTPS. Also use the HTTPS URL.


====Embedding videos using HTML5====

If you want to make sure your video can be displayed correctly for virtually all participants, you can embed it in your questionnaire using the HTML5 ''<video>'' tag. A disadvantage is that you first need to convert the video into 3 (!) different formats, and consequently also need to upload three files. Basically, you can also use just one of the file formats, but this way the video will only play in some browsers ([[http://www.hongkiat.com/blog/html5-videos-things-you-need-to-know/|HTML5 Videos: 10 Things Designers Need to Know]]).

**Important:** Very outdated versions of Internet Explorer (up to version 8) do not support the ''<video>'' tag. E.g. for Germany, this would affect about 3% of internet users ([[http://caniuse.com/#feat=video|Can I use: Video element]]).

To convert the video to mp4, ogg and webm formats, you can use different software. It works quite comfortable with [[https://cloudconvert.com/|CloudConvert]] (online, free for smaller files) and with the [[http://www.mirovideoconverter.com/|MiroVideoConverter]].

In SoSci Survey, you create a new [[:en:create:texts|Text element]] in **Text Elements and Labels** with //Formatting// “HTML code”, and add the following content:

<code html>
<video width="512" height="288" controls>
  <source src="filename.ogg" type="video/ogg" />
  <source src="filename.mp4" type="video/mp4" />
  <source src="filename.webm" type="video/webm" />
</video>
</code>

Obviously, you can use the ''width'' and ''height'' parameters to adjust the video’s display size. Additional options are available to enable autoplay or hide the player controls ([[http://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/Video|SelfHTML: HTML/Multimedia und Grafiken/video]] (German only)).


==== Optimated Embedding ====

HTML5 videos can be controlled in a very differentiated way using JavaScript and can react to events in the video. The following example of HTML code (for the video element) and JavaScript code ensures that (a) the next button is hidden as long as the video is playing and (b) the controls (pause, rewind, ...) disappear once the participant has started the video.

**Tip:** Allow the controls even if you use ''autoplay'' -- at least initially. Because browsers on mobile devices usually ignore the request for automatic playback in order to reduce mobile data consumption.

<code html>
<video width="512" height="288" controls controlsList="nodownload" id="stimulus">
  <source src="filename.ogg" type="video/ogg" />
  <source src="filename.mp4" type="video/mp4" />
  <source src="filename.webm" type="video/webm" />
</video>


<script type="text/javascript">
<!--

var video = document.getElementById("stimulus");

// Hide controls once it plays
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});
// Hide next button
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Show next button at the end of the video again
SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});

// -->
</script>
</code>


==== Problems with the Web Storage Space ====

At www.soscisurvey.de, 64 MB disk space per survey project is available by default. This is too little for longer videos in several formats.

Ideally, you can access online storage at your own university or company and upload the video files there. In the HTML code, simply enter the complete URL of the video file, e.g. 

<code html>
<video width="512" height="288" controls controlsList="nodownload"> 
  <source src="https://www.example.com/projectXYZ/filename.mp4" type="video/mp4" />
</video>
</code>

**Important:** The online memory must (!) be accessible via HTTPS. If you try to include unencrypted HTTP content in a questionnaire page that was transmitted encrypted via HTTPS, most browsers block this.

If you have access to Sync&Share, you can also store videos there. After uploading the file to Sync&Share, select the icon for creating a download link (chain icon) next to the file. On the download page that opens, a box will say "download" and the name of the file -- this is a link. By right-clicking on the link, you can copy the link destination to the clipboard and then use it in the ''<video>'' tag:

<code html>
<video width="512" height="288" controls controlsList="nodownload">
    <source src="https://syncandshare.lrz.de/dl/fiR1vpLSm7zeDmYRoxRAiAQF/sample.mp4" type="video/mp4" />
</video>
</code>

If you do not have access to your own online storage, you can use the provider [[https://www.dropbox.com/|Dropbox]]. There you can create links to share the files. But in order to use them in the questionnaire, you have to make sure that Dropbox delivers the media file directly and not a download page. Therefore you have to set or change the parameter ''dl=1'' in the URL.

<code html>
<video width="512" height="288" controls controlsList="nodownload"> 
  <source src="https://www.dropbox.com/s/eccvtg69sxl8ume/video001.mp3?dl=1" type="video/mp4" />
</video>
</code>

**Warning:** In Safari (Apple/MacOS) problems with the integration of Dropbox have been reported. Apparently Dropbox does not deliver the media file to the Safari browser, but an HTML file. This results in Mac users not being able to view the video.

**Warning:** Dropbox may restrict the possibility of direct download at any time.

**Warning:** There is no information yet on whether Dropbox will restrict direct download even if many users access the file.


===== Technical hurdles =====

Regardless of whether audio files or videos are embedded following the directions above or directly from an external provider (e.g. YouTube), it can never guarantee that the participant can actually see the media file.

All options listed above (including YouTube) only work if the participant has a halfway up-to-date Flash Player. Flash is the most common media plug-in for browsers, but a relevant proportion of participants (depending on target population, 5-20%) will not have it installed. In addition, some participants use a Flash-Blocker to hide moving advertisements on some websites.

The solution to this problem is relatively simple: embed a short test video/audio clip on the first page of the questionnaire. The participants can then be asked to test the display in advance. I fit does not work properly, they should ...

  * check if the speakers are turned on,
  * possibly install the up-to-date Flash Player (include a link to the download page) and/or
  * temporarily disable an Flash blocker.

**Tip:** Optionally, some information (such as a number) can be hidden in the media file by displaying or recording it. Only users who enter this information correctly into a text box can continue to the questionnaire (this is then checked via filter on the next page of the questionnaire).

Of course, a series of other problems can also prevent the display of media. This can start with the fact that the participant is using a hopelessly out-of-date browser (e.g. Internet Explorer 5) and extend well beyond difficulties playing the file (a frighteningly small proportion of internet users comprehends the term "play button"). It has to be accepted that under some circumstances, a portion of the participants in an online questionnaire simply cannot play the files. However, with the instructions above, this portion should be reduced to very few percent. 

Finally, most of the time, it is impossible to control whether the participant has actually watched/listened to the complete file. This would require a special play-software to transmit this information to SoSci Survey (which does not currently exist). For those who do not wish to code their own software, the following options should work: 

  * Ask the participant if he/she has watched/listened to the complete file,
  * check the time spent on each page during data analysis ([[:en:results:variables#dwell_times|Dwll Times]]) or
  * only display the Continue button after a short while ([[:en:create:timer-display|Timer: Display Next Button after Defined Time]]). If you allow a Back button, do not set this time interval too long.