Multimedia elements in HTML

The multimedia elements offered by HTML5 allow you to add audio and video to a website, and even access the camera of your PC or mobile devices to record videos or take pictures

For many years these elements were demanded by the developers, since it was only possible to play multimedia elements using plugins or addons that had to be previously installed in the browser

From the HTML5 standard were included the elements:

• video

  embed a video in the web page

• audio

  embed an audio clip into the web page

The only restriction is that we can only reference one file (for which we will use its attribute src)

But it allows you to include more than one encoding format (for which we will use elements source)

The inclusion of the elements source is due to the incompatibilities between the audio or video encoding formats supported by each browser, since due to the different licenses, there is still no clear standard for the internet

Currently, the most compatible audio formats for browsers are:

• WAV

  also known as WAVE it is a digital audio format without data compression

  It was developed by Microsoft and IBM

• OGG

  is the container used by lossy digital codecs:

  • Opus

    it is a format of open source

    Está estandarizado por el Internet Engineering Task Force (IETF)

  • Vorbis

    it is a format of open source

    It was developed by Xiph.org

• MP3

  format of digital audio compression

  It was developed by Moving Picture Experts Group (MPEG)

• AAC

  also known as Advanced Audio Coding is a codec digital with lost

  It follows the international standard ISO/IEC 13818-7 as an extension of the MPEG-2

  It is widely used in Apple devices

Mientras que para vídeo:

• MP4

  MPEG 4 format files with H264 video codec and AAC audio codec

• WebM

  files with the WebM format with the video codec VP8 and the audio codec Vorbis

• Ogg

  files with the Ogg format with the video codec Theora and the audio codec Vorbis

Audio

<audio controls>
    <source src='Amaral - Hacia lo salvaje.wav' type='audio/wav'>
    <source src='Amaral - Hacia lo salvaje.ogg' type='audio/ogg'>
    <source src='Amaral - Hacia lo salvaje.mp3' type='audio/mp3'>
    <source src='Amaral - Hacia lo salvaje.aac' type='audio/aac'>
    Your browser does not support the audio format used by this song
</audio>

The example referred to Amaral's song, Hacia lo salvaje, for this purpose four elements have been used source

He has indicated to the browser by using the attribute src where you can locate the file and its extension and with the attribute type he has indicated what type of file should play

The example only referenced WAV, OGG, MP3, and AAC types, but multiple files of the same type could be referenced but with different audio qualities

Within the element audio it has also included a text that will be used by default in the event that our browser does not support any of the audio types listed on the items source

In the example you have used the attribute controls, which is a generic attribute that you share with video

Among the most outstanding attributes for audio and video elements we have:

• autoplay

  the playback starts at the same time of the loading of the page

• controls

  are added to the playback controls so that the user can control it

• loop

  the file plays continuously, i.e. when playback is over, it starts again from the beginning

Video

<video controls autoplay>
    <source src='Joker.ogg' type='video/ogg'>
    <source src='Joker.mp4' type='video/mp4'>
    <source src="Joker.webm" type="video/webm">
    <object data="Joker.swf" type="application/x-shockwave-flash">
        <param value="Joker.swf" name="movie"/>
    </object>
    Your browser does not support the video format used by this movie
</video>

The example for the item video it is very similar to that seen previously for the item audio with the exception of including an element object

This element allows browsers that do not support HTML5 can play a file by using the flash plugin

This option can be useful with older browsers that still use earlier versions of HTML

Although Google has decided to remove flash support in its Chrome browser, to encourage the use of HTML5's new video capabilities

In Chrome you can only use flash on demand, explicitly indicating it in your settings and for web pages that the user allows