Rich Media plug-in for Moodle 2.

x
A comprehensive user guide

Rich Media plug-in for Moodle 2.x

A comprehensive user guide

Sommaire
1. 2. Introduction ........................................................................................................................................................... 3 Note about the players provided with the Rich Media plug-in.................................................................................. 3 The flash rich media player .................................................................................................................................. 3 Front-end description ................................................................................................................................................ 3 Slide and Video display modes................................................................................................................................... 4 Timeline and control panel ........................................................................................................................................ 4 A detailed view of the flash player features ............................................................................................................ 4 The HTML5 rich media player ................................................................................................................................ 5 Front-end description ................................................................................................................................................ 5 Navigation controls .................................................................................................................................................... 5 A detailed view of the HTML5 player features .......................................................................................................... 5 Mini-Howtos .......................................................................................................................................................... 6 Create a new rich media activity .......................................................................................................................... 6 Configure a rich media activity .................................................................................................................................. 8 Convert your slides in image files ............................................................................................................................ 10 Manage the themes ................................................................................................................................................. 11 Export SCORMed rich media .................................................................................................................................... 12

3.

4.

Symetrix 2012 Document version 20120217

Rich Media plug-in for Moodle 2.x

A comprehensive user guide

1. Introduction
This document provides a detailed description about how to use the "Rich Media" plug-in for Moodle 2.This plug-in offers to build up and display a rich media (video + slides synchronized) within a Moodle course.It was developed by Symetrix as part of an e-learning project for CHEMI (Centre for Advanced Studies of the French Ministry of Interior). Note about the players provided with the Rich Media plug-in The player features will depend on your computer configuration.The full-featured plug-in is available with an Adobe Flash compatible browser.A full web player compatible with HTML5 is also provided.The table below presents the main features and differences between Flash and HTML5 rich media players.

Adobe Flash (full-featured version) Display behaviour

Within the same window. MP4:Chrome, Firefox, IE JPG, PNG, all formats compatible

HTML 5 (light version)

Within a new tab. MP4:Safari, Chrome, IE9 OGG:Chrome, Firefox, Opra WebM:Chrome, Firefox, Opra JPG, PNG, all formats compatible with your browser Handled by the browser Simplified Side-by-side Safari, Firefox only (right click on the video then select Fullscreen) iPhone, iPad, Blackberry

Video playback compatibility FLV:Chrome, Firefox, IE

Slides compatibility with your browser Video playback handler Handled by the flash plug-in. Display modes Fullscreen Mobile support
Side-by-side Slide Vido Yes --

2. The flash rich media player

Front-end description

Symetrix 2012 Document version 20120217

Rich Media plug-in for Moodle 2.x

A comprehensive user guide

Slide and Video display modes

Slide and Video display modes offer fullscreen views of your rich media. Display mode is easy to switch : 1. 2. 3. Get the control panel back by rolling over the timeline at the bottom of the main view, Click on the Display combo box Select the desired mode

Usually, an inset of the current slide (video display mode) or video stream (presentation display mode) appears in the upper right corner of the main view. If you want to move this inset : Drag down in the upper half of the inset ; Drag and drop the inset at the desired place of the main view

When you change the display mode, the moved elements such as the inset are placed back at their initial position.

Timeline and control panel

The timeline tool is displayed at the bottom of the main view. This timeline represents the whole slideshow arranged by blocks such as described in the settings.xml file.Each block represents a slide and a duration of appearance.By rolling over each block (green lit when over), some information are displayed:the slide number, the title, the slide thumbnail and the time at which the slide appears. You can pass from one block to another in three different ways : clicking directly on the blocks in the timeline, clicking on the Previous and Next buttons, moving backward or forward the timeline cursor.

A detailed view of the flash player features

Show/Hide button for general information on the speaker or video content

Movable cursor:It indicates the time position of the video playback

Volume control Navigation panel with 3 buttons : 1. Previous slide button 2. Play/Pause button 3. Next slide button Elapsed time | Total duration Display mode selection.3 views are possible:

Side-by-side

Presentation

Video

Fullscreen toggle

Symetrix 2012 Document version 20120217

Rich Media plug-in for Moodle 2.x

A comprehensive user guide

3. The HTML5 rich media player

Front-end description

Navigation controls
To get the video timeline, you can roll over the video.It is handled by the browser itself and could therefore happen differently. With the timeline, different controls are given: A Play/Pause button:to start/stop the video stream A timeline slider to quickly move backward or forward ;

Another button allows to show/hide the outline of your presentation.This button is accessible in the lower-left corner of the rich media view area. Depending on your browser (Firefox, Internet Explorer, Safari, Chrome, ), you can show/hide specific video controls, mute audio (Chrome), etc.

A detailed view of the HTML5 player features

The control panel gives the possibility to pass from one block to another as described in the settings.xml file

Outline button:This button displays the list of slides and their titles.

Symetrix 2012 Document version 20120217

Rich Media plug-in for Moodle 2.x

A comprehensive user guide

4. Mini-Howtos
How to create a new rich media activity a. Turn on the Editing mode
On a course page, turn on the editing mode either : clicking the Turn editing on button on the upper right corner of the page (on a default theme). clicking the Turn editing on link in the Settings panel, Course administration menu.

or

b. Add a rich media activity

In administration mode, you can now add a Rich Media activity by selecting it in the Add an activity combo box.

Symetrix 2012 Document version 20120217

Rich Media plug-in for Moodle 2.x Once the rich media item is selected on this combobox, a form appears.

A comprehensive user guide

To fill in the different fields, you can get help clicking on the buttons ? .

c. Fill in the rich media creation form

Fileds Name Description Theme Explanation/Instruction This is the name given to the activity.It is attached to the list of activities and appears on the rich media homepage. Activity description.It will be displayed on the richmedia page. Background theme selection Here you will be able to select the video file for the rich media. Click on Choose a file :a new window appears.You can either: a) select a previously used video file ( Server files , Recent files or Private files , b) upload a new video file : a. click on the Upload a file button:a new form appears on the right panel of the window b. select a file through your local filesystem clicking on the Browse button of the Attachment field. c. Optionnally rename the file (Save as field) d. Provide the author name (Author field) e. Choose the license type (Choose license) Warning:your video must be exclusively encoded in MP4, FLV or OGG format. f. Slides directory archive you can now upload your file clicking on Upload this file .

Video

The slide directory archive contains every slides pictures (JPG or PNG format).
7

Symetrix 2012 Document version 20120217

Rich Media plug-in for Moodle 2.x

A comprehensive user guide

To get such a file you must archive a directory called slides (please consider these are lowcase letters only).This directory must be zipped to get a file called slides.zip. Click on Choose a file :a new window appears.You can either: a) select a previously used video file ( Server files , Recent files or Private files , b) upload a new video file : a. click on the Upload a file button:a new form appears on the right panel of the window b. select a file through your local filesystem by clicking on the Browse button of the Attachment field. c. Optionnally rename the file (Save as field) d. Provide the author name (Author field) e. Choose the license type (Choose license) Warning:your pictures have to fit a 16/9 ratio. f. you can now upload your file clickin on Upload this file . XML file The synchronization file is called settings.xml (lowcase letters).This file contains the configuration script of the synchronizati rich media.This step is compulsory.For sake of simplicity you can also use the authoring tool provided. on These fields correspond to the the rich media displaying size.Usually, the resolution is 700px by 451px with the Width/Height flash player.With the HTML5 player, a new tab is opened to display the rich media content. HTML5 player Depending on your computer setup, you can either choose between the Flash(R) player or the HTML5 player. (new tab)

Other settings depend on the general moodle settings. When the form filling is done, please click on Save and display to display the rich media content.

How to configure a rich media activity a. Display the configuration form

Once the rich media content is displayed, you can configure it by clicking on the Edit settings (link of the Settings panel). As with the creation process, you can modify the fields values of the configuration form and edit the settings.xml file.

b. Edit the settings.xml file

Click on the Create/Edit the XML link placed under the XML file synchronization .The following tool appears :

Symetrix 2012 Document version 20120217

Rich Media plug-in for Moodle 2.x

A comprehensive user guide

Fields Title Video Presenter name Presenter title Presenter biography Font Font color Id Slide title Commentaire Temps Diapositive

Explanation / Information Title of the rich media content. Video filename Name of the protagonist on the video. Professional function/role of the protagonist Short biography of the speaker Font used when displaying text contents Text color Slide image identifier Slide title.This title appears by rolling over the corresponding sequence on the timeline. Comments on the slide. Timecode when the slide has to be shown.The format is mm:ss (minutes:seconds) Image filename of the slide.This filename is incremented automatically.This is an editable field.

Caption number

1 2 3 4 5 --6 7 -8 --

Symetrix 2012 Document version 20120217

Rich Media plug-in for Moodle 2.x 1

A comprehensive user guide

3 4

5 7 6 8

To add a step (a slide) to your rich media, you can click on the Add a line button at the bottom of this table. To delete a step (a slide), you can click on the Your settings.xml file is now ready. icon in the last column of the line to delete.

To save the xml structure, you can click on the Save button.

A settings.xml sample

This file can be directly edited using a simple text editor (such as Notepad++).Please be careful about this kind of modification and add/delete/modify only the purple texts.Then you can save and upload your file by clicking on Add a file in front of XML file synchronization (facultative) in the rich media actitvity editor.

How to convert your presentation into picture files

Assuming you use MS Powerpoint (2003 or 2007 versions) to build your presentation, you can convert your presentation slides into picture files the following way: Symetrix 2012 Document version 20120217
10

Rich Media plug-in for Moodle 2.x - 1 Click the Microsoft Office Button , then click Save as

A comprehensive user guide

- 2 Add a file name in the File name text box - 3 Next to the Save as type field, click on the Combo box and click on JPEG File Interchange format (*.jpg) or another image format. - 4 Click the Save button. A directory named as your presentation file is automatically created. - 5 - Rename this directory as slides (please be careful to respect the case) - 6 Build a zip archive of this directory Your file slides.zip is ready to be uploaded.

How to create and manage themes for your player

With the Rich Media plug-in, you can customize your player by creating and managing different themes (logo, background).To manage the appearance of your rich media activity, click on Manage themes on the setting page. For each theme created, you can associate (if desired): a theme title an image file for your logo (displayed in the upper-left corner), an image file for your rich media background.The background fits the whole rich media area.This includes the banner design and the background of the main view area.

You can use a specific theme for each Rich Media .

The available actions on this page: - Add a theme clicking on the Add a theme - Modify a theme clicking on the themes elements. - Delete a theme clicking on the icon.This action opens a new popup window where you can modify all the icon

- Get back to the settings page clicking on the Return

Symetrix 2012 Document version 20120217

11

Rich Media plug-in for Moodle 2.x

A comprehensive user guide

How to export a rich media on a LMS platform (SCORM compliant)

The v2 release comes with a new feature:the SCORM-compliant export of the Rich Media activity.This feature allows you to export your rich media on any LMS (Learning Management System) : - click Edit settings on the settings panel - click SCORM export as figured on the following picture - you can now download a zip file containing all your rich media in a SCORM-compliant format.

Symetrix 2012 Document version 20120217

12