| Both sides previous revisionPrevious revisionNext revision | Previous revisionNext revisionBoth sides next revision |
| en:create:media [27.08.2015 22:13] – Link to backgroud music admin | en:create:media [22.02.2016 12:44] – [Embedding of an mp3 using HTML5] admin |
|---|
| |
| **Note:** Pictures in internet-appropriate formats (see [[images|Images]]) can be uploaded in the standard way at www.soscisurvey.de. Due to frequently lacking awareness of copyright violations, the server administrator must first approve uploaded media files. | **Note:** Pictures in internet-appropriate formats (see [[images|Images]]) can be uploaded in the standard way at www.soscisurvey.de. Due to frequently lacking awareness of copyright violations, the server administrator must first approve uploaded media files. |
| | |
| | **Important:** If your questionnaire makes use of media files, inform your participants of this fact as early as possible. E.g., you could point it out in the questionnaire invitation or next to the questionnaire link, so participants won’t begin the questionnaire in an inappropriate environment, such as an open-space office or the subway, and then have to abort at the video. As a control, you can also include a short video or audio file on the first or second questionnaire page, so participants will prepare their headphones or speakers early. |
| |
| |
| 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 {{:button.settings.png?nolink|Einstellungen}}, the user can determine how the EMFF Player should appear. | 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 {{:button.settings.png?nolink|Einstellungen}}, the user can determine how the EMFF Player should appear. |
| |
| ==== Enhanced embedding of an mp3 ==== | **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/iPads). Further, Firefox now blocks flash content as a default, and requires for explicit content activation by clicking, even if autoplay is activated. We thus recommend audio file embedding using HTML5. |
| | |
| | |
| | ====Embedding of an mp3 using HTML5==== |
| | |
| | Since the HTML5 tag ''<audio>'' has become quite common now, it is well suited for embedding audio files. Only very outdated browsers (e.g. Internet Explorer older than version 9) do not support this 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://sourceforge.net/projects/audacity/|Audacity]]. |
| | |
| | To embed a file, create a new [[en:create:texts|Text element]] in **Text Elements and Labels** with //Formatting// “HTML code”, and add the following content: |
| | |
| | <code html> |
| | <audio id="audio_with_controls" controls autoplay> |
| | <source src="audio.mp3" type="audio/mpeg" /> |
| | <source src="audio.ogg" type="audio/ogg" /> |
| | Your browser is not able to play this audio file |
| | </audio> |
| | </code> |
| | |
| | The file name(s) are entered in the ''<source>'' tags, while the options ''controls'' and ''autoplay'' enable controls and automatic playback. For more options, see [[http://www.w3schools.com/html/html5_audio.asp|w3schools: Audio]]. |
| | |
| | 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> |
| | <audio id="audio_with_controls" controls style="width: 200px; height: 80px"> |
| | <source src="audio.mp3" type="audio/mpeg" /> |
| | </audio> |
| | </code> |
| | |
| | <code html> |
| | <audio id="audio_with_controls" controls style="position: absolute; left: -9999px; top: -9999px"> |
| | <source src="audio.mp3" type="audio/mpeg" /> |
| | </audio> |
| | </code> |
| | |
| | **Note:** Due to technical limitations, as of this time it is not (!) possible to use the audio file embed code directly in an “HTML code” element from the **Compose Questionnaire** step. As described above, a text element containing the code must be created first, which can then be added in the **Compose Questionnaire** step. |
| | |
| | |
| | ====Embedding of an mp3 using Flash==== |
| |
| 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://emff.sourceforge.net/codegenerator/|EMFF code generator]] can be used to generate the appropriate HTML code to embed the file into the questionnaire. Subsequently, the path to the EMFF player must be adjusted twice (!) (''../plugins/emff/'', see code example below) and the HTML code must be saved as a text element (Text Elements and Labelling) and dragged into the questionnaire (**Compose Questionnaire**). | 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://emff.sourceforge.net/codegenerator/|EMFF code generator]] can be used to generate the appropriate HTML code to embed the file into the questionnaire. Subsequently, the path to the EMFF player must be adjusted twice (!) (''../plugins/emff/'', see code example below) and the HTML code must be saved as a text element (Text Elements and Labelling) and dragged into the questionnaire (**Compose Questionnaire**). |
| |
| |
| ==== Embedding videos via Flash ==== | ====Embedding videos using HTML5==== |
| |
| There is a series of video formats developed specifically for internet use (such as mp4, RealMedia, and Windows Media). However, these formats are usually tied to a particular platform (such as Windows) or require plug-ins which many participants won’t have installed. With direct embedding, it is also impossible to control whether they are displayed directly in the browser or linked for download. | If you want to make sure your video can be displayed correctly for virtually all participants, you can embed it in your questionnaire using the HTML5 ''<video>'' tag. A disadvantage is that you first need to convert the video into 3 (!) different formats, and consequently also need to upload three files. Basically, you can also use just one of the file formats, but this way the video will only play in some browsers ([[http://www.hongkiat.com/blog/html5-videos-things-you-need-to-know/|HTML5 Videos: 10 Things Designers Need to Know]]). |
| |
| Nearly all internet users have a Flash plug-in installed, however. Therefore, a good option is to transform the video for Flash and embed a Flash Player for the video into the questionnaire. This enables a large amount of control over the video display, and it will play for nearly all participants. The researcher should indicate in advance that the volume of the user’s computer should be turned up. | **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]]). |
| |
| A helpful tool for this is the [[http://www.dvdvideosoft.com/products/dvd/Free-Video-to-Flash-Converter.htm|Free Video to Flash Converter]]. When installing this tool, the suggested toolbars can be deactivated/not installed, and the same applies to the included add-on software (e.g. TuneUp Utilities). The programme helps the user turn videos into Flash videos and to play them via the Internet: | To convert your video file into the file formats mp4, ogg, and webm, you can use a number of tools. It can be done quite conveniently using [[https://cloudconvert.com/|CloudConvert]] (online), and the |
| | [[http://www.videolan.org/vlc/|VLC Media Player]] (offline) can also be used for this purpose. To |
| | do so with VLC, do the following (instructions based on [[http://klaesimage.com/wordpress/?p=265|Using VLC Media Player to convert video]]): |
| | |
| | * Open VLC Media Player |
| | * Menu: Media -> Convert/Save |
| | * File -> File Selection -> Add -> Choose video file |
| | * Convert/Save |
| | * 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”, and “Video - Theora + Vorbis (OGG)” -> file extension “.ogg”. Once the files have been encoded, open the new video files in order to check video and audio quality. |
| | |
| | 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: |
| | |
| | <code html> |
| | <video width="512" height="288" controls> |
| | <source src="filename.ogg" type="video/ogg" /> |
| | <source src="filename.mp4" type="video/mp4" /> |
| | <source src="filename.webm" type="video/webm" /> |
| | </video> |
| | </code> |
| | |
| | Obviously, you can use the ''width'' and ''height'' parameters to adjust the video’s display size. Additional options are available to enable autoplay or hide the player controls ([[http://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/Video|SelfHTML: HTML/Multimedia und Grafiken/video]] (German only)). |
| | |
| | ====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/iPad, and second, the browser’s flash plug-in is frequently deactivated due to security concerns. |
| | |
| | To convert your video into a flash video file, a helpful tool is the [[http://www.dvdvideosoft.com/products/dvd/Free-Video-to-Flash-Converter.htm|Free Video to Flash Converter]]. |
| | When installing this tool, the suggested toolbars can be deactivated/not installed, and the same applies to the included add-on software (e.g. TuneUp Utilities). The programme helps the user turn videos into Flash videos and to play them via the Internet: |
| |
| - Start the application | - Start the application |
| - //Convert// – this will take a while | - //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 – the eventual HTML or CSS file in the target directory does not need to be uploaded. The video file (FLV) may not exceed 32 MB on the www.soscisurvey.de server. | 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. |
| | |
| | **Important:** In newer versions of the Free Video to Flash Converter, output may differ significantly from the results described in this manual. In this case, some adjustments need to be done (see the (German) support forum: [[http://forum.onlineforschung.org/viewtopic.php?p=25362#p25362|Support forum: Embedding flash video]]). |
| |
| 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 ''<noscript>'' line can be adjusted as necessary -– it is displayed when JavaScript is deactivated and the video can’t be shown (see example below). | 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 ''<noscript>'' line can be adjusted as necessary -– it is displayed when JavaScript is deactivated and the video can’t be shown (see example below). |
| |
| **Tip:** This Flash application, playing the FLV files, supports a lot of parameters: [[http://www.dvdvideosoft.com/guides/new-multi-flash-player-settings.htm|DVD Video Soft: Multi Flash Player Settings]] | **Tip:** This Flash application, playing the FLV files, supports a lot of parameters: [[http://www.dvdvideosoft.com/guides/new-multi-flash-player-settings.htm|DVD Video Soft: Multi Flash Player Settings]] |
| | |
| | |
| ===== Technical hurdles ===== | ===== Technical hurdles ===== |
| |
