Moodle Series - Learn Local - Embedding in Moodle

Learner Management SystemsLearner Management Systems

Photo Credit: http://www.flickr.com/photos/25691430@N04/4347819911/CC: http://creativecommons.org/licenses/by-sa/2.0/

Programme

• Embed and manipulate third party content such as such as YouTube, Slideshare and Scribd into Moodle• <iframe> • Multimedia plug ins.

Presenter

Michael Gwyther

mick@yumstudio.com.au

@mickgwyther

What is embedding?

Where can I embed?

Photo Credit: http://www.flickr.com/photos/7149027@N07/6066027411CC: http://creativecommons.org/licenses/by-nd/2.0/

What content do you have?

What digital content do you have now?

What might you need to develop?

Multimedia sources

http://openclipart.org/ http://compfight.com

Multimedia sources

http://skalgubbar.se/ http://findicons.com/

Multimedia sources

• http://www.freesound.org/• http://opsound.org/ • http://librivox.org/• http://www.opensourcemusic.com/• http://ccmixter.org/• http://www.flashkit.com/loops/

Multimedia sources

http://www.slideshare.net/ http://skalgubbar.se/

Site PermissionsSettings > Site administration > Security > Site Policies

http://docs.moodle.org/24/en/Site_policies#Allow_EMBED_and_OBJECT_tags

Resource Repositories

http://docs.moodle.org/22/en/Repositories

Resource Repositories - YouTube

http://docs.moodle.org/22/en/Repositories

Resource Repositories - YouTube

http://docs.moodle.org/22/en/Repositories

<p><a href="http://www.youtube.com/v/EZ15vUjgqvw">P3 Professionals Change Drivers Bronze Age Orientation Day</a></p>

Resource Repositories

http://docs.moodle.org/22/en/Repositories

Settings > Site administration > Plugins > Repositories > Manage Repositories

Multimedia Embedding

Photo Credit: http://www.flickr.com/photos/25622716@N02/8471963889http://creativecommons.org/licenses/by-nc/2.0/

Filters• Finds a link in text that points to a multimedia resource and replaces the link with an appropriate multimedia player code which can play the resource.

Photo Credit: http://www.flickr.com/photos/25622716@N02/8471963889http://creativecommons.org/licenses/by-nc/2.0/

Filter settingsSettings > Site administration > Plugins > Filters > Manage Filters

Filter settingsSettings > Site administration > Appearance > Media embedding

Multimedia Plug insSupported Media Formats

* .mp3 - MPEG Audio Stream, Layer III * .swf - Macromedia Flash Format File (Adobe, Inc.) * .mov - QuickTime Video Clip (Apple Computer, Inc.) * .wmv - Windows Media File (Microsoft) * .mpg - MPEG Animation * .avi - Audio Video Interleave File * .flv - Flash Video File (Macromedia, Inc.) * .ram - RealMedia Metafile (RealNetworks, Inc.) * .rpm - RealMedia Player Plug-in (RealNetworks) * .rm - RealMedia Streaming Media (Real Networks, Inc.) * .mp4 * .m4v

http://docs.moodle.org/24/en/Multimedia_plugins_filter

iFrame tag• Open any Moodle tinyMCE editor• Switch to HTML view• Type in iFrame embed code:

<iframe src="http:/www.yumstudio.com.au"></iframe>

• Add length & width:<iframe height="600" width="900" src="http:/www.yumstudio.com.au"></iframe>

• Use all real estate (width)<iframe height="600" width=”100%" src="http:/www.yumstudio.com.au"></iframe>

Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659http://creativecommons.org/licenses/by-nc/2.0/

iFrame tag – alternative text• In the event the user’s browser doesn’t support

frames, add some alterative text between the opening and closing tages:

• Use all real estate (width)<iframe height="600" width=”100%" src="http:/www.yumstudio.com.au">Place alternative text for browsers that do not understand Iframes in here</iframe>

http://docs.moodle.org/23/en/Iframe http://www.w3schools.com/tags/tag_iframe.asp Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659

http://creativecommons.org/licenses/by-nc/2.0/

iFrame tag – examplesVimeo

YouTube

Slideshare

SoundCloudPhoto Credit: http://www.flickr.com/photos/92033577@N00/4508020659

http://creativecommons.org/licenses/by-nc/2.0/

iFrame tag – examples

Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659http://creativecommons.org/licenses/by-nc/2.0/

Photo Credit: http://www.flickr.com/photos/33037761@N07/5077808426/http://creativecommons.org/licenses/by-nc/2.0/

Object example

Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/http://creativecommons.org/licenses/by-nc/2.0/

Object example

YouTube (old embed Code)

Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/http://creativecommons.org/licenses/by-nc/2.0/

Object example

YouTube (old embed Code)

Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/http://creativecommons.org/licenses/by-nc/2.0/

Thank you

Michael Gwyther

mick@yumstudio.com.au

@mickgwyther