Listening Maps
About the Technique
With a little creativity, you can use Camtasia to create listening maps that can be played in the context of a web page. A listening map at its most basic is a linear video that has chaptering and some way for users to easily navigate from section to section. There are ways to create chapters in videos that you post to YouTube using the YouTube Studio online product that Google makes available. Camtasia takes it one step further and allows you to create markers in your video and hotspots that users can click to navigate to the markers. Camtasia also has a built-in quiz feature to allow you to assess student understanding at any point in the video. Or you can use a url-style hotspot in Camtasia to create a link in the video to a quiz on another service. Below is an example listening map created with Camtasia and published to their ScreenCast online service.
With a little creativity, you can use Camtasia to create listening maps that can be played in the context of a web page. A listening map at its most basic is a linear video that has chaptering and some way for users to easily navigate from section to section. There are ways to create chapters in videos that you post to YouTube using the YouTube Studio online product that Google makes available. Camtasia takes it one step further and allows you to create markers in your video and hotspots that users can click to navigate to the markers. Camtasia also has a built-in quiz feature to allow you to assess student understanding at any point in the video. Or you can use a url-style hotspot in Camtasia to create a link in the video to a quiz on another service. Below is an example listening map created with Camtasia and published to their ScreenCast online service.
For responsive iFrames you will need to modify your embed code. Here is an example.
Start by examining the embed code that ScreenCast provides. Make note of two pieces of information: The height and width and the complete address found in the src attribute. Divide the height by the width and get a percentage. Now delete all that code and copy paste the code below. Modify just two things:
<!-- COPY AND PASTE THIS CODE BELOW. THEN CHANGE THE PADDING-TOP AND SRC URL.-->
<div style="position:relative;padding-top:75%;overflow:hidden;">
<iframe class="embeddedObject shadow resizable" name="embedded_content" scrolling="no" frameborder="0" type="text/html"
style="overflow:hidden;position:absolute;left:0;top:0;width:100%;height:100%;"
src="REPLACE WITH THE WEB ADDRESS FROM THE ORIGINAL EMBED CODE"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
Start by examining the embed code that ScreenCast provides. Make note of two pieces of information: The height and width and the complete address found in the src attribute. Divide the height by the width and get a percentage. Now delete all that code and copy paste the code below. Modify just two things:
- The padding-top percentage to match your aspect ratio. Square is 100%, 4 by 3 videos are set to 75%, and 16 by 9 (widescreen) are set to 56.25%.
- The address in the src attribute.
<!-- COPY AND PASTE THIS CODE BELOW. THEN CHANGE THE PADDING-TOP AND SRC URL.-->
<div style="position:relative;padding-top:75%;overflow:hidden;">
<iframe class="embeddedObject shadow resizable" name="embedded_content" scrolling="no" frameborder="0" type="text/html"
style="overflow:hidden;position:absolute;left:0;top:0;width:100%;height:100%;"
src="REPLACE WITH THE WEB ADDRESS FROM THE ORIGINAL EMBED CODE"
webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>