Both sides previous revisionPrevious revisionNext revision | Previous revision |
en:create:media [05.11.2020 01:23] – [Embedding videos] astridfortuin | en:create:media [26.07.2021 21:07] (current) – [The special case of YouTube videos] sophia.schauer |
---|
| |
| |
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ce_BXD_ONQ8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> | ===== 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! |
==== 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 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> |
| |