====== Mediendateien im Fragebogen (Audio, Video, Dokumente) ======

Onlinefragebögen zeichnen sich gegenüber gedruckten Fragebögen, glaubt man der Methodenliteratur, u.a. dadadurch aus, dass sie audiovisuelles Material enthalten können. Den Aufwand zur Produktion von Medieninhalten nehmen zwar nur wenige Forschungsprojekte tatsächlich auf sich -- aber wenn Sie ein Dokument (z.B. PDF), eine Audiodatei oder ein Video in den Fragebogen einbinden möchten, hilft Ihnen dieses Kapitel weiter.

**Wichtig:** Nahezu alle Mediendateien (Bilder, Musik, Tonaufnahmen, Videos und auch Texte) unterliegen dem Urheberrecht. Das heißt: Sie dürfen ohne schriftliche Genehmigung der Rechteinhaber __nicht__ veröffentlicht oder verändert werden. Das gilt auch für kostenlos zugängliches Material (z.B. YouTube-Videos) und ändert sich auch nicht dadurch, dass man das Material bearbeitet (z.B. Videos schneiden). Bei Missachtung drohen eine teure Abmahnung (von einigen hundert bis mehrere tausend Euro) und die Sperrung des Videomaterials mitten unter der Erhebung.

**Hinweis:** Bilder in Internet-tauglichen Formaten (s. [[images|Bilder]]) kann man auf www.soscisurvey.de standardmäßig hochladen. Das Hochladen von Mediendateien muss wegen des oftmals geringen Bewusstseins um Urheberrechte zunächst durch den Administrator des Servers freigegeben werden.

**Wichtig:** Teilen Sie es Ihren Teilnehmern möglichst frühzeitig mit, falls Ihr Fragebogen Multimedia-Dateien verwendet. Weisen Sie bereits in der Einladung oder beim Link darauf hin, damit die Teilnehmer nicht im Großraumbüro oder in der U-Bahn mit dem Ausfüllen beginnen und beim Video dann abbrechen müssen. Platzieren Sie auf der ersten oder zweiten Fragebogen-Seite ein Text-Video/-Musikstück, damit die Teilnehmer Kopfhörer anstecken oder die Lautsprecher einschalten.


===== Mediendateien hochladen =====

Während Fragen und Texte direkt in einer Datenbank gespeichert werden, müssen [[images|Bilder]] und Mediendateien als eigene Dateien auf den Befragungsserver hochgeladen werden (**Bilder und Mediendateien** im Menü). Dabei muss man im Wesentlichen zwei Dinge beachten:

  - Die Dateien müssen in einem geeigneten Dateiformat vorliegen. Es gibt unzählige Dokument-Formate (z.B. PDF, DOC, DOCX, ODT, TXT, RTF alleine für Textdokumente), aber nur sehr wenige sind tatsächlich für die Darstellung im Onlinefragebogen geeignet. Neben der Dateigröße ist es dabei entscheidend, dass möglichst alle Teilnehmer das Dokument überhaupt anzeigen können -- gerade bei proprietären Formaten (z.B. Word DOC, Windows AVI, etc.) ist das häufig nicht der Fall.
  - Mit dem hochladen publizieren Sie die Datei im Internet. Weltweit und prinzipiell für jeden zugänglich. Das dürfen Sie nur, wenn Sie alle notwendigen Verwertungsrechte an den Inhalten haben. Das beginnt bei Textrechten, reicht über Komposition und Interpretation bei Musikstücken und endet lange noch nicht bei den Bildrechten für Bilder und Videos. Sofern im Material Personen gezeigt werden, müssen auch die Persönlichkeitsrechte gewahrt bleiben. Kurzum: Wann immer Sie fremdes Material als Basis verwenden (z.B. auch als Hintergrundmusik oder nur in Ausschnitten) oder Personen zeigen, benötigen Sie eine schriftliche Genehmigung, dass Sie das dürfen. Ansonsten drohen Abmahnungen. Eine Abmahnung kostet in der Regel zwischen einigen hundert und mehreren tausend Euro.

**Hinweis:** Im Internet wird die Groß- und Kleinschreibung streng beachtet. Wenn Sie eine Datei "Dokument.pdf" hochladen und eine Datei "dokument.pdf" verlinken, wird das nicht wie gewünscht funktionieren.


===== Dokument verlinken =====

Die meisten Text- und Bild-Inhalte im Fragebogen wird man als Textbaustein mit HTML formatieren und direkt einbinden. Manchmal muss man aber umfangreichere Dokumente (etwa eine mehrseitige Anleitung) zum Download bereitstellen. Ein Dateiformat, das relativ weite Verbreitung findet, ist PDF.

PDF-Dateien kann man kostenpflichtig mit Adobe Acrobat oder kostenlos mit dem [[http://www.openoffice.org/de/|OpenOffice Writer]] oder [[http://freepdfxp.de/|FreePDF]] erstellen.

Hat man eine Datei auf den Befragungsserver hochgeladen, kann man diese mit dem HTML-Tag ''<a>'' zum Download bereitstellen. Häufig (nicht immer!) öffnen Browser PDF-Dateien in einem neuen Browser-Fenster, anstatt sie als Download anzubieten. Der Zusatz ''target'' sorgt dafür, dass dies in einem neuen Browserfestern oder -tab passiert.

<code html>
<a href="dokument.pdf" target="_blank">Datei herunterladen</a>
</code>

**Hinweis:** Ob eine PDF-Datei im Browser geöffnet oder heruntergeladen wird, entscheidet der Browser bzw. der Teilnehmer -- steuern kann man das als Projektleiter nicht.


===== Audio-Dateien einbinden =====

Es gibt mehrere Dateiformate, die gut für die Verwendung im Internet geeignet sind. Meist wird mp3 das Mittel der Wahl sein, weil die meisten Browser dieses Format problemlos abspielen können.

**Hinweis:** Die hier vorgestellten Lösungen spielen eine Audiodatei jeweils nur innerhalb einer Fragebogenseite ab. Wie diese Beschränkung umgangen werden kann, beschreibt das Kapitel [[:de:create:frameset]].

==== mp3 einfach einbinden ====

Hat man die Audio-Datei im mp3-Format kodiert und auf den Befragungsserver hochgeladen, kann man sie einfach wie einen Textbaustein in den Fragebogen ziehen (**Fragebogen zusammenstellen**). Mit den Darstellungs-Einstellungen {{:button.settings.png?nolink|Einstellungen}} kann man festlegen, wie der EMFF-Player aussehen soll.


==== mp3 via HTML5 einbinden ====

Das HTML5-Tag ''<audio>'' ist mittlerweilen soweit verbreitet, dass man es für Audio-Dateien gut einsetzen kann. Lediglich sehr alte Browser (z.B. Internet Explorer vor Version 9) unterstützen es nicht.

Damit die Audio-Datei in allen aktuellen Browsern funktioniert, sollte Sie in den Formaten mp3 __und__ ogg vorliegen. Allerdings erzielt man mittlerweile auch mit dem mp3-Format eine gut Abdeckung. Um Audio-Dateien in die komprimierten Formate zu konvertieren, gibt es eine Reihe kostenloser Programme, z.B. den Open Source Audio Editor [[http://sourceforge.net/projects/audacity/|Audacity]] in Verbindung mit LAME.

Für die Einbindung legen Sie unter **Textbausteine u. Beschriftungen** einen neuen Textbaustein mit folgendem Inhalt und //Darstellung// "HTML-Code" an:

<code html>
<audio id="audio_with_controls" preload="auto" autoplay controls controlsList="nodownload">
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
  Ihr Browser kann diese Audio-Datei leider nicht abspielen
</audio>
</code>

Der/die Dateinamen werden in den ''<source>''-Tags eingetragen, die Optionen ''controls'' und ''autoplay'' im ''<audio>''-Tag sorgen dafür, dass dem Teilnehmer Bedienelemente angezeigt werden und dass das Abspielen automatisch startet -- für weitere Optionen s. [[https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/audio|SelfHTML: Audio]].

Mit CSS-Formatierungen kann man die Größe des Players einstellen oder ihn komplett verschwinden lassen. Beachten Sie aber, dass mancher Browser den Befehl zum automatischen Abspielen womöglich ignoriert (z.B. auf einem Smartphone, um das Datenvolumen nicht zu stark zu belasten).

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

**Hinweis:** Die meisten Mobilgeräte (Smartphones, einige Tablets) und teilweise auch die Desktop-Version von Safari blockieren die Autoplay-Funktion, um eine Mediendatei (Audio oder Video) automatisch zu starten. Für diesen Fall sollten Sie ein JavaScript vorsehen, welches die Bedienelemente nach kurzer Zeit einblendet, wenn die Mediendatei nicht startet. Zum Beispiel:

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


===== Videos einbinden =====

**Wichtig:** Wer sich mit Urheberrechten nicht weiter auseinandergesetzt hat, der denkt mitunter, öffentlich und kostenlos zugängliche Videos (z.B. auf YouTube) dürften ohne weiteres im eigenen Fragebogen verwendet werden. Das ist __falsch__. Auch bei solchen Videos gilt das Urheberrecht!


==== Sonderfall YouTube Videos ====

Wer ein Video auf YouTube (und vergleichbare Plattformen) hochlädt, der überträgt an die Plattform eine ganze Reihe von Verwertungsrechten. Das kann in Befragungsprojekten sehr hilfreich sein, denn YouTube bietet seinerseits eine Möglichkeit, Videos direkt in externe Websites (etwa einen Onlinefragebogen) einzubinden.

Dafür ruft man das Video in YouTube auf, klickt auf den Knopf //Teilen//, dann auf //Einbetten//, kopiert den HTML-Code in einen Textbaustein (**Textbausteine und Beschriftungen**) und zieht diesen Textbaustein in den Fragebogen (**Fragebogen zusammenstellen**). Unter Umständen muss das ''%%http://%%'' durch ein ''%%https://%%'' ersetzt werden (s. Hinweis unten).

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

Durch den HTML-Code wird (weitgehend unsichtbar) eine YouTube-Website im Fragebogen geöffnet und der YouTube-Player geladen. Man muss die Datei weder selbst hochladen noch sich mit Urheberrechten auseinandersetzen. Dafür kann YouTube eigene Werbung in das Video einblenden.

**Warnung:** Da die eingebundene oder vorangestellte Werbung von Teilnehmer zu Teilnehmer variiert, kann die direkte Einbindung zu schweren methodischen Probleme führen. In diesem Fall hilft es nur, schriftlich die Einverständnis des Urhebers einzuholen und das Video selbst im Befragungsprojekt hochzuladen.

**Hinweis:** Der Zugriff auf www.soscisurvey.de erfolgt in aller Regel verschlüssel via HTTPS. Manche Browser verhindern das Einbinden von unverschlüsselten Inhalten via iFrame. Stellen Sie beim Einbinden externer Inhalt deshalb sicher, dass diese auch via HTTPS abgerufen werden können und verwenden Sie beim Einbinden die HTTPS-URL.


==== Einbindung mittels HTML 5 ====

Wenn Sie sicherstellen möchten, dass Ihr Video bei nahezu allen Teilnehmern korrekt abgespielt wird, binden Sie es mit dem HTML 5 ''<video>'' Tag in den Fragebogen ein. Der Nachteil dabei ist, dass Sie das Video zunächst in 3 (!) unterschiedliche Formate konvertieren und alle drei Video-Dateien hochladen müssen. Prinzipiell können Sie auch nur eines der Formate verwenden -- dann funktioniert es aber nur in einigen Browsern ([[http://www.hongkiat.com/blog/html5-videos-things-you-need-to-know/|HTML5 Videos: 10 Things Designers Need to Know]]).

**Wichtig:** Sehr alte Versionen des Internet Explorers (bis Version 8) unterstützten das ''<video>'' Tag nicht. In Deutschland sind das ca. 3% der Internet-Nutzer ([[http://caniuse.com/#feat=video|Can I use: Video element]]).

Um das Video in die Formate mp4, ogg und webm zu konvertieren, können Sie unterschiedliche Software verwenden. Recht komfortabel funktioniert es bei [[https://cloudconvert.com/|CloudConvert]] (online, kostenlos für kleinere Dateien) und mit dem [[MiroVideoConverter|http://www.mirovideoconverter.com/]].

In SoSci Survey erstellen Sie nun einen neuen [[:de:create:texts|Textbaustein]] mit folgendem HTML-Code als Inhalt:

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

Dass Sie die Abmessungen mittels ''width'' und ''height'' anpassen können, liegt auf der Hand. Mit weiteren Optionen können Sie das Video automatisch starten lassen oder die Bedienelemente unten ausblenden ([[http://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/video|SelfHTML: HTML/Multimedia und Grafiken/video]]).


==== Optimierte Einbindung ====

HTML5-Videos kann man mittels JavaScript sehr differenziert ansteuern bzw. auf Ereignisse im Video reagieren. Das folgende Beispiel aus HTML-Code (für das Video-Element) und JavaScript-Code sorgt dafür, dass (a) der Weiter-Knopf ausgeblendet wird, solange das Video spielt und (b) die Bedienelemente (Pause, Spulen, ...) verschwinden, sobald der Teilnehmer das Video gestartet hat.

**Tipp:** Erlauben Sie die Bedienelemente auch dann, wenn Sie ''autoplay'' verwenden -- zumindest zu Beginn. Denn Browser auf Mobilgeräten ignorieren die Aufforderung zum automatischen Abspielen in aller Regel, um den mobilen Datenverbrauch zu reduzieren.

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


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

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

// Bedienelemente ausblenden, sobald es abspielt
SoSciTools.attachEvent(video, "play", function(evt) {
  stimulus.removeAttribute("controls");
});
// Weiter-Knopf ausblenden
SoSciTools.attachEvent(window, "load", function(evt) {
  SoSciTools.submitButtonsHide();
});
// Weiter-Knopf am Ende des Videos wieder anzeigen
SoSciTools.attachEvent(stimulus, "ended", function(evt) {
  SoSciTools.submitButtonsDisplay();
});

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


==== Probleme mit dem Speicherplatz ====

Auf www.soscisurvey.de stehen standardmäßig 64 MB Speicherplatz pro Befragungsprojekt zur Verfügung. Für längere Videos in mehreren Formaten ist das zu wenig.

Im Idealfall kann man auf Online-Speicher der eigenen Hochschule oder des eigenen Unternehmens zugreifen und die Video-Dateien dort hochladen. Im HTML-Code gibt man dann einfach die komplette URL der Video-Datei an, z.B. 

<code html>
<source src="https://www.example.com/projectXYZ/dateiname.mp4" type="video/mp4" />
</code>

**Wichtig:** Der Onlinespeicher muss (!) per HTTPS aufrufbar sein. Wenn man versucht, in einer Fragebogen-Seite, die mittels HTTPS verschlüsselt übermittelt wurde, einen unverschlüsselten HTTP-Inhalt einzubinden, dan blockieren das die meisten Browser.

Falls man keinen Zugriff auf eigenen Online-Speicher hat, kann man auf den Anbeiter [[https://www.dropbox.com/|Dropbox]] zurückgreifen. Dort kann man Links erzeugen, um die Dateien freizugeben. Aber damit diese dann im Fragebogen verwendet werden können, muss man dafür sorgen, dass Dropbox direkt die Mediendatei liefert und keine Download-Seite. Dafür muss man den Parameter ''dl=1'' im Link setzen bzw. ändern:

<code html>
<source src="https://www.dropbox.com/s/eccvtg69sxl8ume/video001.mp3?dl=1" type="video/mp4" />
</code>

**Warnung:** In Safari (Apple/MacOS) wurden Probleme mit der Einbindung von Dropbox berichtet. An den Safari-Browser liefert Dropbox offenbar nicht die Mediendatei, sondern eine HTML-Datei. Dies führt dazu, dass Mac-Nutzer das Video nicht ansehen können.

**Warnung:** Dropbox kann die Möglichkeit zum direkten Download jederzeit einschränken.

**Warnung:** Es liegen bisher keine Informationen dazu vor, ob Dropbox den direkten Download auch schon dann einschränkt, wenn viele Nutzer auf die Datei zugreifen.

===== Technische Hürden =====

Egal, ob man Audio-Dateien oder Videos nach obiger Anleitung oder direkt von einem externen Anbieter (z.B. YouTube) einbindet -- es ist niemals sichergestellt, dass der Teilnehmer die Mediendatei wirklich ansehen kann.

Alle oben genannten Möglichkeiten (inkl. YouTube) funktionieren nur, wenn der Teilnehmer einen halbwegs aktuellen Flash-Player installiert hat. Flash ist das meist verbreitete Medien-PlugIn für Browser -- aber ein relevanter Anteil der Nutzer (je nach Zielgruppe 5-20%) hat kein Flash-PlugIn installiert. Außerdem verwenden manche Teilnehmer einen sog. Flash-Blocker, weil sie von der bewegten Werbung auf mancher Website genervt sind.

Die Lösung ist relativ einfach: Binden Sie auf den ersten Seiten des Fragebogens ein kurzes Test-Video/-Audio ein. Die Teilnehmer werden dann gebeten, die Wiedergabe vorab zu testen. Sollte es nicht funktionieren, möge man bitte ...

  * prüfen, ob die Lautsprecher eingeschalten sind,
  * ggf. den aktuellen Flash-Player installieren (Download-Seite im Fragebogen verlinken) und/oder
  * einen eventuellen Flash-Blocker vorübergehend deaktivieren.

**Tipp:** Optional kann die Mediendatei auch eine Information (z.B. eine Zahl) verstecken, also etwa anzeigen und/oder sprechen - nur wer diese Information korrekt in ein Textfeld eingibt, kann den Fragebogen fortsetzen (das erledigt man dann via Filter auf der folgenden Fragebogen-Seite).

Natürlich können noch eine Reihe weiterer Probleme die Wiedergabe verhindern. Das beginnt dabei, dass der Teilnehmer einen hoffnungslos veralteten Browser verwendet (z.B. den Internet Explorer 5) und endet lange noch nicht damit, dass der Abspiel-Knopf nicht gefunden wird (ein erschreckend kleiner Teil der Internetnutzer kann mit dem Begriff "Play-Button" etwas anfangen). Man muss in einer Onlinebefragung unter Umständen damit leben, dass ein Teil der Teilnahmer die Mediendatei einfach nicht abspielen kann. Aber mit den obigen Hinweisen lässt sich dieser Teil normalerweise auf wenige Prozent reduzieren.

Meistens ist es übrigens nicht möglich zu überprüfen, ob der Teilnehmer eine Mediendatei wirklich vollständig angesehen/angehört hat. Dies würde eine spezielle Abspiel-Software erfordern, welche die Information an SoSci Survey übermittelt (gibt es derzeit nicht). Wer keine eigene Software programmieren will, ist mit folgenden Optionen i.d.R. gut bedient:

  * Fragen Sie den Teilnehmer, ob er/sie die Mediendatei vollständig angesehen hat,
  * prüfen Sie bei der Auswertung die Verweildauer auf der entsprechenden Seite ([[:de:results:variables#antwortzeiten|Antwortzeiten]]) oder
  * blenden sie den Weiter-Knopf erst nach einer kurzen Weile ein ([[:de:create:timer-display|Timer: Weiter-Knopf nach bestimmter Zeit einblenden]]). Falls Sie einen Zurück-Knopf erlauben, wählen Sie die Zeitspanne keinesfalls zu lange.
