Instructional Technology Services

Transcription

1 Instructional Technology Services Abstract: Many faculty members enhance their online content with multimedia that is available online or that they create themselves. There are a number of ways to integrate multimedia within icollege. This handout explains how to link to and embed multimedia content from a variety of formats and sources. OIT - Academic Technology Instructional Technology Services [Publish Date] icollege 9.4.1

2 Integrating Multimedia in icollege Table of Contents Introduction...3 Course Objectives...3 Integrating Multimedia Overview...4 Description...4 Linking to versus embedding multimedia content...4 icollege options for linking to or embedding multimedia...5 Using Quicklinks to Link to External Content...7 Quicklinking from the Content Tool...7 Quicklinking from the HTML Editor...7 Using the Insert Stuff button to link to or embed external content...8 Inserting Multimedia from your Computer...8 Inserting Multimedia from your Course Offering Files...9 Inserting YouTube videos...9 Inserting Links Inserting Embed Code Integrating Instructor Created Podcasts Subscribe RSS Feed Individual Episodes Integrating Instructor Created GPC Rewind Content Integrating Instructor Created Windows Media Server Content Integrating a Windows Media Video within the Content tool in icollege Integrating a Windows Media Video within the HTML Editor in icollege Integrating Instructor Created Camtasia Recordings How to publish MP4 Flash/HTML5 Player Content Frequently Asked Questions Can I link to or embed RSS feeds?... Error! Bookmark not defined. Do I need to be concerned with copyright when linking to or embedding external content?... 27

3 Introduction Many faculty members enhance their online content with multimedia that is available online or that they create themselves. One of the major sources of multimedia content is YouTube, but there are also a number of online faculty that generate their own multimedia content using GPC Rewind, the USG podcast server, the Windows streaming media server, or Camtasia. There are a number of ways to integrate these types of multimedia within icollege. This handout explains how to link to and embed multimedia content from a variety of formats and sources so that you can add them to your course Content or other locations within icollege. Course Objectives By the end of this handout, you should be able to Use Quicklinks to Link to External Content Use the Insert Stuff button to link to or embed external content Integrate instructor created multimedia content from the USG podcast server, GPC Rewind, Windows media server, and Camtasia Enter HTML code into the Code View of the HTML Editor to integrate multimedia Integrating Multimedia in icollege Page 3 of 27

4 Integrating Multimedia Overview Description Multimedia, including screencasts, videos, and audio recordings, are an increasingly popular way of presenting content in icollege. Many instructors create screencasts on how to perform critical procedures in mathematics or the sciences or record narrated PowerPoints presenting course information. Additionally, a number of faculty members take advantage of content produced by publishers or other experts in the field that is available from external websites. All of these types of multimedia content can easily be included in your icollege course. The multimedia content that you create or find can be integrated into your Content, in News Items, or virtually any other location in icollege where you are able to create content using the HTML Editor. This includes discussions, quizzes, and Dropbox folders. Linking to versus embedding multimedia content When integrating multimedia in icollege, you can either link to the multimedia content or embed the multimedia content. Linking to Multimedia Content Embedding Multimedia Content When you link to a video or audio file, you create a text-based link that users click on in order to view or hear the file. To create a link to a multimedia file, you simply need the web address for that file. Below is a sample link to a YouTube video within an icollege News Item. Notice that there is a textbased link that students click on to view the video. When you embed a video or audio file, a player displays directly on a page within your course. Users simply click the play button in order to view or hear the content. In order to embed multimedia, you will need to obtain the embed code. External sites like YouTube and Vimeo often provide the embed code that you need. Below is the same sample video embedded within a News Item. Students simply click to play the video without opening a new page. Integrating Multimedia in icollege Page 4 of 27

5 icollege options for linking to or embedding multimedia Within icollege there are three ways to link to and/or embed multimedia content. You can use the Quicklink tool to link to multimedia, use the Insert Stuff button to link to or embed multimedia, or enter HTML code in the HTML Source View of the HTML editor to link to or embed multimedia. 1. Using the Quicklink tool to LINK TO multimedia The Quicklink tool available in the HTML Editor and is one of four options for adding New Topics to your Course Content allows you to create links to multimedia. The link can be to media on an external site like YouTube or the USG Podcast Server or to media files that you have uploaded to icollege created with tools like Camtasia. 2. Using the Insert Stuff button to LINK TO or EMBED multimedia The Insert Stuff button on the HTML Editor is a versatile tool for linking to or embedding multimedia from virtually any source. You can select multimedia from five different sources. My Computer Course Offering Files YouTube Insert Link Enter Embed Code Integrating Multimedia in icollege Page 5 of 27

6 3. Entering HTML code in the HTML Source View of the HTML Editor to LINK TO or EMBED multimedia If you prefer to enter HTML code by hand or if you would like to make adjustments to existing HTML code, you can create links or embed media within the HTML Source View. At the bottom of the HTML Editor is an option to switch to the HTML Source View where you will be able to enter and adjust HTML code. Integrating Multimedia in icollege Page 6 of 27

7 Using Quicklinks to Link to External Content The Quicklink tool is available in the HTML Editor and is one of four options when creating New Topics in the Content tool. Quicklinks can be used to create textual links to external multimedia. Users then click on the textual link to be taken to the multimedia. The Quicklink tool is represented by a picture of a chain link with the Desire2Learn logo. Quicklinking from the Content Tool When Quicklinking from the Content tool, you create a New Topic within a module that is a link to the multimedia. It will be displayed within the Content viewer with the table of contents on the left. 1. Copy the web address for the multimedia to which you will link. 2. Click on Content in the Course Navigation. 3. Click New Topic. 4. Click Quicklink. 5. Select a Parent Module from the dropdown menu. 6. Enter a Title. The title is the name of the link that will be listed in the Content table of contents. 7. Under Content, paste the web address in the URL text box. 8. Click Save. Quicklinking from the HTML Editor When Quicklinking from the HTML Editor, the link to multimedia can be placed with descriptive text, directions, and/or imagery. 1. Copy the web address for the multimedia to which you will link. 2. Place your cursor at the location where you would like to place the textual link. 3. Click on the Quicklink icon in the HTML Editor. 4. From the Category dropdown menu, select URL. 5. Paste the web address for the multimedia. NOTE: When pasting a complete URL, make sure to delete the that is preloaded in the URL text box. 6. Enter a Link Caption. This is the text that users will click on in order to view the multimedia. 7. Determine how the link should behave. a. Whole Window The link will replace the content in the current window. b. Same Frame The link will appear in the same frame as the content typed in the HTML Editor. This is most relevant when creating Quicklinks within the Content tool where Content is displayed in a frame on the right with a table of contents on the left. c. New Window The link will open a new window or tab to display the content. Integrating Multimedia in icollege Page 7 of 27

8 Using the Insert Stuff button to link to or embed external content The Insert Stuff button is located in the HTML Editor. It allows you to integrate multimedia from five different sources. My Computer Course Offering Files YouTube Insert Link Enter Embed Code Uploads and inserts media files from your computer Inserts media files that have already been uploaded to icollege Allows you to search for and embed YouTube videos Allows you to create a link to an external resource Allows you to enter embed code obtained from an external resource Inserting Multimedia from your Computer 1. Click the Insert Stuff icon in the HTML Editor. 2. Select My Computer in the left hand menu. 3. Click Browse to locate the file on your computer. 4. Click Choose Destination to select or create a storage location for the file in your Course File structure. 5. Click Upload. NOTE: It may take a few moments for the upload to complete and transition to the next screen. 6. Enter a Title. 7. Enter an Alternative Text. 8. (Optional) Determine how the image will display. 9. Click Insert. Click the checkbox to indicate the image is decorative, if it does not represent important content but is only decoration. This allows screen readers for students with disabilities to ignore the image. Leave the checkbox to Lock aspect ratio if you would like to have the image remain in its original dimensions even if it is resized. If desired, specify a width and/or height for the image in pixels. Integrating Multimedia in icollege Page 8 of 27

9 Inserting Multimedia from your Course Offering Files 1. Click the Insert Stuff icon in the HTML Editor. 2. Select Course Offering Files in the left hand menu. 3. Select your file from the file directory or click Upload to upload a file to the directory. NOTE: You can select a file type from the Media Type dropdown menu at the bottom of the screen and click Apply to filter your directory search so that it only displays files matching the selected type. 4. Click Next. 5. Enter a Title. 6. Enter an Alternate Text. 7. (Optional) Determine how the image will display. Click the checkbox to indicate the image is decorative, if it does not represent important content but is only decoration. This allows screen readers for students with disabilities to ignore the image. Leave the checkbox to Lock aspect ratio if you would like to have the image remain in its original dimensions even if it is resized. If desired, specify a width and/or height for the image in pixels. 8. Click Insert. Inserting YouTube videos 1. Click the Insert Stuff icon in the HTML Editor. 2. Select YouTube in the left hand menu. 3. Enter search terms in order to locate an appropriate video. 4. Click Search. NOTE: You can preview the video by clicking on the video thumbnail. 5. Click on the video that you would like to use. 6. Click Next. 7. Click Insert. Integrating Multimedia in icollege Page 9 of 27

10 Inserting Links 1. Click the Insert Stuff icon in the HTML Editor. 2. Select Insert Link in the left hand menu. 3. Paste or enter the URL in the URL text box. 4. Click Next. 5. Enter a Title. This is the text that users will click on in order to access the URL. 6. Click Insert. Inserting Embed Code Click the Insert Stuff icon in the HTML Editor. 2. Select Enter Embed Code in the left hand menu. 3. Paste or enter the embed code in the Embed Code text area. 4. Click Next. 5. Click Insert. Integrating Multimedia in icollege Page 10 of 27

11 Integrating Instructor Created Podcasts The USG podcast server < is a podcasting server hosted by the University System of Georgia. You can request a channel and upload a variety of types of content. Podcast Episode Formats Audio Video Documents Accepted File Types.acc,.mp3,.m4a,.m4b,.m4v,.mov.m4v,.mp4,.mov PDF, epub,.ibooks There are a number of ways to integrate USG Podcast content within your icollege course. You can have your students subscribe, provide an RSS feed of the entire podcast, or link to or embed individual episodes. Subscribe A subscribe link or button provides an opportunity for the user to subscribe to the podcast through their itunes account. This means that episodes will be downloaded to their itunes account on their computer or mobile device for offline viewing. There are three ways to provide access to students to subscribe to your podcast in D2L. Manual Subscription link One click Subscription link Subscriptions button Integrating Multimedia in icollege Page 11 of 27

12 Subscription Option Manual Subscription Link Description You are given a manual subscription link from the podcast server. The link will take students to a page like the one to the right where they can follow the direction to subscribe. Appearance One Click Subscription Link You are given a one click subscription link from the podcast server. When students click on the link, a dialogue box like the one to the right will appear and automatically create the subscription in itunes. Subscription Button You are given embed code for a subscription button from the podcast server. You then place the embed code at an appropriate location within icollege in the source code. Students click on the link, and they will be automatically subscribed to the podcast in itunes Integrating Multimedia in icollege Page 12 of 27

13 To allow students to subscribe from icollege 1. Go to podcasting.gcsu.edu and login. 2. Click on Podcasting Channels in the left-hand menu. 3. In the Share Channel dropdown menu select your subscription option. 4. If you selected Manual Subscription Address or One-Click Subscription, 1. Copy the URL. 2. Return to icollege. 3. Create a link using the Insert Stuff button or Quicklinks button in either the HTML Editor or as one of the New Topic options in the Content tool. 5. If you selected Code to Embed Subscribe Button in Web Pages, 1. Copy the embed code. 2. Return to icollege. 3. In the HTML Editor (for example from a News Item or when creating a file in the Content tool), click on the Edit HTML Source icon at the bottom of the editor. 4. Paste the embed code. 5. Save. Integrating Multimedia in icollege Page 13 of 27

14 RSS Feed You can display an RSS feed of your entire podcast. This will allow student to play episodes within the browser. They will not need to have additional software such as itunes to view the podcasts. However, they will not be able to view episodes offline. When you display the RSS feed to students, it will look something like the image below. It will list each of the podcast episodes with their name, release date, and a play button. The episodes are listed with the most recent episode at the top of the list. Students can click on an individual episode to view it. Integrating Multimedia in icollege Page 14 of 27

15 To display the RSS feed for your podcast 1. Go to podcasting.gcsu.edu and login. 2. Click on Podcasting Channels in the left-hand menu. 3. In the Share Channel dropdown menu select Code to Embed RSS Display in Web Pages. 4. Copy the embed code. 5. Return to icollege. 6. In the HTML Editor (for example from a News Item or when creating a file in the Content tool), click on the Edit HTML Source icon at the bottom of the editor. 7. Paste the embed code. 8. Save. Integrating Multimedia in icollege Page 15 of 27

16 Individual Episodes In addition to allowing students access to the entire podcast through either subscription or the RSS feed, you can create links to individual episodes. When students click on the link to the episode, the episode will display within the browser, something like the image below. Integrating Multimedia in icollege Page 16 of 27

17 To link to an individual episode 1. Go to podcasting.gcsu.edu and login. 2. Click on Podcasting Channels in the left-hand menu. 3. In the List of Podcast Episodes click on Link Code for the episode you would like to link to. 4. Copy the embed code. 5. Return to icollege. 6. In the HTML Editor (for example from a News Item or when creating a file in the Content tool), click on the Insert Stuff button. 7. Select Enter Embed Code in the left-hand menu. 8. Paste the embed code. 9. Click Next. 10. Save. Integrating Multimedia in icollege Page 17 of 27

18 Integrating Instructor Created GPC Rewind Content If you are recording GPC Rewind content, you can manually add GPC Rewind content to your icollege section. You can either add an RSS feed of all of your GPC Rewind content or you can create links to individual episodes. Current Status URL a link to an individual episode EchoCenter Page a link to all GPC Rewind content in a week-by-week format RSS Feeds URL Vodcast a link to all GPC Rewind content in a reverse chronological format Integrating Multimedia in icollege Page 18 of 27

19 To create a link to GPC Rewind content 1. Go to and login. 2. Click on the Echoes tab. 3. Select a lecture. 4. Copy one of the links at the top of the page. 1. Current Status URL This links to the individual episode 2. EchoCenter Page URL Links to all of the recordings in a week-by-week organization 3. RSS Feeds URL Vodcast Links to all of the recordings in a reverse chronological listing 5. Return to icollege. 6. Create a link using the Insert Stuff button or Quicklinks button in either the HTML Editor or as one of the New Topic options in the Content tool. Integrating Multimedia in icollege Page 19 of 27

20 Integrating Instructor Created Windows Media Server Content Videos that have been placed on GPC s Windows Media Server are relatively simple to integrate with icollege. All videos placed on the Windows Media Server, will have a similar URL. You were provided the URL in the that confirmed your account creation. For example, the URL should look something like the two samples below: Basic URL URL for video within a folder: Integrating a Windows Media Video within the Content tool in icollege 1. Click Content in the course NavBar. 2. Click New Topic. 3. Select Quicklink. 4. Select a module where the link will appear. 5. Enter a Title. This is the name of the link in your table of contents. 6. Enter the URL for the Windows Media Video. 7. Save. Integrating a Windows Media Video within the HTML Editor in icollege 1. Select a location where you will enter the link. For example, you can place a link within an HTML document in your course files, in a News Item, or any other location where you have access to the HTML Editor. 2. Select Insert Stuff. 3. Click Insert Link in the left-hand menu. Integrating Multimedia in icollege Page 20 of 27

21 4. Enter the URL for the video and click Next. 5. Enter a Title for the video. This is what users will click on to view the video. 6. Click Insert. 7. Save the HTML edits. Integrating Multimedia in icollege Page 21 of 27

22 Integrating Instructor Created Camtasia Recordings When using Camtasia to produce video content, there are a number of production options to choose from. How you integrate Camtasia content with icollege will depend on how you produce the content. Production Settings Share to Screencast.com Share to YouTube.com MP4 Flash/HTML5 player WMV MOV AVI M4V MP3 GIF Integration Method When you share to Screencast.com, the video will open in the browser. Below the video are options under the Share tab to copy the URL or embed code. See the information above on using the Quicklinks and Insert Stuff tools. When you share to YouTube.com, the video will open in the browser. Below the video are options under the Share tab to copy the URL or embed code. See the information above on using the Quicklinks and Insert Stuff tools. When you produce to the MP4 Flash/HTML5 player format, a folder of content will be generated. You will need to upload this folder to a web directory. Directions are provided below. When your produce a WMV file, a single file will be generated on your computer. The best way to publish this type of video is to the WMV streaming server. See the section on Integrating Instructor Created Windows Streaming Server Content. When you produce a MOV, a single file will be generated on your computer. The best way to publish this type of video is the USG Podcast Server. See the section on Integrating Instructor Created Podcasts. When you produce an AVI, a single file will be generated on your computer. The best way to publish this type of video is the USG Podcast Server. See the section on Integrating Instructor Created Podcasts. When you produce a M4V, a single file will be generated on your computer. The best way to publish this type of video is the USG Podcast Server. See the section on Integrating Instructor Created Podcasts. When you produce a MP3, a single file will be generated on your computer. It is audio only. The best way to publish this type of video is the USG Podcast Server. See the section on Integrating Instructor Created Podcasts. When you produce a GIF, a single file will be generated on your computer. The best way to publish this type of video is to upload it as an image using the Insert Image icon in the HTML Editor. Integrating Multimedia in icollege Page 22 of 27

23 How to publish MP4 Flash/HTML5 Player Content 1. Locate the folder of files on your computer. The folder will likely contain a number of files similar to the sample below. 2. Right-click on the folder. 3. Hover over Send to and select Compressed (zipped) folder. This will create a single file called a zip file that can be uploaded to icollege. Integrating Multimedia in icollege Page 23 of 27

24 4. In icollege, click on Manage Files in the Course Administration Widget of your course. 5. Click Upload. 6. Browse for the zip file that you created in step 3. The icon for the file should be a folder with a zipper running from the bottom to the top. Integrating Multimedia in icollege Page 24 of 27

25 7. Upload the file. 8. Hover over the file, and click on the arrow to the right of the file name. Integrating Multimedia in icollege Page 25 of 27

26 9. Select Unzip. This will create a new folder containing all of the files that were on your computer. 10. Once it is uploaded, you will need to create a link to one of the.html files. There are two. The link should be to the one that does not contain the word player in the name. There are several ways to link to the file. 1. Link to the file from the HTML Editor. 1. Place your cursor at the location where you would like to create a link to the video. 2. Click on the Quicklink button in the HTML editor. 3. From the Category dropdown menu, select Course File. 4. Select the correct.html file. 5. Enter a Link Caption. These are the words users will click on in order to access the video. 6. Click Insert. 7. Save. 2. Link to the file as a New Topic in the content area. 1. Click on Content in the course navigation. 2. Click New Topic. 3. Select Course File. 4. Select a module and enter a title. 5. Browse for the file. 6. Save. Integrating Multimedia in icollege Page 26 of 27

27 Frequently Asked Questions Do I need to be concerned with copyright when linking to or embedding external content? No. When a website offers sharing options or places content on the web, they are hoping for traffic to be directed to their website. The only reason to be concerned is if you are presenting the content as your own, and it is not, or incorporating it in resources that are being sold. Integrating Multimedia in icollege Page 27 of 27