Multimedia - images, svg, audio and video

The multimedia content represents pictures, sound, animation and video elements that appear on the pages.

Pictures

To insert the image in an HTML page use the <img> element, which has no end tag, and it's always empty. Attributes that are commonly used are src and alt.

Example:

<!-- absolute path -->
<img src="http://www.example.com/imagename.png" alt="image name">
<!-- relative path -->
<img src="images/suzuki.jpg" alt="suzuki motorcycle">

Result:

Explanation: the value of the src attribute is the path to the image that needs to be displayed. It is possible to use an absolute or relative path. Alt attribute should contain the basic information about the image, and this is the text that the user will see if the image for some reason can not be displayed, for example, src is not well specified. This attribute is used by screen readers.

SVG (Scalable Vector Graphics)

From HTML5 version there are tags that can be used for describing the structure of the graphics. The main tag is <svg>. Within this tag, there are tags that are used to describe and combine different graphical elements:

• rectangles, circles, ellipses and polygons
• broken lines and curves
• image - standard or other SVG images and text

In addition to setting these elements on the image, SVG allows you to perform various transformations such as setting up the gradient, rotation of individual elements, etc.

Example 2:

<svg  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
     <rect x="10" y="10" height="100" width="100" style="stroke:#571B6B; fill: #C390D4"/>
</svg>

Result:

Audio and video

Example 3:

<!-- to get src link copy 1st part 
http://www.youtube.com/v/ and 
add 2nd part from Youtube video q0jtm3i8RPI -->

<embed type="application/x-shockwave-flash" width="560" height="315" src="http://www.youtube.com/v/q0jtm3i8RPI" > 
 </embed> 

 <!-- this src link won't work --> 
<embed type="application/x-shockwave-flash" width="560" height="315" src="https://www.youtube.com/watch?v=q0jtm3i8RPI"> 
 </embed>

Result:

How to get a src link

1. Copy the first part of the link http://www.youtube.com/v/
2. Find the video you want and copy the second part, all after the v=, in this example, q0jtm3i8RPI
3. Paste after the v/, in this example, http://www.youtube.com/v/q0jtm3i8RPI

Explanation: the value of the src attribute defines the file that should be launched, in this example, Youtube video. <Embed> tag serves to define a container for external application.

In addition to the <embed> tag, there is a <object> tag, which can also be used to display multimedia content.

Example 4:

       <object width="560" height="315" 
data="http://www.youtube.com/v/paUd4AOX_8k">

</object>

Result:

HTML5 has tags to display audio and video content. You can use the <audio> and <video> tags.

Example 5:

<object>
<param name="src" value="audio/ride.mp3">
<param name="autoplay" value="false">
<param name="controller" value="true">
<embed src="audio/ride.mp3" autostart="false" loop="false" width="300" height="72" controller="true" >

</object><br /><br />

       <audio controls>
  <source src="audio/los-kjarkas-tiempo-al-tiempo.mp4"
         type='audio/mp4'>
</audio>

        <audio controls>
  <source src="audio/los-kjarkas-tuna-papita.ogg"
         type='audio/ogg'>

  <p>Your user agent doesn't support the HTML5 Audio element.</p>

</audio>

Result:

Chrome

In the <audio> tag there are several attributes by which it can be specified whether it is necessary to set the control for play or pause, for example, controls - that is mostly used, whether it is necessary to start as soon as the file is loaded - autoplay, do you need to repplay file - loop, or if it is necessary to mute control - muted.

Example 6:

         <video width="400" controls>
   <source src="video/rio.mp4" type="video/mp4">
   <source src="video/rio.ogg" type="video/ogg">
   Your browser does not support HTML5 video.

</video>


Result:

Complete code used in examples.