Differences

This shows you the differences between two versions of the page.

--- en:create:media [20.12.2019 17:37] – admin
+++ en:create:media [26.09.2025 09:33] (current) – admin
@@ Line 20: / Line 20: @@
-===== Linking documents =====
+===== Linking Documents =====
 Most text and image contents in a questionnaire are formatted as text elements with HTML and directly embedded. However, longer documents (such as multiple-page instructions) may need to be linked as a downloadable file.  A widely-used file format is PDF.
@@ Line 34: / Line 34: @@
 **Note:** Whether the PDF file is opened in the browser or downloaded depends on the browser, or rather, the participant’s settings, and can’t be controlled by the researcher.
+===== Music, Audio Files and Videos =====
-===== Incorporating audio files =====
+In many studies, embedding audio and video files needs to be customised. Read the following instructions to find out how this works:
-There are several file formats that are suitable for use online. Usually, mp3 is used because this is the format compatible with the most browsers.
+  * [[:de:create:video]]
+  * [[:de:create:audio]]
+  * [[:de:create:frameset]]
-**Note:** The solutions below will play the audio file on one specific questionnaire page. When clicking to the next page, it stops. If you need to bypass this restriction, please read [[:en:create:frameset]].
-==== Simple embedding of an mp3 ====
+===== Using HTML files =====
-If an audio file is saved in mp3 format and uploaded to the host server, it can simply be dragged into the questionnaire like a text element (**Compose Questionnaire**). With the display settings {{:button.settings.png?nolink|Einstellungen}}, you may configure the audio element to start playing automatically.
+SoSci Survey allows you to upload web pages (HTML, CSS and JS files) that can be used for information or as stimuli. The instructions [[:en:create:frameset]] describe a specific use case.
+The following examples assume that you have uploaded a file called ''stimulus.html'' (and any associated CSS and/or JS files) to the project directory.
-====Embedding of an mp3 using HTML5====
+**Important:** For security reasons, the server may block script content in HTML pages. Integrate the pages via ''index.php?html=<filename>'' (e.g. ''index.php?html=stimulus.html'') so that scripts work as expected. This workaround is not necessary for files from the protected file storage.
-Since the HTML5 tag ''<audio>'' has become quite common now, it is well suited for embedding audio files. Only very outdated browsers (e.g. Internet Explorer older than version 9) do not support this tag.
+HTML pages can be linked in the questionnaire so that they open in a new browser tab:
-In order to make sure the audio file is played in all contemporary browsers, it should be present in mp3 __and__ ogg format. However, mp3 alone already provides a decent coverage. There is a number of free tools available for conversion into compressed file formats, such as the Open Source Audio Editor [[http://sourceforge.net/projects/audacity/|Audacity]] when used together with LAME.
-To embed a file, create a new [[en:create:texts|Text element]] in **Text Elements and Labels** with //Formatting// “HTML code”, and add the following content:
 <code html>
-<audio id="audio_with_controls" preload="auto" autoplay controls controlsList="nodownload">
+<a href="stimulus.html" target="_blank">View page</a>
-controls controlsList="nodownload">
-  <source src="audio.mp3" type="audio/mpeg" />
-  <source src="audio.ogg" type="audio/ogg" />
-  Your browser is not able to play this audio file
-</audio>
 </code>
-The file name(s) are entered in the ''<source>'' tags, while the options ''controls'' and ''autoplay'' enable controls and automatic playback. For more options, see [[http://www.w3schools.com/html/html5_audio.asp|w3schools: Audio]].
+HTML pages can also be embedded directly into the questionnaire as ''<iframe>''.
-CSS formatting can be used to either adjust player size or to hide the player entirely. Please keep in mind that some browsers might ignore the autoplay setting, e.g. on mobile devices with limited data usage).
 <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>
+Please note that the width adapts to the screen (display on mobile devices), but the height is fixed. This can result in part of the content being cut off at the bottom or only being visible by scrolling.
-<audio id="audio03" controls controlsList="nodownload" style="position: absolute; left: -9999px; top: -9999px">
-  <source src="audio.mp3" type="audio/mpeg" />
-</audio>
-</code>
-**Note:** Most mobile devices (smartphones, some tablets) and sometimes the desktop version of Safari block the autoplay function to play a media file (audio or video) automatically. In this case, you should provide a JavaScript that displays the control elements after a short time if the media file does not start. For example:
+The following HTML code embeds the page so that the aspect ratio remains constant and no frame is visible.
 <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>
-JavaScript can be used to further refine the control of the audio file. For example, you can use the JavaScript event ''ended'' to automatically forward to the next page after the audio file has been played.
+It is more difficult to adjust the height so that the ''<iframe>'' becomes longer (higher) on narrow screens. This requires JavaScript ([[:en:create:javascript]]).
-<code html>
+**Tip:** If possible, save the HTML code of the stimulus directly as **Text**, setting //Display// to "HTML code" in the **List of Questions**, and then drag the corresponding text into the questionnaire page.
-<audio id="audio05" preload controlsList="nodownload" autoplay>
-  <source src="someAudio.mp3">
-</audio>
-<script type="text/javascript">
-<!--
-window.addEventListener("load", function() {
-  window.setTimeout(function() {
-    // Identify audio element by ID
-    var audio = document.getElementById("audio05");
-    // Show controls if the video does not start automatically
-    if (audio.paused) {
-      audio.setAttribute("controls", "yes");
-    }
-    // Automatically continues to the next page after playback
-    audio.addEventListener("ended", SoSciTools.submitPage);
-  }, 250);
-});
-// -->
-</script>
-</code>
-===== Embedding videos =====
-**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!
+===== Problems with the Web Storage Space =====
-==== The special case of YouTube videos ====
+At www.soscisurvey.de, 64 MB disk space per survey project is available by default. This is too little for longer videos in several formats.
-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//: Copy the HTML code into a text element (**Text Elements and Labels**) and drag it into the questionnaire (**Compose Questionnaire**). If necessary, replace ''%%http://%%'' by ''%%https://%%'' in the HTML code.
+==== Survey server of the University ====
-<code html>
+**Tip:** Check whether your university operates its own survey server ([[https://www.soscisurvey.de/de/campus|Availability of SoSci Survey at your university]]) -- As a rule, significantly fewer surveys are run on local survey servers than on www.soscisurvey.de, so storage space can often be allocated less restrictively there. You can easily move existing projects ([[:en:general:copy-project]]).
-<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:** 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.
+==== Online storage space of the university ====
-**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.
+Ideally, you can access online storage at your own university or company and upload the video files there. In the HTML code, simply enter the complete URL of the video file, e.g.
-====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, ogg and webm formats, you can use different software. It works quite comfortable with [[https://cloudconvert.com/|CloudConvert]] (online, free for smaller files) and with the [[MiroVideoConverter|http://www.mirovideoconverter.com/]].
-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" controls>
+<video width="512" height="288" controls controlsList="nodownload">
-  <source src="filename.ogg" type="video/ogg" />
+  <source src="https://www.example.com/projectXYZ/filename.mp4" type="video/mp4" />
-  <source src="filename.mp4" type="video/mp4" />
-  <source src="filename.webm" type="video/webm" />
 </video>
 </code>
-Obviously, you can use the ''width'' and ''height'' parameters to adjust the video’s display size. Additional options are available to enable autoplay or hide the player controls ([[http://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/Video|SelfHTML: HTML/Multimedia und Grafiken/video]] (German only)).
+**Important:** The online memory must (!) be accessible via HTTPS. If you try to include unencrypted HTTP content in a questionnaire page that was transmitted encrypted via HTTPS, most browsers block this.
-==== Optimierte Einbindung ====
+==== Cloud storage ====
-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.
+If you have access to [[https://b2drop.eudat.eu|B2Drop]], [[https://syncandshare.lrz.de/login|Sync&Share]], [[https://www.hochschulcloud.nrw/|Sciebo]] or another scientific cloud storage, you can also store videos there. After uploading the file to Sync&Share, select the icon next to the file to create a download link (chain icon). On the download page that opens, you will see "Download" and the name of the file in a box - this is a link. By right-clicking on the link, you can copy the link destination to the clipboard and then use it in the ''<video>'' tag:
-**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>
+**Important:** Most cloud storage systems have different links. One link opens a website on which the video is displayed or offered for download. With Sync&Share, for example, this contains a ''getlink/''. The other link leads directly to the download and contains, for example, a ''dl/'' or a ''/download''. Only the download link works in the ''<video>'' tag. Here is an example for Sync&Share.
-==== Problems with the Web Storage Space ====
+  * Link to display the file\\ ''%%https://syncandshare.lrz.de/getlink/QKpc3cSZlxs4MSwziVRyCk/StimulusB1.mp4%%''
+  * Link to download and integrate the file\\ ''%%https://syncandshare.lrz.de/dl/QKpc3cSZlxs4MSwziVRyCk/StimulusB1.mp4%%''
-At www.soscisurvey.de, 64 MB disk space per survey project is available by default. This is too little for longer videos in several formats.
-Ideally, you can access online storage at your own university or company and upload the video files there. In the HTML code, simply enter the complete URL of the video file, e.g.
+==== Google Drive, Dropbox and others ====
-<code html>
+If you do not need to access the video using JavaScript -- e.g. to play or pause the video depending on certain events or to record timestamps -- then you can also use external storage services that do not deliver the mp4 file directly. This can be YouTube (see above) or cloud storage services.
-<source src="https://www.example.com/projectXYZ/filename.mp4" type="video/mp4" />
-</code>
-**Important:** The online memory must (!) be accessible via HTTPS. If you try to include unencrypted HTTP content in a questionnaire page that was transmitted encrypted via HTTPS, most browsers block this.
-If you have access to Sync&Share, you can also store videos there. After uploading the file to Sync&Share, select the icon for creating a download link (chain icon) next to the file. On the download page that opens, a box will say "download" and the name of the file -- this is a link. By right-clicking on the link, you can copy the link destination to the clipboard and then use it in the ''<video>'' tag:
+If you store videos on Google Drive or Dropbox and share them from there, these services integrate their own video players. So you don't get the video itself, but only a website that plays the video. Such an external website can be integrated into the questionnaire (as with YouTube) using ''<iframe>''.
 <code html>
-<source src="https://syncandshare.lrz.de/dl/fiR1vpLSm7zeDmYRoxRAiAQF/sample.mp4" 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>
-If you do not have access to your own online storage, you can use the provider [[https://www.dropbox.com/|Dropbox]]. There you can create links to share the files. But in order to use them in the questionnaire, you have to make sure that Dropbox delivers the media file directly and not a download page. Therefore you have to set or change the parameter ''dl=1'' in the URL.
+**Warning:** Whenever the data is loaded from a third-party server, the respondent's IP address is transmitted to this server. Check with your organisation's data protection officer whether this is a problem and whether you may need additional consent from respondents.
-<code html>
+**Warning:** It cannot be ruled out that external cloud services may limit the number of accesses (e.g. per 24 hours). Please ask the respective provider and/or the search engine you trust whether and what limits the selected cloud storage service uses.
-<source src="https://www.dropbox.com/s/eccvtg69sxl8ume/video001.mp3?dl=1" type="video/mp4" />
-</code>
-**Warning:** In Safari (Apple/MacOS) problems with the integration of Dropbox have been reported. Apparently Dropbox does not deliver the media file to the Safari browser, but an HTML file. This results in Mac users not being able to view the video.
-**Warning:** Dropbox may restrict the possibility of direct download at any time.
-**Warning:** There is no information yet on whether Dropbox will restrict direct download even if many users access the file.
@@ Line 239: / Line 137: @@
 Regardless of whether audio files or videos are embedded following the directions above or directly from an external provider (e.g. YouTube), it can never guarantee that the participant can actually see the media file.
-All options listed above (including YouTube) only work if the participant has a halfway up-to-date Flash Player. Flash is the most common media plug-in for browsers, but a relevant proportion of participants (depending on target population, 5-20%) will not have it installed. In addition, some participants use a Flash-Blocker to hide moving advertisements on some websites.
+Embed a short test video/audio clip on the first page of the questionnaire. The participants can then be asked to test the display in advance.
-The solution to this problem is relatively simple: embed a short test video/audio clip on the first page of the questionnaire. The participants can then be asked to test the display in advance. I fit does not work properly, they should ...
-  * check if the speakers are turned on,
-  * possibly install the up-to-date Flash Player (include a link to the download page) and/or
-  * temporarily disable an Flash blocker.
 **Tip:** Optionally, some information (such as a number) can be hidden in the media file by displaying or recording it. Only users who enter this information correctly into a text box can continue to the questionnaire (this is then checked via filter on the next page of the questionnaire).