Both sides previous revisionPrevious revisionNext revision | Previous revision |
en:create:media [26.04.2016 14:10] – [Embedding of an mp3 using HTML5] admin | en:create:media [10.07.2024 12:41] (current) – [Optimated Embedding] admin |
---|
===== Incorporating audio files ===== | ===== 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 ([[https://developer.mozilla.org/en-US/docs/Web/Guide/Audio_and_video_delivery/Cross-browser_audio_basics#audio_codec_support|Mozilla: Browser Support]]). |
| |
**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]]. | **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 ==== | ==== 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. | |
| |
| |
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. | 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> | <code html> |
<audio id="audio_with_controls" preload="auto" controls autoplay> | <audio id="audio_with_controls" preload="auto" autoplay controls controlsList="nodownload"> |
| controls controlsList="nodownload"> |
<source src="audio.mp3" type="audio/mpeg" /> | <source src="audio.mp3" type="audio/mpeg" /> |
<source src="audio.ogg" type="audio/ogg" /> | <source src="audio.ogg" type="audio/ogg" /> |
| |
<code html> | <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> | </audio> |
| |
<code html> | <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> | </audio> |
</code> | </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> | <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&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> | </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. | **Tip:** If the embedded video does not play correctly, take a look at your [[en:general:browser-tools|browser's error console]]. |
| |
| ==== Notes on listening studies ==== |
| |
| If the audio stimulus is not only intended to convey music or speech, but also the finest nuances, then lossy mp3 compression can become a problem. This is not optimised to compress the knocking of a woodpecker, for example. |
| |
| However, lossless audio compression is not so trivial in the context of an online survey: |
| |
| * The uncompressed PCM format (WAV files) is not supported by the outdated Internet Explorer (which is nevertheless frequently used) ([[https://caniuse.com/?search=wav|Can I Use: WAV]]), but above all the format requires a lot of storage space. SoSci Survey therefore does not allow uploads for WAV files. |
| * A lossless compressed alternative to the WAV format is FLAC ([[https://developer.mozilla.org/en-US/docs/Web/Media/Formats/Audio_codecs|Mozilla: Audio Codecs]]). Here, too, Internet Explorer is left out and may need an additional alternative offered -- but at least the format does not waste unnecessary storage space and bandwidth for the respondents. |
| * A third option is mp3 files that are compressed at a very high quality (e.g. 320kbps). These are played by all browsers and with a high bit rate, far fewer aspects of the audio signal are removed than with standard compression at 128kbps. |
| |
| Please note that there are further limits to authentic reproduction in online surveys. As a rule, the work computer is not a recording studio. |
| |
| * Some respondents cannot hear any audio signal at all, e.g. because they are in an open-plan office or because no speakers or headphones are connected to the computer. |
| * Other respondents can only hear the audio with relevant background noise, for example on public transport. And even at home, undisturbed listening enjoyment is often not guaranteed: Family members are present, the neighbour is mowing the lawn or the parcel carrier is ringing... |
| * Most respondents will only have poor audio hardware at home that cannot reproduce low tones and does not deliver a straight frequency response. |
| * If Bluetooth headphones are used, the signal between the computer and the headphones is potentially compressed again with a loss. |
| |
===== Embedding videos ===== | ===== 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! | **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! |
| |
| **Note:** If a video does not play correctly, the instructions for [[en:general:browser-tools|solving audio/video problems]] will help. |
==== The special case of YouTube videos ==== | ==== The special case of YouTube videos ==== |
| |
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). | 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. | To do this, open the video on YouTube, click on the //Share// button, then //Embed//. MArk the option for "enhanced data protection" -- otherwise the video might be blocked in firefox or other browsers. Copy the HTML code offered by YouTube into a text module (click **Add text** in a section of your choice) and drag this text into the questionnaire (**Composing Questionnaire**). Under certain circumstances the ''%%http://%%'' must be replaced by ''%%https://%%'' (see note below). |
| |
<code html> | <code html> |
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. | 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. | **Warning:** If YouTube is integrated into the questionnaire, then the call may transmit personal data to YouTube. This may require consent from the respondent. Please clarify this issue in advance (!) with the data protection officer at your university, institution or company. |
| |
| **Warning:** YouTube allows itself in its own terms of use to include advertising in videos. 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. |
| |
**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. | **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. |
**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]]). | **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 | To convert the video to mp4, webm and ogg formats, you can use different software. It works quite comfortable with [[https://cloudconvert.com/|CloudConvert]] (online, free for smaller files) and with the [[http://www.mirovideoconverter.com/|MiroVideoConverter]]. |
[[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]]): | |
| |
* 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" playsinline controls controlList="nodownload"> |
| <source src="filename.mp4" type="video/mp4" /> |
| <source src="filename.webm" type="video/webm" /> |
| <source src="filename.ogg" type="video/ogg" /> |
| </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. This means that large videos can also be scaled to the available width. |
| |
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 style="max-width: 100%" 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> |
| |
| Other options allow you to start the video automatically (''autoplay'', more on this below) or hide the control elements at the bottom. |
| |
| The ''playsinline'' parameter ensures that the video does not automatically switch to full screen mode on mobile devices. However, this does not mean that this would happen automatically on all devices if it is omitted. |
| |
| ==== Play automatically (mute) ==== |
| |
| Most mobile devices (smartphones, some tablets) and sometimes also the desktop version of Safari block the autoplay function (''autoplay'') to start a media file (audio or video) automatically. |
| |
| One option is to start the videos''muted''. Many devices and browsers allow this. |
| |
| <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> |
| |
| Another option is to use JavaScript to try to start the video (possibly only after interaction with the page) and display the play button if this does not work. |
| ==== Optimated Embedding ==== |
| |
| HTML5 videos can be controlled in a very differentiated way using JavaScript and can react to events in the video. The following example of HTML code (for the video element) and JavaScript code ensures that (a) the next button is hidden as long as the video is playing and (b) the controls (pause, rewind, ...) disappear once the participant has started the video. |
| |
| **Tip:** Allow the controls even if you use ''autoplay'' -- at least initially. Because browsers on mobile devices usually ignore the request for automatic playback in order to reduce mobile data consumption. |
| |
<code html> | <code html> |
<video width="512" height="288" controls> | <video style="max-width: 100%" controls controlsList="nodownload" id="stimulus"> |
<source src="filename.ogg" type="video/ogg" /> | |
<source src="filename.mp4" type="video/mp4" /> | <source src="filename.mp4" type="video/mp4" /> |
<source src="filename.webm" type="video/webm" /> | <source src="filename.webm" type="video/webm" /> |
| <source src="filename.ogg" type="video/ogg" /> |
</video> | </video> |
| |
| |
| <script type="text/javascript"> |
| <!-- |
| |
| var video = document.getElementById("stimulus"); |
| |
| // Hide controls once it plays |
| SoSciTools.attachEvent(video, "play", function(evt) { |
| video.removeAttribute("controls"); |
| }); |
| // Hide next button |
| SoSciTools.attachEvent(window, "load", function(evt) { |
| SoSciTools.submitButtonsHide(); |
| }); |
| // Show next button at the end of the video again |
| SoSciTools.attachEvent(video, "ended", function(evt) { |
| SoSciTools.submitButtonsDisplay(); |
| }); |
| |
| // --> |
| </script> |
</code> | </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)). | ==== Control playback ==== |
| |
====Embedding videos using Flash==== | You can control the playback of the video with relatively little effort. The following [[:en:create:javascript|JavaScript]] code writes the playback position to an internal variable every 0.1 seconds. This saves the position up to which the video was viewed in the data record. |
| |
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. | * Create an [[:en:create:questions:internal|internal variable]] (in the following example "IV01_01"), |
| * Click on the variable in the navigation for editing and select that the data should be transmitted periodically in the background (this way, people who close the questionnaire window are also recorded). |
| * Drag the question with the internal variable to the questionnaire page with the video. |
| * Make sure that the ''<video>'' tag has an HTML ID, e.g. ''%%<video id="stimulus">%%'' |
| * Insert the following JavaScript code under Video and internal variable within a ''<script>'' tag. |
| |
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]]. | <code javascript> |
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: | window.setInterval(function() { |
| var video = document.getElementById("stimulus"); |
| var intVar = document.getElementById("IV01_01"); |
| intVar.value = video.currentTime; |
| }, 100); |
| </code> |
| |
- Start the application | The identifiers "stimulus" and "IV01_01" must be adapted to the HTML IDs of your video and the internal variable. |
- //Add files// | ==== Problems with the Web Storage Space ==== |
- 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. | 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. |
| |
**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]]). | === Survey server of the university === |
| |
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). | **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]]). |
| |
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**). | === Online storage space of the university === |
| |
| 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. |
| |
<code html> | <code html> |
<object id="Object2" type="application/x-shockwave-flash" data="player_flv_classic.swf" width="480" height="360"> | <video width="512" height="288" controls controlsList="nodownload"> |
<noscript>You browser does not support Flash and/or JavaScript.</noscript> | <source src="https://www.example.com/projectXYZ/filename.mp4" type="video/mp4" /> |
<param name="movie" value="player_flv_classic.swf" /> | </video> |
<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> | </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]] | **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. |
| |
| === Cloud storage === |
| |
| 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: |
| |
| |
| <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> |
| |
| **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. |
| |
| * 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%%'' |
| |
| === Google Drive, Dropbox and others === |
| |
| 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. |
| |
| 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> |
| <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> |
| |
| **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. |
| |
| **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. |
===== Technical hurdles ===== | ===== Technical hurdles ===== |
| |