Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- de:create:media [08.06.2019 11:23] – [Probleme mit dem Speicherplatz] typo jxh101
+++ de:create:media [26.09.2025 09:29] (aktuell) – admin
@@ Zeile 32: / Zeile 32: @@
 </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.
+**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 zuverlässig.
-===== Audio-Dateien einbinden =====
+===== Musik, Audiodateien und Videos =====
-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.
+In vielen Studien soll die Darstellung von Audio- und Videodateien individuell angepasst werden. Lesen Sie in folgenden Anleitungen, wie das funktioniert:
-**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]].
+  * [[:en:create:video]]
+  * [[:en:create:audio]]
+  * [[:en: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.
+===== HTML-Dateien verwenden =====
+SoSci Survey erlaubt das Hochladen von Webseiten (HTML, CSS und JS Dateien), die etwa zur Information oder als Stimuli dienen können. Einen speziellen Anwendungsfall beschreibt die Anleitung [[:de:create:frameset]].
-==== mp3 via HTML5 einbinden ====
+Die folgenden Beispiele gehen davon aus, dass Sie eine Datei ''stimulus.html'' (und eventuell zugehörige CSS- und/oder JS-Dateien) in das Projektverzeichnis hochgeladen haben.
-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.
+**Wichtig:** Der Server blockiert aus Sicherheitsgründen unter Umständen Script-Inhalte in den HTML-Seiten. Binden Sie die Seiten über ''index.php?html=<Dateiname>'' ein (z.B. ''index.php?html=stimulus.html''), damit Scripte wie erwartet funktionieren. Bei Dateien aus der geschützten Dateiablage ist dieser Umweg nicht erforderlich.
-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.
+HTML-Seite können im Fragebogen so verlinkt werden, dass sie in einem neuen Browser-Tabs öffnen:
-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">
+<a href="stimulus.html" target="_blank">Seite ansehen</a>
-  <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]].
+HTML-Seiten können als ''<iframe>'' auch direkt in den Fragebogen eingebunden werden:
-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">
+<iframe src="stimulus.html" width="100%" height="400"></iframe>
-  <source src="audio.mp3" type="audio/mpeg" />
-</audio>
 </code>
-<code html>
+Beachten Sie, dass die Breite sich hier dem Bildschirm anpasst (Darstellung auf Mobilgeräten), aber die Höhe ist starr. Dies kann dazu führen, dass ein Teil des Inhalts unten abgeschnitten wird beziehungsweise nur durch Scrollen sichtbar wird.
-<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:
+Folgender HTML-Code bindet die Seite so ein, dass das Seitenverhältnis konstant bleibt und kein Rahmen zu sehen ist.
 <code html>
-<audio id="audio04" preload controlsList="nodownload" autoplay>
+<iframe src="stimulus.html" width="100%" style="aspect-ratio: 1.7; border:none;"></iframe>
-  <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>
-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.
+Schwieriger ist eine Anpassung der Höhe, sodass das ''<iframe>'' auf schmalen Bildschirmen länger (höher) wird. Dafür ist JavaScript erforderlich ([[:de:create:javascript]]).
-<code html>
+**Tipp:** Wenn möglich, speichern Sie den HTML-Code des Stimulus direkt als **Text** mit //Darstellung// "HTML-Code" im **Fragenkatalog**, und ziehen Sie den entsprechenden Text dann in die Fragebogen-Seite.
-<audio id="audio05" preload controlsList="nodownload" autoplay>
-  <source src="someAudio.mp3">
-</audio>
-<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>
+===== 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.
-===== 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!
+==== 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]]).
-==== 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.
+==== Web-Speicherplatz der Hochschule ====
-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).
+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>
-<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="https://www.example.com/projectXYZ/dateiname.mp4" type="video/mp4" />
-  <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]]).
+**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.
-==== Optimierte Einbindung ====
+==== Cloud-Speicher ====
-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.
+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:
-**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">
+<video width="512" height="288" controls controlsList="nodownload">
-  <source src="dateiname.ogg" type="video/ogg" />
+    <source src="https://syncandshare.lrz.de/dl/fiR1vpLSm7zeDmYRoxRAiAQF/sample.mp4" type="video/mp4" />
-  <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>
+**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.
-==== Probleme mit dem Speicherplatz ====
+  * 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%%''
-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.
+==== Google Drive, Dropbox und andere ====
-<code html>
+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.
-<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, dann 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:
+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>
-<source src="https://www.dropbox.com/s/eccvtg69sxl8ume/video001.mp3?dl=1" type="video/mp4" />
+<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:** 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:** 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:** Dropbox kann die Möglichkeit zum direkten Download jederzeit einschränken.
+**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.
-**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 =====
@@ Zeile 233: / Zeile 135: @@
 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.
+Binden Sie auf den ersten Seiten des Fragebogens ein kurzes Test-Video/-Audio ein. Die Teilnehmer werden dann gebeten, die Wiedergabe vorab zu testen.
-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).