Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
en:create:media [20.12.2019 17:37] – admin | en:create:media [18.04.2021 22:00] – [Optimierte Einbindung] sophia.schauer |
---|
| |
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:** 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:** 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:** 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. |
**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 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/]]. | 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 [[http://www.mirovideoconverter.com/|MiroVideoConverter]]. |
| |
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: | 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 ==== | ==== Optimated Embedding ==== |
| |
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. | 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. |
| |
**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. | **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 controlsList="nodownload" id="stimulus"> | <video width="512" height="288" controls controlsList="nodownload" id="stimulus"> |
<source src="dateiname.ogg" type="video/ogg" /> | <source src="filename.ogg" type="video/ogg" /> |
<source src="dateiname.mp4" type="video/mp4" /> | <source src="filename.mp4" type="video/mp4" /> |
<source src="dateiname.webm" type="video/webm" /> | <source src="filename.webm" type="video/webm" /> |
</video> | </video> |
| |
var video = document.getElementById("stimulus"); | var video = document.getElementById("stimulus"); |
| |
// Bedienelemente ausblenden, sobald es abspielt | // Hide controls once it plays |
SoSciTools.attachEvent(video, "play", function(evt) { | SoSciTools.attachEvent(video, "play", function(evt) { |
stimulus.removeAttribute("controls"); | stimulus.removeAttribute("controls"); |
}); | }); |
// Weiter-Knopf ausblenden | // Hide next button |
SoSciTools.attachEvent(window, "load", function(evt) { | SoSciTools.attachEvent(window, "load", function(evt) { |
SoSciTools.submitButtonsHide(); | SoSciTools.submitButtonsHide(); |
}); | }); |
// Weiter-Knopf am Ende des Videos wieder anzeigen | // Show next button at the end of the video again |
SoSciTools.attachEvent(stimulus, "ended", function(evt) { | SoSciTools.attachEvent(stimulus, "ended", function(evt) { |
SoSciTools.submitButtonsDisplay(); | SoSciTools.submitButtonsDisplay(); |
| |
<code html> | <code html> |
<source src="https://www.example.com/projectXYZ/filename.mp4" type="video/mp4" /> | <video width="512" height="288" controls controlsList="nodownload"> |
| <source src="https://www.example.com/projectXYZ/filename.mp4" type="video/mp4" /> |
| </video> |
</code> | </code> |
| |
| |
<code html> | <code html> |
<source src="https://syncandshare.lrz.de/dl/fiR1vpLSm7zeDmYRoxRAiAQF/sample.mp4" type="video/mp4" /> | <video width="512" height="288" controls controlsList="nodownload"> |
| <source src="https://syncandshare.lrz.de/dl/fiR1vpLSm7zeDmYRoxRAiAQF/sample.mp4" type="video/mp4" /> |
| </video> |
</code> | </code> |
| |
| |
<code html> | <code html> |
<source src="https://www.dropbox.com/s/eccvtg69sxl8ume/video001.mp3?dl=1" type="video/mp4" /> | <video width="512" height="288" controls controlsList="nodownload"> |
| <source src="https://www.dropbox.com/s/eccvtg69sxl8ume/video001.mp3?dl=1" type="video/mp4" /> |
| </video> |
</code> | </code> |
| |