PPT for Vet Development Centre webinar

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

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

3. Presenter
Michael Gwyther
mick@yumstudio.com.au
@mickgwyther

4. What is embedding?

5. Where can I embed?
Photo Credit: http://www.flickr.com/photos/7149027@N07/6066027411
CC: http://creativecommons.org/licenses/by-nd/2.0/

6. Embed Methods
Photo Credit: http://www.flickr.com/photos/7149027@N07/6066027411
CC: 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

7. Multimedia Plug ins
Supported 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

8. Anywhere! 2 to Tango! - 2
Photo Credit: http://www.flickr.com/photos/7149027@N07/6066027411
CC: http://creativecommons.org/licenses/by-nd/2.0/

9. Anywhere! 2 to Tango! - 1
Photo Credit: http://www.flickr.com/photos/7149027@N07/6066027411
CC: http://creativecommons.org/licenses/by-nd/2.0/

10. 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?!!

11. Exploring Embed Codes
YouTube/Vimeo
Slideshare
Scribd
Google Docs and Calenders
Tweets
SoundCloud
Podomatic

12. Site Permissions
Settings > Site administration > Security > Site
Policies
http://docs.moodle.org/25/en/Site_policies#Allow_EMBED_and_OBJECT_tags

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

14. Resource Repositories - YouTube
http://docs.moodle.org/22/en/Repositories

15. 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>

16. Resource
Repositories
http://docs.moodle.org/25/en/Repositories
Settings > Site
administration > Plugins >
Repositories > Manage
Repositories

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

18. 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/8471963889
http://creativecommons.org/licenses/by-nc/2.0/

19. Filter settings
Settings > Site administration > Plugins > Filters >
Manage Filters

20. Filter settings
Settings > Site administration > Appearance >
Media embedding

21. Multimedia Plug ins
Supported 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

22. Moodle Media

23. iFrame tag – examples
Vimeo
YouTube
Slideshare
SoundCloud Photo Credit: http://www.flickr.com/photos/92033577@N00/4508020659
http://creativecommons.org/licenses/by-nc/2.0/

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

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

26. Multimedia sources
http://openclipart.org/http://compfight.com

27. Multimedia sources
http://skalgubbar.se/http://findicons.com/

28. 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/4508020659
http://creativecommons.org/licenses/by-nc/2.0/

29. 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.aspPhoto Credit: http://www.flickr.com/photos/92033577@N00/4508020659
http://creativecommons.org/licenses/by-nc/2.0/

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

31. Object example
YouTube (old embed Code)
Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/
http://creativecommons.org/licenses/by-nc/2.0/

32. Object example
YouTube (old embed Code)
Photo Credit: http://www.flickr.com/photos/31191642@N05/4031388571/
http://creativecommons.org/licenses/by-nc/2.0/

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

34. Thank you
Michael Gwyther
mick@yumstudio.com.au
@mickgwyther