Differences

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

Link to this comparison view

Both sides previous revisionPrevious revision
Next revision
Previous revision
en:create:media [20.12.2019 17:37] adminen:create:media [26.07.2021 21:07] (current) – [The special case of YouTube videos] sophia.schauer
Line 133: Line 133:
 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>
Line 141: Line 141:
 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.
Line 152: Line 154:
 **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:
Line 167: Line 169:
  
  
-==== Optimierte Einbindung ====+==== Optimated Embedding ====
  
-HTML5-Videos kann man mittels JavaScript sehr differenziert ansteuern bzwauf Ereignisse im Video reagieren. Das folgende Beispiel aus HTML-Code (für das Video-Elementund JavaScript-Code sorgt dafür, dass (a) der Weiter-Knopf ausgeblendet wird, solange das Video spielt und (b) die Bedienelemente (PauseSpulen, ...) 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 videoThe following example of HTML code (for the video elementand JavaScript code ensures that (a) the next button is hidden as long as the video is playing and (b) the controls (pauserewind, ...) disappear once the participant has started the video.
  
-**Tipp:** Erlauben Sie die Bedienelemente auch dann, wenn Sie ''autoplay'' verwenden -- zumindest zu BeginnDenn 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 initiallyBecause 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>
  
Line 186: Line 188:
 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();
Line 211: Line 213:
  
 <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>
  
Line 219: Line 223:
  
 <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>
  
Line 225: Line 231:
  
 <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>
  
en/create/media.1576859833.txt.gz · Last modified: 20.12.2019 17:37 by admin
 
Except where otherwise noted, content on this wiki is licensed under the following license: CC Attribution-Share Alike 4.0 International
Driven by DokuWiki