Differences

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

--- en:create:media [12.01.2016 17:37] – michael.brill
+++ en:create:media [20.12.2019 17:37] – admin
@@ Line 37: / Line 37: @@
 ===== Incorporating audio files =====
-There are several file formats that are good for use online, particularly RealMedia (RMA) and Windows Media (WMA). However, both formats exclude a relevant proportion of participants. In contrast, virtually all internet users can now play Flash files. The open-source software [[http://emff.sourceforge.net/|EMFF]] is Flash-based and can play mp3 files. EMFF is a standard plug-in on the www.soscisurvey.de server.
+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.
 **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]].
@@ Line 44: / Line 44: @@
 ==== Simple embedding of an mp3 ====
-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}}, the user can determine how the EMFF Player should appear.
+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.
-**Note:** SoSci Survey embeds audio files with a flash-based EMFF player. While this solution also works for outdated browsers, flash is not supported in iOS (iPhones/iPads). Further, Firefox now blocks flash content as a default, and requires for explicit content activation by clicking, even if autoplay is activated. We thus recommend audio file embedding using HTML5.
@@ Line 53: / Line 51: @@
 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.
-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]].
+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:
+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" controls autoplay>
+<audio id="audio_with_controls" preload="auto" autoplay controls controlsList="nodownload">
-  <source src="audio.mp3" type="audio/mpeg" />
+controls controlsList="nodownload">
-  <source src="audio.ogg" type="audio/ogg" />
+  <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 [[https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/audio|SelfHTML: Audio]] (German only).
+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]].
 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="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" />
+  <source src="audio.mp3" type="audio/mpeg" />
 </audio>
 </code>
 <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" />
+  <source src="audio.mp3" type="audio/mpeg" />
 </audio>
 </code>
-**Note:** Due to technical limitations, as of this time it is not (!) possible to use the audio file embed code directly in an “HTML code” element from the **Compose Questionnaire** step. As described above, a text element containing the code must be created first, which can then be added in the **Compose Questionnaire** step.
+**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:
+<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>
-====Embedding of an mp3 using Flash====
+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.
-If additional functions are needed (such as playing the file automatically) or the file must be interchangeable (e.g. as a randomised stimulus), the [[http://emff.sourceforge.net/codegenerator/|EMFF code generator]] can be used to generate the appropriate HTML code to embed the file into the questionnaire. Subsequently, the path to the EMFF player must be adjusted twice (!) (''../plugins/emff/'', see code example below) and the HTML code must be saved as a text element (Text Elements and Labelling) and dragged into the questionnaire (**Compose Questionnaire**).
 <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=audiofile.mp3&amp;autostart=yes">
+</audio>
-</object>
+<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>
-**Note:** If EMFF is not present on a host server, the necessary flash files (SWF) can be downloaded from the EMFF homepage and uploaded to the user's project.
@@ Line 121: / Line 148: @@
 ====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 your video file into the file formats mp4, ogg, and webm, you can use a number of tools. It can be done quite conveniently using [[https://cloudconvert.com/|CloudConvert]] (online), and the [[http://www.videolan.org/vlc/|VLC Media Player]] (offline) can also be used for this purpose. To do so with VLC, do the following (instructions based on [[http://klaesimage.com/wordpress/?p=265|Using VLC Media Player to convert video]]):
+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/]].
-  * Open VLC Media Player
+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:
-  * Menu: Media -> Convert/Save
-  * File -> File Selection -> Add -> Choose video file
-  * Convert/Save
-  * Settings -> Profile: “Video - H.264 + MP3 (MP4)”
-  * Destination -> Destination File -> Browse -> choose folder and file name, using .mp4 extension (e.g. video.mp4)
-  * Start
-Possibly, the conversion parameters need to be adjusted to meet the needs of your project, e.g. concerning video bitrate. You can do so in the “Edit selected profile” dialog next to the profile selection.
+<code html>
+<video width="512" height="288" controls>
+  <source src="filename.ogg" type="video/ogg" />
+  <source src="filename.mp4" type="video/mp4" />
+  <source src="filename.webm" type="video/webm" />
+</video>
+</code>
-This procedure is repeated using the profiles “Video - VP80 + Vorbis (WebM)” -> file extension “.webm”, and “Video - Theora + Vorbis (OGG)” -> file extension “.ogg”. Once the files have been encoded, open the new video files in order to check video and audio quality.
+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)).
-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:
+==== 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>
+<video width="512" height="288" controls controlsList="nodownload" id="stimulus">
-  <source src="filename.ogg" type="video/ogg" />
+  <source src="dateiname.ogg" type="video/ogg" />
-  <source src="filename.mp4" type="video/mp4" />
+  <source src="dateiname.mp4" type="video/mp4" />
-  <source src="filename.webm" type="video/webm" />
+  <source src="dateiname.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)).
+<script type="text/javascript">
+<!--
-====Embedding videos using Flash====
+var video = document.getElementById("stimulus");
-While video embedding using Flash has been the means of choice until just a few years ago, this solution now faces two major challenges: first, it does not work on iPhone/iPad, and second, the browser’s flash plug-in is frequently deactivated due to security concerns.
+// 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();
+});
-To convert your video into a flash video file, a helpful tool is the [[http://www.dvdvideosoft.com/products/dvd/Free-Video-to-Flash-Converter.htm|Free Video to Flash Converter]]. When installing this tool, the suggested toolbars can be deactivated/not installed, and the same applies to the included add-on software (e.g. TuneUp Utilities). The programme helps the user turn videos into Flash videos and to play them via the Internet:
+// -->
+</script>
+</code>
-  - Start the application
-  - //Add files//
-    - Select the desired file (the programme supports many common file formats)
-    - //Open//
-  - //Format//
-    - "FLV"
-    - The pre-set “high quality” with 1 MBit/sec is a good starting point -- yet, the image size and/or bit-rate may need adjusting.
-  - Many more options can be selected under Player, such as which buttons to show, etc.
-  - The box next to //Show HTML sample file// should be checked.
-  - //Convert// – this will take a while
-The converter will save the Flash video (FLV) and the actual player to play the video (SWF file) in the target directory. In some cases a control file (XML) is included as well. The two or three output files should be uploaded to the survey project – an eventual HTML or CSS file in the target directory does not need to be uploaded. The video file size (FLV) may not exceed 64 MB on the www.soscisurvey.de server.
+==== Problems with the Web Storage Space ====
-**Important:** In newer versions of the Free Video to Flash Converter, output may differ significantly from the results described in this manual. In this case, some adjustments need to be done (see the (German) support forum: [[http://forum.onlineforschung.org/viewtopic.php?p=25362#p25362|Support forum: Embedding flash video]]).
+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.
-After converting the video, a browser window with the necessary HTML code will open (if this window is closed by the user, it can be re-opened from the HTML file saved to the target directory by the programme). The relevant code is under //Copy the code from the box below to your web page//, and the ''<noscript>'' line can be adjusted as necessary -– it is displayed when JavaScript is deactivated and the video can’t be shown (see example below).
+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.
-This HTML code is best saved as a text element (**Text Elements and Labels**). For the text element's //Formatting//, select "HTML code". Finally, drag the text element into the questionnaire (**Compose Questionnaire**).
+<code html>
+<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:
 <code html>
-<object id="Object2" type="application/x-shockwave-flash" data="player_flv_classic.swf" width="480" height="360">
+<source src="https://syncandshare.lrz.de/dl/fiR1vpLSm7zeDmYRoxRAiAQF/sample.mp4" type="video/mp4" />
-  <noscript>You browser does not support Flash and/or JavaScript.</noscript>
-  <param name="movie" value="player_flv_classic.swf" />
-  <param name="wmode" value="opaque" />
-  <param name="allowScriptAccess" value="sameDomain" />
-  <param name="quality" value="high" />
-  <param name="menu" value="true" />
-  <param name="autoplay" value="false" />
-  <param name="autoload" value="false" />
-  <param name="FlashVars" value="configxml=FlickAnimation.xml" />
-</object>
 </code>
-**Tip:** This Flash application, playing the FLV files, supports a lot of parameters: [[http://www.dvdvideosoft.com/guides/new-multi-flash-player-settings.htm|DVD Video Soft: Multi Flash Player Settings]]
+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.
+<code html>
+<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.