EmBed withEmBed with

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/

Embed Methods

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

Audio and video may be embedded:

-As a file resource (Filter)-As a URL resource with embed as the display option (Resource)-In any text area using the Moodle media button in the text editor -Typing the URL of media file (Filter)Using Embed Code in any Editor

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/25/en/Multimedia_plugins_filter

Anywhere! 2 to Tango! - 2

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

Anywhere! 2 to Tango! - 1

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

Strangely Compelling Questions!!!What content do you have/need?

What digital content do you have now?

What might you need to develop?

Who else might have developed content already?!!

Exploring Embed Codes

YouTube/Vimeo

Slideshare

Scribd

Google Docs and Calenders

Tweets

SoundCloud

Podomatic

Site PermissionsSettings > Site administration > Security > Site Policies

http://docs.moodle.org/25/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/25/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/25/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/25/en/Multimedia_plugins_filter

Moodle Media

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/

Multimedia sources

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

Multimedia sources

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

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/25/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/

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/

Template example

Course Templates

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