This shows you the differences between two versions of the page.
Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision | ||
en:create:media [12.01.2016 18:23] – Updated English Chapter to match German Chapter michael.brill | en:create:media [05.11.2020 08:29] – old revision restored (20.12.2019 17:37) admin | ||
---|---|---|---|
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 125: | Line 152: | ||
**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 166: | ||
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/ | + | ==== Optimierte Einbindung ==== |
- | To convert your video into a flash video file, a helpful tool is the [[http:// | + | 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, |
- | When installing this tool, the suggested toolbars can be deactivated/ | + | |
- | | + | **Tipp:** Erlauben Sie die Bedienelemente auch dann, wenn Sie '' |
- | | + | |
- | - Select the desired file (the programme supports many common file formats) | + | |
- | - //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 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. | + | <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(" |
+ | |||
+ | // Bedienelemente ausblenden, sobald es abspielt | ||
+ | SoSciTools.attachEvent(video, | ||
+ | stimulus.removeAttribute(" | ||
+ | }); | ||
+ | // Weiter-Knopf ausblenden | ||
+ | SoSciTools.attachEvent(window, | ||
+ | SoSciTools.submitButtonsHide(); | ||
+ | }); | ||
+ | // Weiter-Knopf am Ende des Videos wieder anzeigen | ||
+ | SoSciTools.attachEvent(stimulus, "ended", function(evt) { | ||
+ | SoSciTools.submitButtonsDisplay(); | ||
+ | }); | ||
+ | |||
+ | // --> | ||
+ | </ | ||
+ | </ | ||
+ | |||
+ | |||
+ | ==== Problems with the Web Storage Space ==== | ||
+ | |||
+ | 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. | ||
+ | |||
+ | Ideally, you can access online storage at your own university or company and upload | ||
<code html> | <code html> | ||
- | <object id="Object2" | + | <source src="https://www.example.com/projectXYZ/filename.mp4" |
- | < | + | |
- | <param name=" | + | |
- | <param name=" | + | |
- | <param name="allowScriptAccess" | + | |
- | <param name="quality" | + | |
- | <param name=" | + | |
- | <param name=" | + | |
- | <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> | ||
+ | <source src=" | ||
+ | </ | ||
+ | |||
+ | If you do not have access to your own online storage, you can use the provider | ||
+ | |||
+ | <code html> | ||
+ | <source src=" | ||
+ | </ | ||
+ | |||
+ | **Warning: | ||
+ | |||
+ | **Warning: | ||
+ | |||
+ | **Warning: | ||