Home | | Internet & World Wide Web HOW TO PROGRAM | | Internet Programming | | Web Programming | Adding Audio or Video with the embed Element

Chapter: Internet & World Wide Web HOW TO PROGRAM - Multimedia: Audio, Video, Speech Synthesis and Recognition

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail

Adding Audio or Video with the embed Element

In this section, we introduce the embed element, which embeds a media clip (audio or video) into a Web page.

Adding Audio or Video with the embed Element

 

Previously, we used elements bgsound and img to embed audio and video in a Web page. In both cases, users of the page have little control over the media clip. In this section, we introduce the embed element, which embeds a media clip (audio or video) into a Web page. The embed element displays a graphical user interface that gives users direct control over the media clip. When the browser encounters a media clip in an embed element, the browser plays the clip with the player registered to handle that media type on the client computer. For example, if the media clip is a wave file (i.e., a Windows Wave file), In-ternet Explorer typically uses the Windows Media Player ActiveX control to play the clip. The Windows Media Player has a GUI that enables users to play, pause and stop the media clip. Users can also control the volume of audio and move forward and backward through the clip using the GUI. [Note: Section 33.5 discusses embedding the Windows Media Play-er ActiveX control in a Web page.]

 

The embed element is supported by both Microsoft Internet Explorer and Netscape Communicator, however it is not part of the XHTML 1.0 recommendation. Documents written in XHTML using the embed element should render properly in either browser, however, errors may occur when trying to validate the document using the World Wide Web Consortium’s XHTML 1.0 validator.

The XHTML document of Fig. 33.3 modifies the wave filter example from Chapter 15 by using an embed element to add audio to the Web page.

 

Line 58 uses the embed element to specify that the audio file humming.wav should be embedded in the Web page. The loop property indicates that the media clip should loop indefinitely. The width and height properties define the size of the controls for the sound clip. By default, the GUI for the media player is displayed. To prevent the GUI from appearing in the Web page, add the hidden property to the <embed> element. To script the element, specify a scripting name by adding the id property to the <embed> element.

 

The embed element can specify video clips as well as audio clips. Figure 33.4 dem-onstrates an embedded video. The embedelement that loads and plays the video is located in line 18.

 

    <?xml version = "1.0"?>

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- Fig. 33.3: EmbeddedAudio.html          -->

<!-- Background Audio via the embed Element -->

    <html xmlns = "http://www.w3.org/1999/xhtml">

    <head>

      <title>Background Audio via the embed Element</title>

<style type = "text/css">

span  { width: 600 }

.big    { color: blue;

          font-family: sans-serif;

          font-size: 50pt;

          font-weight: bold }

</style>     

         

<script type = "text/javascript">

<!--   

var TimerID;

var updown = true;

var str = 1;

         

function start()

{       

TimerID = window.setInterval( "wave()", 100 );

}       

         

function wave()

{       

if ( str > 20 || str < 1 )

          updown = !updown;

         

if ( updown )

          str++;

else

          str--;

         

wft.filters( "wave" ).phase = str * 30;

wft.filters( "wave" ).strength = str;

}       

 

          </script>

          </head>

 

          <body onload = "start()">

          <h1>Background Audio via the embed Element</h1>

          <p>Click the text to stop the script.</p>

 

          <p class = "big" align = "center">

          <span onclick = "window.clearInterval( TimerID )"

          id = "wft" style =  "filter:wave(

          add = 0, freq = 3, light = 0,     phase = 0, strength = 5)">

          WAVE FILTER EFFECT</p></span>     

                            

          <p>These controls can be used to control the audio.</p>

          <embed src = "humming.wav" loop = "true"></embed>

          </body>

          </html>


Fig. 33.3 Embedding audio with the embed element

 

Study Material, Lecturing Notes, Assignment, Reference, Wiki description explanation, brief detail


Copyright © 2018-2020 BrainKart.com; All Rights Reserved. Developed by Therithal info, Chennai.