Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:media [26.04.2016 14:10] – [mp3 via HTML5 einbinden] admin
+++ de:create:media [11.12.2023 20:44] (aktuell) – admin
@@ Zeile 37: / Zeile 37: @@
 ===== Audio-Dateien einbinden =====
-Es gibt mehrere Dateiformate, die gut für die Verwendung im Internet geeignet sind. Darunter RealMedia (RMA) und Windows Media (WMA). Allerdings schließen beide Formate einen relevanten Anteil der Nutzer aus. Dahingegen können mittlerweile nahezu alle Internetnutzer Flash abspielen. Die OpenSource Software [[http://emff.sourceforge.net/|EMFF]] basiert auf Flash und kann ihrerseits mp3-Dateien abspielen. Auf dem Server www.soscisurvey.de ist EMFF standardmäßig als PlugIn vorhanden.
+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 ([[https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics#audio_codec_support|Mozilla: Browser Support]]).
 **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]].
@@ Zeile 43: / Zeile 43: @@
 ==== 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.
+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 dafür sorgen, dass das Abspielen automatisch startet.
-**Hinweis:** SoSci Survey bindet die Audio-Datei mittels EMFF-Player ein, der auf Flash basiert. Diese Lösung funktioniert auch in älteren Browsern, aber iOS (iPhone/iPad) unterstützen Flash nicht. Außerdem blockiert der aktuelle Firefox Flash-Inhalte zunächst, sodass man sie vor dem Abspielen u.U. erst explizit anklicken muss (auch wenn das automatische Abspielen aktiviert wurde). Wir empfehlen daher eine Einbindung via HTML5.
@@ Zeile 52: / Zeile 50: @@
 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]].
+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" controls autoplay>
+<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" />
@@ Zeile 69: / Zeile 67: @@
 <code html>
-<audio id="audio_with_controls" controls style="width: 200px; height: 80px">
+<audio id="audio02" controls  controlsList="nodownload" style="width: 200px; height: 80px">
   <source src="audio.mp3" type="audio/mpeg" />
 </audio>
@@ Zeile 75: / Zeile 73: @@
 <code html>
-<audio id="audio_with_controls" controls style="position: absolute; left: -9999px; top: -9999px">
+<audio id="audio03" controls controlsList="nodownload" style="position: absolute; left: -9999px; top: -9999px">
   <source src="audio.mp3" type="audio/mpeg" />
 </audio>
 </code>
-**Hinweis:** Aufgrund einer technischen Einschränkung ist es derzeit leider nicht (!) möglich, den HTML-Code für eine Audio-Datei direkt in einem Element "HTML-Code" beim **Fragebogen zusammenstellen** zu verwenden. Für die Einbindung ist ein Textelement erforderlich.
+**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>
-==== mp3 via Flash einbinden ====
+Ebenfalls mittels JavaScript kann man die Steuerung der Audio-Datei auch noch weiter verfeinern. So kann man über das JavaScript-Ereignis (Event) ''ended'' etwa nach dem Abspielen der Audiodatei automatisch zur nächste Seite weiterleiten.
-Falls man zusätzliche Funktionen benötigt (etwa die Datei automatisch abspielen) oder die Datei dynamisch austauschen muss (z.B. als randomisierten Stimulus), kann man sich mit dem [[http://emff.sourceforge.net/codegenerator/|EMFF code generator]] den entsprechenden HTML-Code zur Einbindung in den Fragebogen erstellen lassen. Anschließend muss man nur noch den Pfad zum EMFF-Player zweimal (!) anpassen (''../plugins/emff/'', s. Code-Beispiel unten), den HTML-Code als Textbaustein (**Textbausteine u. Beschriftung**) speichern und selbigen in den Fragebogen ziehen (**Fragebogen zusammenstellen**).
 <code html>
-<object type="application/x-shockwave-flash" data="../plugins/emff/emff_standard.swf" width="110" height="34">
+<audio id="audio05" preload controlsList="nodownload" autoplay>
-  <param name="movie" value="../plugins/emff/emff_standard.swf">
+  <source src="someAudio.mp3">
-  <param name="FlashVars" value="src=audiodatei.mp3&amp;autostart=yes">
+</audio>
-</object>
+<script type="text/javascript">
+<!--
+window.addEventListener("load", function() {
+  window.setTimeout(function() {
+    // Audio-Element anhand der ID identifizieren
+    var audio = document.getElementById("audio05");
+    // Kontrollelemente einblenden, falls das Video nicht automatisch anläuft
+    if (audio.paused) {
+      audio.setAttribute("controls", "yes");
+    }
+    // Nach dem Abspielen automatisch weiter zur nächsten Seite
+    audio.addEventListener("ended", SoSciTools.submitPage);
+  }, 250);
+});
+// -->
+</script>
 </code>
-**Hinweis:** Ist EMFF auf einem Befragungsserver nicht vorhanden, kann man die notwendigen Flash-Dateien (SWF) von der EMFF-Homepage herunterladen und im Benutzerprojekt hochladen.
+**Tipp:** Wenn das eingebundene Video nicht korrekt abspielt, dann werfen Sie einen Blick in die [[:de:general:browser-tools#probleme_mit_audio_video|Fehlerkonsole Ihres Browsers]].
+==== Hinweise zu Hörstudien ====
+Wenn der Audio-Stimulus nicht nur Musik oder Sprache transportieren soll, sondern wenn es um feinste Nuance geht, dann kann die verlustbehaftete mp3-Kompression zum Problem werden. Diese ist zum Beispiel nicht darauf optimiert, das Klopfen eines Spechts zu komprimieren.
+Die verlustlose Audiokompression ist im Kontext einer Onlinebefragung aber gar nicht so trivial:
+  * Das unkomprimierte PCM-Format (WAV-Dateien) wird vom veralteten Internet Explorer (der dennoch häufig genutzt wird) nicht unterstützt ([[https://caniuse.com/?search=wav|Can I Use: WAV]]), vor allem braucht das Format aber sehr viel Speicherplatz. SoSci Survey erlaubt deshalb keine Uploads für WAV-Dateien.
+  * Eine verlustfrei komprimierte Alternative zum WAV-Format is FLAC ([[https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs|Mozilla: Audio Codecs]]). Auch hier bleibt der Internet Explorer außen vor und braucht evtl. eine zusätzliche Alternative angeboten -- aber zumindest verschwendet das Format keinen unnötigen Speicherplatz und Bandbreite bei den Befragten.
+  * Eine dritte Option sind mp3-Dateien, die mit sehr hoher Qualität (z.B. 320kbps) komprimiert werden. Diese werden von allen Browsern abgespielt und bei hoher Bitrate werden viel weniger Aspekte des Tonsignals entfernt als bei der Standard-Kompression mit 128kbps.
+Beachten sie aber, dass es in Online-Befragungen noch weitere Grenzen für die authentische Wiedergabe gibt. Der Arbeitsrechner ist in aller Regel kein Tonstudio.
+  * Manche Befragte können gar kein Audio-Signal hören, z.B. weil sie sich in einem Großraumbrüo befinden oder weil kein Lautsprecher oder Kopfhörer am Computer angschlossen ist.
+  * Andere Befragte können das Audio nur mit relevanten Nebengeräuschen hören, etwa im öffentlichen Nahverkehr. Und selbst zuhause ist oftmals kein ungestörter Hörgenuss gewährleistet: Es sind Familienmitglieder anwesend, der Nachbar mährt den Rasen oder der Paketbote klingelt...
+  * Die meisten Befragten werden zuhause nur schlechte Audio-Hardware besitzen, die tiefe Töne nicht wiedergeben kann und auch sonst keinen geraden Frequenzverlauf liefert.
+  * Wenn Bluetooth-Kopfhörer zum Einsatz kommen, wird das Signal zwischen Computer und Kopfhörer potenziell nochmal verlustbehaftet komprimiert.
@@ Zeile 100: / Zeile 148: @@
 **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 ====
@@ Zeile 105: / Zeile 156: @@
 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).
+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>
@@ Zeile 113: / Zeile 164: @@
 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.
+**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 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.
@@ Zeile 124: / Zeile 177: @@
 **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) und der [[http://www.videolan.org/vlc/|VLC Media Player]] (offline) kann ebenfalls dafür eingesetzt werden. Gehen Sie beim VLC wie folgt vor (basierend auf [[http://klaesimage.com/wordpress/?p=265|Using VLC Media Player to convert video]]):
+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]].
-  * VLC Media Player öffnen
+In SoSci Survey erstellen Sie nun einen neuen [[:de:create:texts|Textbaustein]] mit folgendem HTML-Code als Inhalt:
-  * Menü: Medien -> Konvertieren/Speichern
-  * Datei -> File Selection -> Add -> Video auswählen
-  * Konvertieren/Speichern
-  * Einstellungen -> Profil: "Video - H.264 + MP3 (MP4)"
-  * Ziel -> Zieldatei -> Durchsuchen -> Verzeichnis auswählen und Dateiname mit Endung .mp4 angeben (z.B. video.mp4)
-  * Start
-Evtl. müssen die Einstellungen für das Video (dort wo man das Profil auswählt) noch angepasst werden -- zum Beispiel die Video-Bitrate.
+<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>
-Dieses Procedere wird mit den Profilen "Video - VP80 + Vorbis (WebM)" -> Dateiendung ".webm" und "Video - Theora + Vorbis (OGG)" -> Dateiendung ".ogg" wiederholt. Öffnen Sie alle drei Dateien, um das Ergebnis (Qualität von Bild und Ton) zu überprüfen.
+Dass Sie die Abmessungen mittels ''width'' und ''height'' anpassen können, liegt auf der Hand. So kann man große Videos auch auf die verfügbare Breite skalieren.
-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>
+<video style="max-width: 100%" playsinline controls controlsList="nodownload">
-  <source src="dateiname.ogg" type="video/ogg" />
   <source src="dateiname.mp4" type="video/mp4" />
   <source src="dateiname.webm" type="video/webm" />
+  <source src="dateiname.ogg" type="video/ogg" />
 </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]]).
+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.
-==== Einbindung mittels Flash ====
-Anfang des 21. Jh war Flash das Mittel der Wahl, um Videos im Internet abzuspielen. Inzwischen ist diese Einbindung mit zwei großen Nachteilen behaftet: Erstens funktioniert es nicht auf dem iPhone/iPad und zweitens wird das Flash-PlugIn des Browsers mitunter wegen Sicherheitsbedenken deaktiviert.
+==== Automatisch abspielen (stumm) ====
-Eine sehr praktische Hilfe dabei ist der [[http://www.dvdvideosoft.com/products/dvd/Free-Video-to-Flash-Converter.htm|Free Video to Flash Converter]]. bei der Installation kann man die vorgeschlagenen Toolbars getrost deaktivieren/nicht installieren, gleiches gilt für enthaltene Zusatzsoftware (z.B. TuneUp Utilities). Das Programm hilft dabei, Videos in Flash-Videos umwandeln und im Internet abzuspielen:
+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.
-  - Programm starten (nach dem ersten Start: //Options// -> //Language// "German" -> //OK//)
+Eine Möglichkeit besteht darin, dass man die Videos stumm starten lässt (''muted''). Das erlauben viele Geräte und Browser.
-  - //Dateien hinzufügen//
-    - Die gewünschte Datei auswählen (das Programm unterstützt viele gängige Dateiformate)
-    - //Öffnen//
-  - //Format//
-    - "FLV"
-    - Die Voreinstellung "High Quality" mit 1 MBit/s ist eine gute Ausgangsbasis. Evtl. muss man die Bildgröße und/oder Datenrate noch ein wenig anpassen)
-  - Unter //Player// kann man noch viele Optionen festlegen, welche Bedienknöpfe angezeigt werden, etc.
-  - Da Kreuzchen bei //HTML-Beispieldatei anzeigen// sollte gesetzt sein
-  - //Konvertieren// -- das dauert dann eine Weile
-Der Converter speichert im Ausgabeverzeichnis das Flash-Video (FLV) und den eigentlichen Player zum Abspielen des Videos (SWF-Datei). Unter Umständen ist auch noch eine Steuerungsdatei (XML) enthalten. Die zwei (oder drei) Dateien lädt man in das Befragungsprojekt hoch -- eine eventuelle HTML- oder CSS-Datei im Ausgabeverzeichnis brauchen Sie nicht hochzuladen. Die Video-Datei (FLV) darf auf www.soscisurvey.de maximal 64 MB umfassen.
+<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>
-**Wichtig:** In neueren Versionen des Free Video to Flash Converter weicht die Ausgabe u.U. stark davon ab, was hier in der Anleitung beschrieben ist. In diesem Fall sind einige Anpassungen notwendig ([[http://forum.onlineforschung.org/viewtopic.php?p=25362#p25362|Support-Forum: Einbindung von Flash Video]]).
+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.
-Nach der Konvertierung öffnet sich im Browser eine Seite, auf der der nötige HTML-Code steht (hat man das Fenster geschlossen, kann man auch einfach nochmals die HTML-Datei öffnen, die das Programm im Ausgabeverzeichnis erzeugt hat). Der relevante HTML-Code steht unter //Copy the code from the box below to your web page//, die ''<noscript>''-Zeile kann man ggf. anpassen -- sie wird angezeigt wenn JavaScript deaktiviert ist und das Video vermutlich nicht angezeigt werden kann (s. Beispiel unten).
-Diesen HTML-Code speichert man am besten als Textbaustein (**Textbausteine und Beschriftungen**). Im Textbaustein muss als //Darstellung// die Option "HTML-Code" ausgewählt werden. Anschließend zieht man den Textbaustein in den Fragebogen (**Fragebogen zusammenstellen**).
+==== 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>
-<object id="Object2" type="application/x-shockwave-flash" data="player_flv_classic.swf" width="480" height="360">
+<video style="max-width: 100%" controls controlsList="nodownload" id="stimulus">
-  <noscript>Ihr Browser unterstützt leider keine Flash oder JavaScript.</noscript>
+  <source src="dateiname.mp4" type="video/mp4" />
-  <param name="movie" value="player_flv_classic.swf" />
+  <source src="dateiname.webm" type="video/webm" />
-  <param name="wmode" value="opaque" />
+  <source src="dateiname.ogg" type="video/ogg" />
-  <param name="allowScriptAccess" value="sameDomain" />
+</video>
-  <param name="quality" value="high" />
-  <param name="menu" value="true" />
-  <param name="autoplay" value="false" />
+<script type="text/javascript">
-  <param name="autoload" value="false" />
+<!--
-  <param name="FlashVars" value="configxml=FlickAnimation.xml" />
-</object>
+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>
-**Tipp:** Die Flash-Anwendung zum Abspielen der FLV-Dateien unterstützt noch eine große Anzahl weiterer Optionen, s. [[http://www.dvdvideosoft.com/guides/new-multi-flash-player-settings.htm|DVD Video Soft: Multi Flash Player Settings]]
+==== 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.
+==== 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.
+=== Befragungsserver der Hochschule ===
+**Tipp:** Prüfen Sie, ob Ihre Hochschule einen eigenen Befragungsserver betreibt ([[https://www.soscisurvey.de/de/campus|Verfügbarkeit von SoSci Survey an Ihrer Hochschule]]) -- auf lokalen Befragungsservern laufen in aller Regel deutlich weniger Befragungen als auf www.soscisurvey.de, deshalb kann der Speicherplatz dort oftmals weniger restriktiv vergeben werden. Sie können bestehende Projekte problemlos umziehen ([[:de:general:copy-project]]).
+=== Web-Speicherplatz der Hochschule ===
+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>
+<video width="512" height="288" controls controlsList="nodownload">
+    <source src="https://www.example.com/projectXYZ/dateiname.mp4" type="video/mp4" />
+</video>
+</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, dann blockieren das die meisten Browser.
+=== Cloud-Speicher ===
+Falls man Zugriff auf [[https://b2drop.eudat.eu|B2Drop]], [[https://syncandshare.lrz.de/login|Sync&Share]], [[https://www.hochschulcloud.nrw/|Sciebo]] oder einen anderen wissenschaftlichen Cloud-Speicher hat, kann man auch dort Videos ablegen. Nach dem Hochladen der Datei auf Sync&Share wählt man neben der Datei das Symbol zum Erstellen eines Download-Links (Ketten-Symbol). Auf der Download-Seite, die sich dann öffnet, steht in einem Kästchen "Download" und der Name der Datei -- hierbei handelt es sich um einen Link. Mit einem Rechtsklick auf den Link können Sie das Link-Ziel in die Zwischenablage kopieren und anschließend im ''<video>''-Tag verwenden:
+<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>
+**Wichtig:** Die meisten Cloudspeicher kennen unterschiedliche Links. Der eine Link öffnet eine Internetseite, auf welcher das Video angezeigt oder zum Download angeboten wird. Dieser beinhaltet bei Sync&Share zum Beispiel ein ''getlink/''. Der andere Link führt direkt zum Download und beinhaltet z.B. ein ''dl/'' oder ein ''/download''. Nur der Download-Link funktioniert im ''<video>''-Tag. Hier ein Beispiel für Sync&Share.
+  * Link zur Anzeige der Datei\\ ''%%https://syncandshare.lrz.de/getlink/QKpc3cSZlxs4MSwziVRyCk/StimulusB1.mp4%%''
+  * Link zum Download und zur Einbindung der Datei\\ ''%%https://syncandshare.lrz.de/dl/QKpc3cSZlxs4MSwziVRyCk/StimulusB1.mp4%%''
+=== Google Drive, Dropbox und andere ===
+Wenn man nicht mittels JavaScript auf das Video zugreifen muss -- also z.B. um das Video in Abhängigkeit bestimmter Ereignisse abzuspielen, zu pausieren oder Zeitstempel aufzuzeichnen -- dann kann man auch externe Speicherdienste verwenden, welche nicht direkt die mp4-Datei ausliefern. Das kann YouTube sein (s. oben) oder Cloud-Speicherdienste.
+Wenn man Videos auf Google Drive oder Dropbox ablegt und von dort aus freigibt, dann binden diese Dienste eigenen eigenen Video-Player ein. Man bekommt also nicht das Video selbst, sondern nur eine Website, welche das Video abspielt. Solch eine externe Website kann man (wie auch bei YouTube) mittels ''<iframe>'' in den Fragebogen einbinden.
+<code html>
+<iframe width="420" height="315" src="https://drive.google.com/uc?export=preview&id=1Mu_zc...etc" frameborder="0" allowfullscreen allow="autoplay" style="display: block; border: 0 auto;"></iframe>
+</code>
+**Warnung:** Wann immer die Daten von einem dritten Server geladen werden, dann wird die IP-Adresse der Befragten an diesen Server übermittelt. Klären Sie mit dem Datenschutzbeauftragten Ihrer Einrichtung, ob dies ein Problem darstellt und Sie ggf. eine zusätzliche Einwilligung der Befragten benötigen.
+**Warnung:** Es ist nicht auszuschließen, dass externe Cloud-Dienste die Anzahl der Aufrufe (z.B. pro 24 Stunden) begrenzen. Bitte befragen Sie den jeweiligen Anbieter und/oder die Suchmaschine Ihres Vertrauens, ob und welche Limits der gewählte Cloud-Speicherdienst verwendet.
 ===== Technische Hürden =====
@@ Zeile 212: / Zeile 355: @@
   * 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.