This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revision | ||
en:create:media [12.01.2016 18:23] – Updated English Chapter to match German Chapter michael.brill | en:create:media [26.07.2021 21:07] (current) – [The special case of YouTube videos] sophia.schauer | ||
---|---|---|---|
Line 37: | Line 37: | ||
===== 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:// | + | There are several file formats that are suitable |
**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, | **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, | ||
Line 44: | Line 44: | ||
==== 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 {{: | + | 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 {{: |
- | + | ||
- | **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/ | + | |
Line 53: | Line 51: | ||
Since the HTML5 tag ''< | Since the HTML5 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:// | + | 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:// |
To embed a file, create a new [[en: | To embed a file, create a new [[en: | ||
<code html> | <code html> | ||
- | <audio id=" | + | <audio id=" |
+ | controls controlsList=" | ||
<source src=" | <source src=" | ||
<source src=" | <source src=" | ||
Line 65: | Line 64: | ||
</ | </ | ||
- | The file name(s) are entered in the ''< | + | The file name(s) are entered in the ''< |
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). | 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> | <code html> | ||
- | <audio id="audio_with_controls" controls style=" | + | <audio id="audio02" controls |
<source src=" | <source src=" | ||
</ | </ | ||
Line 76: | Line 75: | ||
<code html> | <code html> | ||
- | <audio id="audio_with_controls" controls style=" | + | <audio id="audio03" controls |
<source src=" | <source src=" | ||
</ | </ | ||
</ | </ | ||
- | **Note: | + | **Note: |
+ | <code html> | ||
+ | <audio id=" | ||
+ | <source src=" | ||
+ | </ | ||
+ | <script type=" | ||
+ | <!-- | ||
+ | window.addEventListener(" | ||
+ | window.setTimeout(function() { | ||
+ | var audio = document.getElementById(" | ||
+ | if (audio.paused) { | ||
+ | audio.setAttribute(" | ||
+ | } | ||
+ | }, 250); | ||
+ | }); | ||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
- | ====Embedding of an mp3 using Flash==== | + | JavaScript |
- | + | ||
- | 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:// | + | |
<code html> | <code html> | ||
- | <object type="application/ | + | <audio id="audio05" |
- | <param name="movie" value="../plugins/emff/ | + | <source src="someAudio.mp3"> |
- | < | + | </ |
- | </object> | + | <script type="text/ |
+ | <!-- | ||
+ | window.addEventListener("load", function() { | ||
+ | window.setTimeout(function() { | ||
+ | | ||
+ | var audio = document.getElementById("audio05" | ||
+ | // Show controls if the video does not start automatically | ||
+ | if (audio.paused) { | ||
+ | audio.setAttribute("controls", " | ||
+ | } | ||
+ | // Automatically continues to the next page after playback | ||
+ | audio.addEventListener(" | ||
+ | }, 250); | ||
+ | }); | ||
+ | // --> | ||
+ | </script> | ||
</ | </ | ||
- | |||
- | **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 106: | 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 | + | To do this, open the video on YouTube, click on the //Share// button, then //Embed//. MArk the option for " |
<code html> | <code html> | ||
Line 114: | 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: | + | **Warning: |
+ | |||
+ | **Warning: | ||
**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 125: | Line 154: | ||
**Important: | **Important: | ||
- | To convert | + | To convert |
- | [[http:// | + | |
- | do so with VLC, do the following (instructions based on [[http:// | + | |
- | + | ||
- | * Open VLC Media Player | + | |
- | * Menu: Media -> Convert/ | + | |
- | * File -> File Selection -> Add -> Choose video file | + | |
- | * Convert/ | + | |
- | * 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. | + | |
- | + | ||
- | This procedure is repeated using the profiles “Video - VP80 + Vorbis (WebM)” -> file extension “.webm”, | + | |
In SoSci Survey, you create a new [[: | In SoSci Survey, you create a new [[: | ||
Line 153: | Line 168: | ||
Obviously, you can use the '' | Obviously, you can use the '' | ||
- | ====Embedding videos using Flash==== | ||
- | 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/ | + | ==== Optimated Embedding ==== |
- | To convert your video into a flash video file, a helpful tool is the [[http:// | + | 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) |
- | When installing this tool, the suggested toolbars can be deactivated/ | + | |
- | - Start the application | + | **Tip:** Allow the controls even if you use '' |
- | | + | |
- | | + | |
- | - //Open// | + | |
- | - // | + | |
- | - " | + | |
- | - 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 | + | |
- | - 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. | + | <code html> |
+ | <video width=" | ||
+ | <source src=" | ||
+ | <source src=" | ||
+ | <source src=" | ||
+ | </ | ||
- | **Important: | ||
- | 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 '' | + | <script type=" |
+ | <!-- | ||
- | This HTML code is best saved as a text element | + | var video = document.getElementById(" |
+ | |||
+ | // Hide controls once it plays | ||
+ | SoSciTools.attachEvent(video, | ||
+ | stimulus.removeAttribute(" | ||
+ | }); | ||
+ | // Hide next button | ||
+ | SoSciTools.attachEvent(window, "load", | ||
+ | SoSciTools.submitButtonsHide(); | ||
+ | }); | ||
+ | // Show next button at the end of the video again | ||
+ | SoSciTools.attachEvent(stimulus, " | ||
+ | SoSciTools.submitButtonsDisplay(); | ||
+ | }); | ||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== Problems with the Web Storage Space ==== | ||
+ | |||
+ | At www.soscisurvey.de, | ||
+ | |||
+ | 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=" | + | <video width=" |
- | < | + | <source src="https://www.example.com/projectXYZ/filename.mp4" |
- | <param name="movie" | + | </video> |
- | <param name="wmode" value=" | + | |
- | <param name=" | + | |
- | <param name=" | + | |
- | <param name=" | + | |
- | <param name="autoplay" | + | |
- | <param name=" | + | |
- | <param name=" | + | |
- | </object> | + | |
</ | </ | ||
- | **Tip:** This Flash application, playing | + | **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& | ||
+ | |||
+ | <code html> | ||
+ | <video width=" | ||
+ | <source src=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | If you do not have access to your own online storage, you can use the provider | ||
+ | |||
+ | <code html> | ||
+ | <video width=" | ||
+ | <source src=" | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | **Warning: | ||
+ | |||
+ | **Warning: | ||
+ | |||
+ | **Warning: | ||