====== Videos im Fragebogen ======

**Wichtig:** Lesen Sie vorab die Hinweise unter [[:de:create:media]].

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

**Hinweis:** Falls ein Video nicht korrekt abgespielt wird, hilft die Anleitung zur [[:de:general:browser-tools#probleme_mit_audio_video|Lösung von Audio-/Video-Problemen]] weiter.


==== 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//. Markieren Sie die Option für den "erweiterten Datenschutz" -- ansonsten wird das Video in Firefox und anderen Browsern u.U. blockiert. Den von YouTube anschließend angebotenen HTML-Code kopieren Sie in einen Textbaustein (in einer Rubrik Ihrer Wahl auf **Text hinzufügen** klicken) und ziehen Sie diesen Text in den Fragebogen (**Fragebogen zusammenstellen**). Unter Umständen muss das ''%%http://%%'' noch 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:** Wenn YouTube in den Fragebogen eingebunden wird, dann werden durch den Aufruf u.U. personenbezogene Daten an YouTube übermittelt. Dafür ist u.U. eine Einwilligung von der oder dem Befragten erforderlich. Bitte klären Sie diesen Sachverhalt vorab (!) mit der oder dem Datenschutzbeauftragten Ihrer Hochschule, Einrichtung oder Ihres Unternehmens.

**Warnung:** YouTube gestattet sich in den eigenen Nutzungsbedingungen, Werbung in Videos einzubinden. Die eingebundene oder vorangestellte Werbung kann von Teilnehmer zu Teilnehmer variieren. Dadurch kann die direkte Einbindung zu schweren methodischen Problemen führen. In diesem Fall hilft es nur, schriftlich die Einverständniserklärung 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 als mp4-Datei mit dem ''<video>''-Tag in den Fragebogen ein. In SoSci Survey erstellen Sie nun einen neuen Text mit der //Darstellung// "HTML-Code" und folgendem Inhalt:

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

**Hinweis:** Altere Browser und vor allem ältere Mobilgeräte benötigen das Video u.U. in weiteren Formaten als nur mp4. Wenn Sie auf Nummer sicher gehen wollen, konvertieren Sie das Video nicht nur als mp4, sondern auch in die Formate webm und ogg.

Um das Video in die Formate mp4, webm und ogg 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 [[http://www.mirovideoconverter.com/|MiroVideoConverter]].

<code html>
<video width="512" height="288" 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>

Mit weiteren Optionen können Sie das Video automatisch starten lassen (''autoplay'', mehr dazu unten) oder die Bedienelemente unten ausblenden ([[http://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/video|SelfHTML: HTML/Multimedia und Grafiken/video]]).

Der Parameter ''playsinline'' sorgt bei Mobilgeräten dafür, dass das Video nicht automatisch in den Vollbildmodus wechselt. Das bedeutet aber nicht, dass das auf allen Geräten automatisch passieren würde, wenn man es weglässt.


==== Automatisch abspielen (stumm) ====

Die meisten Mobilgeräte (Smartphones, einige Tablets) und teilweise auch die Desktop-Version von Safari blockieren die Autoplay-Funktion (''autoplay''), um eine Mediendatei (Audio oder Video) automatisch zu starten.

Eine Möglichkeit besteht darin, dass man die Videos stumm starten lässt (''muted''). Das erlauben viele Geräte und Browser.

<code html>
<video style="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>

Eine andere Möglichkeit besteht darin, dass man mittels JavaScript versucht, das Video zu starten (evtl. erst nachdem eine Interaktion mit der Seite erfolgte) und ggf. den Abspiel-Knopf anzeigt, wenn das nicht funktioniert.


==== 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 style="max-width: 100%" controls controlsList="nodownload" id="stimulus">
  <source src="dateiname.mp4" type="video/mp4" />
  <source src="dateiname.webm" type="video/webm" />
  <source src="dateiname.ogg" type="video/ogg" />
</video>


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

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

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

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


==== Abspielen kontrollieren ====

Es ist mir relativ wenig Aufwand möglich, das Abspielen des Videos zu kontrollieren. Folgender [[:de:create:javascript|JavaScript]]-Code schreibt die Abspiel-Position alle 0,1 Sekunden in eine interne Variable. So wird im Datensatz gespeichert, bis zu welcher Position das Video angesehen wurde.

  * Erstellen Sie eine [[:de:create:questions:internal|interne Variable]] (im folgenden Beispiel "IV01_01"),
  * klicken Sie die Variable in der Navigation zum Bearbeiten an und wählen Sie aus, dass die Daten periodisch im Hintergrund übertragen werden sollen (so werden auch Personen erfasst, die das Fragebogen-Fenster schließen).
  * Ziehen Sie die Frage mit der internen Variable auf die Fragebogen-Seite mit dem Video.
  * Stellen Sie sicher, dass das ''<video>''-Tag eine HTML-ID trägt, also z.B. ''%%<video id="stimulus">%%''
  * Fügen Sie unter Video und interner Variable innerhalb eines ''<script>''-Tags den folgenden JavaScript-Code ein.

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

Die Kennungen "stimulus" und "IV01_01" müssen an die HTML-IDs Ihres Videos und der internen Variable angepasst werden.