There are several options when it comes to adding video to your course. In this article we will go through each of the methods and how to add them to your course.
These include:
- Media component - used for embedding video such as MP4's, OGV's, WEBM's and audio in the MP3 format
- YouTube Player component - used for adding YouTube videos
- Vimeo Player component - used for adding Vimeo videos
- HTML5 Media element - an advanced technique used for adding video (MP4 format) and audio (mp3 format) into another component using the body text field.
Media component
The media component allows you to add video in the MP4, OGV or WEBM format and audio in MP3 format.
NOTE: if you are adding a lot of videos to your course through the media component it is worth keeping an eye on the file sizes of your videos. As a large number of videos can often make the overall course file size add up. This matters if you are adding your course to a Learning Management System (LMS). Some LMS's have a course upload limit of around 300mb. If you have multiple videos that are large in file size consider adding these to an online streaming service such as Youtube or Vimeo and linking them in your course using the Youtube Player or Vimeo Player components.
How to...
In your course go ahead and double click on your page to edit it. Select the ADD BLOCK button, then select the ADD COMPONENT button that appears within the block. From the components sidebar menu scroll to the media component and select it to reveal the ADD buttons. Select whichever one suits your desired video placement. Double click on the component or select the cog button on the top left of the component and select the Edit button to delve into the settings.
When adding media to your course you are given the following settings:
For this example we will choose an MP4 video. Select the SELECT AN ASSET button underneath the MP4 setting. This will open up the course asset library so that you can choose your video in this format. If you have not already uploaded your video select the UPLOAD NEW ASSET button from the top left of the screen and choose the mp4 video that you would like to upload.
Add an asset title and description for your video before selecting the UPLOAD button. The percentage underneath the CHOOSE FILE button will indicate the upload completion. The asset library will automatically refresh once your file has been uploaded. Choose the video you have just uploaded and select the DONE button from the right hand side of the screen.
When the page refreshes you will now have your video added to your media component.
Select the SAVE button to confirm and select the PREVIEW COURSE button to see the video you've just added.
YouTube Player Component
Use for embedding Youtube videos into your courses. This is useful for streaming long videos with large files sizes.
How to...
Starting inside a page within your course. Let's go ahead and add a block to your course by selecting ADD BLOCK. Then select the ADD COMPONENT button and to bring up the component sidebar menu. Scroll down and select the YouTube Player and add it to your component.
On the YouTube Player component either double click or select the cog icon and select edit to explore the settings. Scroll down to the Media Settings, particularly the source url text field. You will notice there is already a link present as an example.
Go to your YouTube video so we can grab the url link we need to add to the component. Within your chosen YouTube video select the SHARE button. In the popup that follows select the EMBED button this will bring up a section of code. Within that code locate and highlight the embed link and copy it. An example of this highlighted link can be seen below.
Go back to your Adapt course and paste the link in the Source URL text field. Ensuring you replace the link that was there previously. Select the SAVE button to confirm your changes. Then select the PREVIEW COURSE button to see your YouTube video in action.
Vimeo Player Component
This component is specifically designed to embed a Vimeo video into your course. As with the YouTube video this is useful for streaming long videos with large file sizes.
How to...
Within your course page select the ADD BLOCK button to add a new block. Then select the ADD COMPONENT button to bring up the component sidebar menu. Scroll down and select the Vimeo Player component to add it.
Either double click the component or select the cog icon, then the EDIT button to gain access to the component's settings. Scroll down to the Media settings section, directly below this should be an empty text field entitled Source URL. This is where we want the Vimeo link to be.
Now in Vimeo, locate the video that you want to add to your course. In the location bar on your browser window highlight the video's URL and copy it.
Going back to your Adapt course paste this link into the Source URL text field we located earlier. Select the SAVE button. Then select the PREVIEW COURSE button to check it works as desired.
HTML5 Media element
For times when you want to create a media element within another component such as a Text Component. This is a more advanced technique than the other methods.
How to
First add a block to your page by selecting the ADD BLOCK button. Then select the ADD COMPONENT button to bring up the components sidebar menu. For this one we will use a Text Component but you could use any component that has a text body field. Scroll to the bottom of the components sidebar menu and select the Text Component then select the ADD button.
Double click on the component to edit it or select the cog icon and then choose the EDIT button. Scroll to the Body text field and select the SOURCE button on the top left.
Once you have selected the button you will now be able to add the code for the HTML media element. Copy and paste the below HTML. The long line of numbers and letters (e6dfc86c04f43d33b47d4908e375cdafce52cc61.mp4) is the asset ID we want to replace this example with the ID of the video file you want in your course. Select the SAVE button to save what we have done so far.
<p><video controls="" height="auto" id="video" width="100%"><source src="course/en/assets/e6dfc86c04f43d33b47d4908e375cdafce52cc61.mp4" type="video/mp4" />Your browser does not support the video element.</video></p>
First, we need to be able to add the video file into the course so that it exports with other assets added. We can do this by adding the Course Assets extension. From the left hand menu select the MANAGE EXTENSIONS text button. Scroll down to the Course Assets extension and select the ADD button from the right. Then select the BACK TO PAGE STRUCTURE text button from the top left.
Select the PROJECT SETTINGS text button from the left hand menu and scroll down to the Extensions section and select the Course Assets extension to reveal its settings. Select the ADD button, in the sidebar that opens add a title for your media file. Then select the SELECT AN ASSET button to add your MP4 video file. When you have chosen your media file select the OK button to confirm.
Now you have added your media file to your course highlight the ID as shown below along with the type of file it is such as .mp4 in our example. Copy this asset ID and select the SAVE button.
Navigate back to the text component we were working with earlier and double click to edit it. Select the SOURCE button once more and highlight the ID and paste the ID you have just copied so that it replaces it. You may need to delete the extra space and add text it can sometimes include.
Select the SAVE button. Then select the PREVIEW COURSE button to check this new addition works.