====== Videos in the Questionnaire ======

**Important:** Read the advice in [[:en:create:media]] before this manual.

**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! 

**Note:** If a video does not play correctly, the instructions for [[en:general:browser-tools|solving audio/video problems]] will help.

==== 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, webm and ogg 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" playsinline controls controlList="nodownload">
  <source src="filename.mp4" type="video/mp4" />
  <source src="filename.webm" type="video/webm" />
  <source src="filename.ogg" type="video/ogg" />
</video>
</code>

Obviously, you can use the ''width'' and ''height'' parameters to adjust the video’s display size. This means that large videos can also be scaled to the available width.

<code html> 
<video style="max-width: 100%" playsinline controls controlsList="nodownload"> 
  <source src="dateiname.mp4" type="video/mp4" /> 
  <source src="dateiname.webm" type="video/webm" /> 
  <source src="dateiname.ogg" type="video/ogg" />   
</video> 
</code> 

Other options allow you to start the video automatically (''autoplay'', more on this below) or hide the control elements at the bottom. 

The ''playsinline'' parameter ensures that the video does not automatically switch to full screen mode on mobile devices. However, this does not mean that this would happen automatically on all devices if it is omitted. 

==== Play automatically (mute) ==== 

Most mobile devices (smartphones, some tablets) and sometimes also the desktop version of Safari block the autoplay function (''autoplay'') to start a media file (audio or video) automatically. 

One option is to start the videos''muted''. Many devices and browsers allow this. 

<code html> 
<video width="max-width: 100%" playsinline autoplay muted controlsList="nodownload"> 
  <source src="dateiname.mp4" type="video/mp4" /> 
  <source src="dateiname.webm" type="video/webm" /> 
  <source src="dateiname.ogg" type="video/ogg" />   
</video> 
</code> 

Another option is to use JavaScript to try to start the video (possibly only after interaction with the page) and display the play button if this does not work.
==== 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 style="max-width: 100%" controls controlsList="nodownload" id="stimulus">
  <source src="filename.mp4" type="video/mp4" />
  <source src="filename.webm" type="video/webm" />
  <source src="filename.ogg" type="video/ogg" />
</video>


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

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

// Hide controls once it plays
SoSciTools.attachEvent(video, "play", function(evt) {
  video.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(video, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});

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

==== Control playback ====

You can control the playback of the video with relatively little effort. The following [[:en:create:javascript|JavaScript]] code writes the playback position to an internal variable every 0.1 seconds. This saves the position up to which the video was viewed in the data record.

  * Create an [[:en:create:questions:internal|internal variable]] (in the following example "IV01_01"),
  * Click on the variable in the navigation for editing and select that the data should be transmitted periodically in the background (this way, people who close the questionnaire window are also recorded).
  * Drag the question with the internal variable to the questionnaire page with the video.
  * Make sure that the ''<video>'' tag has an HTML ID, e.g. ''%%<video id="stimulus">%%''
  * Insert the following JavaScript code under Video and internal variable within a ''<script>'' tag.

<code javascript>
window.setInterval(function() {
  var video = document.getElementById("stimulus"); 
  var intVar = document.getElementById("IV01_01");  
  intVar.value = video.currentTime;
}, 100);
</code>

The identifiers "stimulus" and "IV01_01" must be adapted to the HTML IDs of your video and the internal variable.