Virtual Instruments
About the Technique
With a little creativity, you can use Camtasia to create simple virtual instruments that can be played in the context of a web page. Combine one or more embedded virtual instruments on the same page as an embedded linear video and you have an interactive playground for students to enjoy. Here is a fun example. While you enjoy the video of the cowboy song, click the triangle on the first beat of each measure, or click the notes on the keyboard that match the chord symbols.
With a little creativity, you can use Camtasia to create simple virtual instruments that can be played in the context of a web page. Combine one or more embedded virtual instruments on the same page as an embedded linear video and you have an interactive playground for students to enjoy. Here is a fun example. While you enjoy the video of the cowboy song, click the triangle on the first beat of each measure, or click the notes on the keyboard that match the chord symbols.
|
|
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>