Adding media elements to our pages

Today we add various media elements to our project pages including images (both as html img tags and as css attributes), sound using the audio tag, and video from YouTube.

Student will all have Audacity installed with the mp3 extension so that they can create audio to be used in their projects.

These features and tools will all be critical for the games and activities that we will use for our upcoming projects.

Here is the finished code cover in class.  Students also must create directories bildoj and sonoj to put in their own images and audio.

<!DOCTYPE html>
<html>
    <head>
        <title>Tago 6</title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="http://code.jquery.com/jquery-latest.min.js"></script>
        <script> $(document).ready(function() {

            $("img").click(function(e){
                e.preventDefault();
                soundname=$(this).data('sono');
                var song = $('#'+soundname).get(0);
                $(this).fadeTo("slow", .2);
                song.play();
                $(this).fadeTo("slow", 1);
            });
        });
        </script>
        <style type="text/css">    
            body {
                background-image:url("http://bazaesperanto.com/bildoj/fonoj/BlueprintiPad.jpg");
            }
        </style>
    </head>
    <body>
        <div>
            <img data-sono ="sono1" src="http://bazaesperanto.com/bildoj/1.png"/>
            <audio controls="controls" id="sono1">
                <source src="http://bazaesperanto.com/sonoj/eo1.mp3" type="audio/mpeg" />
                <source src="http://bazaesperanto.com/sonoj/eo1.ogg" type="audio/ogg" />
                Your browser does not support the audio tag.
            </audio>
        </div>

        <div>
            <img  data-sono ="sono2" src="http://bazaesperanto.com/bildoj/2.png"/>
            <audio controls="controls" id="sono2">
                <source src="http://bazaesperanto.com/sonoj/eo2.mp3" type="audio/mpeg" />
                <source src="http://bazaesperanto.com/sonoj/eo2.ogg" type="audio/ogg" />
                Your browser does not support the audio tag.
            </audio>
        </div>

        <div>
            <img  data-sono ="sono3" src="http://bazaesperanto.com/bildoj/3.png"/>
            <audio controls="controls" id="sono3">
                <source src="http://bazaesperanto.com/sonoj/eo3.mp3" type="audio/mpeg" />
                <source src="http://bazaesperanto.com/sonoj/eo3.ogg" type="audio/ogg" />
                Your browser does not support the audio tag.
            </audio>
        </div>
        
        <div>
            <img data-sono="sono4" src="bildoj/4.png" width="144" height="144" alt="4"/>     
            <audio controls="controls" id="sono4">
                <source src="sonoj/eo4.mp3" type="audio/mpeg" />
                <source src="sonoj/eo4.ogg" type="audio/ogg" />
                Your browser does not support the audio tag.
            </audio>
        </div>
        <iframe width="420" height="315" src="http://www.youtube.com/embed/rYb5PfpQ9hg" frameborder="0" allowfullscreen></iframe>
    </body>
</html>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s